Home › Forums › Basel support forum › Variable Product Color Swatches with product images tied to variations

Variable Product Color Swatches with product images tied to variations

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • January 3, 2019 at 7:31 pm #99710

    mcmullen
    Participant

    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.

    January 3, 2019 at 9:10 pm #99729

    Elise Noromit
    Member

    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

    January 3, 2019 at 9:24 pm #99731

    mcmullen
    Participant

    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!

    January 3, 2019 at 9:44 pm #99736

    Elise Noromit
    Member

    Hello,

    Please provide your site admin access and product URL

    Best Regards

    January 3, 2019 at 9:54 pm #99739

    mcmullen
    Participant

    See Private content area for URLs and credentials.

    January 4, 2019 at 8:05 am #99779

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    January 4, 2019 at 2:23 pm #99890

    mcmullen
    Participant

    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

    January 4, 2019 at 3:20 pm #99909

    Elise Noromit
    Member

    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

    January 4, 2019 at 3:27 pm #99911

    mcmullen
    Participant

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

    Thanks!

    January 4, 2019 at 5:50 pm #99943

    Elise Noromit
    Member

    Hello,

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

    body .single_variation_wrap {
    display:none;
}

    Best Regards

    January 4, 2019 at 6:08 pm #99944

    mcmullen
    Participant

    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

    January 5, 2019 at 1:04 pm #100058

    Elise Noromit
    Member

    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

    January 6, 2019 at 5:02 pm #100206

    mcmullen
    Participant

    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!

    January 6, 2019 at 11:18 pm #100251

    mcmullen
    Participant

    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?

    January 7, 2019 at 10:29 am #100315

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    January 7, 2019 at 6:28 pm #100473

    mcmullen
    Participant

    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!

    January 7, 2019 at 9:06 pm #100506

    Elise Noromit
    Member

    Hello,

    There is no other way exception hiding with CSS.

    Catalog mode hides variations by you want to show them.

    Best Regards

    January 8, 2019 at 6:10 am #100527

    mcmullen
    Participant

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

    I appreciate the help!

    January 8, 2019 at 8:08 am #100546

    Elise Noromit
    Member

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

    Best Regards

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)

The topic ‘Variable Product Color Swatches with product images tied to variations’ is closed to new replies.