Variable products image swatches
-
Hello,
I have a few products with different colors, and I followed your documentation to create this, which is working on my single product page (link in private content), but I can’t figure out how to show them in the Product loop item that I created (named CFB Custom Product Loop). Using the “product variations” widget only shows the sizes. I’m trying to do something like the screenshot below.
Can you help me figure this out? Links in the private content area
Attachments:
You must be
logged in to view attached files.
Hello,
Navigate to Theme Settings > Shop > Variable products > set them as “Grid swatch attribute to display”: https://postimg.cc/FfxThbRd
Best Regards
Yes, I already had that option selected with the right attribute.
Attachments:
You must be
logged in to view attached files.
Hello,
I have further checked this behaviour and because custom Product Loop layouts are built using the native WordPress Gutenberg editor global Theme Settings do not apply to them. Every block inside your custom loop layout must be configured individually.
The Product Loop “ Product Variations” element currently does not allow selecting a specific attribute (like Color). It automatically renders variation attributes based on product structure, which is why Size is shown first and colors only appear after selecting a size. You need to choose one variation then the other will show.
Here is the documentation how the loop builder work in custom layout:
https://xtemos.com/docs-topic/product-loop-item-layout-builder/
Best Regards
So it’s not possible to use images, right? Is it possible to show just the colors, like some of the predefined templates?
Hello,
Yes, you can try disabling the custom Product Loop Item layout and use one of the default WoodMart product grid layouts. Then navigate to Theme Settings > Shop > Variable Products and set the Quick Shop Type to “On Variation Click”. With this configuration, the variation images should be displayed correctly in the product grid.
But if you want to use loop items with color swatches, you need to edit the color attribute terms and configure them as Color Swatches. You can check this under Products > Attributes > Configure Terms for your color attribute. Once the attribute terms are set up as color swatches, they should appear correctly as colors in the product grid.
Best Regards
But if you want to use loop items with color swatches, you need to edit the color attribute terms and configure them as Color Swatches. You can check this under Products > Attributes > Configure Terms for your color attribute. Once the attribute terms are set up as color swatches, they should appear correctly as colors in the product grid.
But with this configuration, I also lose the image swatches on the single product page, right?
Hello,
Yes, that’s correct. After changing the color swatch it will also affect a single product page.
Best Regards
.
