Jump to content
markosolo

Select product color option using swatch images

Recommended Posts

Not sure if this is an add on or if possible doing some hacking... instead of choosing a product color option using radio, select or checkbox I would like to use small 30px X 30px images of red, blue, black etc.that customers could click on to select a color. I've experimented converting a radio list using some CSS but things got messy. If anyone has any ideas that would be great!

Share this post


Link to post
Share on other sites

There is a new HTML5 input type="color" that, depending on browser support, will show an entire color wheel -- no means have been found to limit the colors available.

So, in a drop-down selector, one can add style="background-color: {$value.value_name};", for example red, to the <option> tag. But you would need some javascript to copy the selected color into the <select> tag.

Of course, this would only work on drop-down selectors that offer choices of named colors, and any other drop-down selector that offers non-color-based choices might produce strange effects.

Share this post


Link to post
Share on other sites

Thanks bsmither. The image below will make more sense on what I am would like to achieve.  Probably requires major surgery but might be a good idea for a plugin.

color-swatch-screen.jpg.3340187b71f11034ad354914bcb1142f.jpg

Share this post


Link to post
Share on other sites

The trick with this is to identify somehow that this option choice type should be shown as a collection of colored squares.

We currently have nine option choice types, and are listed in /classes/catalogue.class.php, lines 36-44.

I agree that a collection of radio buttons can be CSS reconfigured to show as a set of colored boxes.

This one can be simplified:
https://codepen.io/nikkipantony/pen/wpPGZp

Or this one:
https://codepen.io/rauldronca/pen/EWLeMz

 

Share this post


Link to post
Share on other sites

Thanks for pointing me in the right direction! By the way, over the past year I have tried just about ALL of the carts out there and I am back to cubecart. 👍

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...