Variable products images – Preview on shop page and product page

I dont want variable products to show on the shop page.

I have turned off “Show variations on quick view” and “Quick Shop for variable products”, but it still shows with error. One product with text, another with blank and a third one works. Look at the screenshot added.

I also have a problem with the variable images not showing in the product page. It only works on one of the products.

Attachments:

You must be logged in to view attached files.

Hello,

Thank you so much purchasing our theme and contacting our support center.

You need to disable this option to remove variations from the shop page https://gyazo.com/e0dd38777580a56f537e5ccca0bdcae4

And we don’t see any problems with the product page https://gyazo.com/e2aa40ed65243113d8c9746683b17a5e

Kind Regards
XTemos Studio

Thank you for your quick reply.

I turned it off and it works, but now it doesnt show the image from the variation page, just the generic color I chose when I created the attribute.

Attachments:

You must be logged in to view attached files.

Then, revert that option and put this code snippet to the functions.php file in the child theme

function woodmart_swatches_list( $attribute_name = false ) {}

Still have an issue with the variable products not showing on the image. It is only working for one of the products, not others. Also, how can i increase the size of the swatch thumbnail?

Attachments:

You must be logged in to view attached files.

It seems to happen because your images names has some spaces or special symbols https://gyazo.com/e231636976903ae3fdcb847d87a5de00
Try to use only Latin symbols and signs like - and _.

Great! It worked. Last question for now is, is it possible to enlarge the swatch preview on the product page?

Hello,

There is no option to enlarge the swatch and, to tell you the truth, there is no sense. You just need to configure your products properly and in the result, when potential buyer switches between variation the main image is changing, demonstrating the swatch in the product image, besides small previews can demonstrate all the variations.

Have a look at this sample https://woodmart.xtemos.com/shop/accessories/smart-watches-wood-edition/

In order to configure products refer to these instructions: https://xtemos.com/docs/woodmart/woocommerce-tutorials/variable-product/

Best Regards,

It does make sense when you have 30 different color variations of a product and the customer would more easily distinguish the different colors without having to click through all of them.

Something like this as an example:

https://www.loveknitting.com/millamia-naturally-soft-cotton

Hello,

Please try this CSS code to Theme Settings > Custom CSS:

.swatches-select .colored-swatch, .swatches-select .image-swatch {
width: 60px;
height: 60px;
border-radius: 50%;

}

If you want to increase/decrease the size change width and height values, but they should be the same.

Best Regards

Perfect, thank you for a very good theme and excellent support!

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

Best regards

[Author]

Posts