Variable Product Color Swatches with product images tied to variations

I am trying to get the color swatch circles to show on my site, as well as the size swatches. Additionally, I want the product images to be tied to the color swatches, so that when a user selects a specific color, the images are replaced by the images in that variant’s image gallery. For example: if user selects the Green Color swatch, all product images are replaced with the green variant images.

I believe this is possible, and I have followed the YouTube video for the Color & Size attributes, but I cannot get them to show on the site.

Can you help me with the configuration? I’m sure I am missing something, but don’t know what!

I really appreciate any guidance and help you can provide.

Hello,

Please navigate to Dashboard -> Products -> Attributes -> Color -> Configure iterms, enable swatch as shown http://prntscr.com/jskm29

Navigate to Theme Settings > Shop > Attribute swatches > choose pa_color (your color attribute) and enable “Use images from product variations”

Make sure each variation in a variable product has an image: http://prntscr.com/kk870w

Best Regards

Hi Elise,

Thank you for the reply. I followed the steps you recommended, and this is the outcome: http://prntscr.com/m2qofs

As you can see, the color swatches do not show up. The only difference I see is that the different colors are now visible in the grid view: http://prntscr.com/m2qp77

DO you have other suggestions, or something I’m missing? Thanks!

Hello,

Please provide your site admin access and product URL

Best Regards

See Private content area for URLs and credentials.

Hello,

Please disable Catalog mode in the Theme settings > Shop > Catalog mode.

Best Regards

Elise –

I need Catalog Mode enabled, and I need color swatches that change product images when selected. Is it not possible to have both at the same time? This is the reason I selected this theme…

Please advise

Hello,

Disable the catalog mode and we shall hide price, quantity and add to cart button with the custom CSS

There is no other way regardless of the theme.

Best Regards

Ok gotcha. It’s done – catalog mode is off.

Thanks!

Hello,

Add this code to the Theme Settings > Custom CSS > Global

body .single_variation_wrap {
    display:none;
}

Best Regards

I added it (see here: http://prntscr.com/m333gx) but I still see the quantity and Add to cart button.

Also, on the shop page (product grid) I still see the “select options” button/graphic: http://prntscr.com/m334ak

Hello,

Please add this code to the Theme Settings > Custom CSS

.product-grid-item .wrapp-swap, body .single-product-page .cart {
    display: none;
}

Best Regards

Hi ELise,

Thanks for the additional snippet. I got it to work, but had to add !important to force it. It will work for our purposes now. Thanks!

ELise,
Upon further review, I found that the additional code snippet you provided actually disabled the color swatches entirely:

.product-grid-item .wrapp-swap, body .single-product-page .cart {
    display: none;
}

When I deleted it and just kept the original shorter snippet it works on Variable products, but the “add to cart” and “quantity” still appear on the simple products:

.single_variation_wrap {
    display:none !important;
}

What class do target to hide on simple products?

Hello,

Now I am checking the product and do not see the problem. https://gyazo.com/0cd2a332449ad1442dbe0640bd54914a

Best Regards

Elise,
After I messaged you, I targeted each individual element class and was able to hide them after some trial and error. I was curious to know if there was a better way. Thanks!

Hello,

There is no other way exception hiding with CSS.

Catalog mode hides variations by you want to show them.

Best Regards

Thanks again Elise, I just wanted to make sure I wasn’t using a bad practice by hacking and chopping 🙂

I appreciate the help!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts