Product swatch – catalog and product page

Hello.

Please help me solve the problem:

1) If a variation of a product has a designated image, it displays correctly in the catalog. However, on the product page, the color set in the attribute settings is displayed instead. I would like the image to take precedence if it exists, and only if there is no image, should the color (or the image from the attribute settings) be used.

2) Another problem is that if no color or image is assigned in the attribute settings, a text swatch is used instead.

If this issue cannot be resolved, could you please tell me where the code responsible for “image swatch” and “color swatch” is located?

I want to write functionality so that when an attribute is created, a default image or color is automatically set.

Thanks
Best Regards

Attachments:

You must be logged in to view attached files.

Hello,

1. Edit that color and set the “Text swatch” option, clear the cache and check how it works on the product page. https://prnt.sc/vLePJh5ChPvu

2. The code is situated here – woocommerce/single-product/add-to-cart/variable.php

Kind Regards

Hello,

1) Nothing has changed; everything remains the same.

2) Thanks

Best Regards

1. Send me the URL link to that product and send access to the admin panel so I can check the settings.

Kind Regards

+ info

Best Regards

Hello,

1. After disabling the Color Swatch – https://prnt.sc/xlk028XzSlPQ the image started to appear – https://prnt.sc/XGyQknLEVIQn

Let me know if you have any questions.

Kind Regards

Hello,

Thank you for your reply. But this does not work in reverse if a photo is not assigned, even if “Text Swatch” is enabled or even disabled.

In the catalog, the text of the attribute name is displayed, while on the product page everything works fine, and the photo with “Image Swatch” is displayed. Please take a look at the photos for better understanding.

Thanks
Best Regards

Attachments:

You must be logged in to view attached files.

Hello,

Sorry for the delay.

Enable those attributes as “Grid attribute swatches to display” – https://prnt.sc/RGKXkPtTsZFf , then the image should shown in both places.

Check our article about variation swatches – https://xtemos.com/docs-topic/variable-products-and-swatches/

Kind Regards

Hello,

But I will have about 100 such attributes, could you please advise how to solve this problem?

Thanks
Best Regards

Hello,

You just need to have the same configuration in each variation swatch, some of your variations are not configured and in some cases, they can inherit some “swatches” settings but they will not work in the same way in all places because they don’t have the same configuration.

Looking forward to hearing back from you!

Kind Regards

Hello,

Your swatches logic is incomplete. Some variations might not have images (which causes issues), some variations might have multiple images (which also causes issues), and if you don’t assign any image or color to a variation, it doesn’t work properly. In the catalog, one variation’s image might be displayed, while a different one is shown on the product page. Adding two variations to the catalog page is not possible (I don’t understand what the limitation is).

For example, if you filter by color, product variations with that color are not switching on the catalog page. I still cannot fully understand the logic of how swatches work.

What do you mean by “the same configuration setup”? Different products have different attributes: for some, there are product images; for others, colors are defined in the attribute settings, and sometimes text is used. When there are many products with different variations and attributes, where some variations may have multiple images, or where you need to show several options, and a product might have 100–200 variations, and if one of several attributes with 100–1,000 variations doesn’t have a color or image assigned (even though a product image is used instead of an attribute image), it doesn’t work properly. Managing variations turns into a nightmare.

Could you please help solve these issues:

1) Use product images in swatches if the “text swatch” option is not enabled in the attribute settings and no color or image is assigned.

2)Allow uploading more than one image for a variation (and ensure switching between variations works correctly in this case).

3)Ensure the same variations are displayed in the catalog and on the product page.

4)Allow selecting multiple attributes to display in the catalog, not just one.

5) If a product has multiple selected attributes, use the one that is higher in the hierarchy by default (if no specific attribute is set in the product settings), or use attribute settings to determine this. Otherwise, if no attribute is selected for swatches in the catalog, it works incorrectly (this complicates filling in product data both through the admin panel and CSV import).

6) Select which images to use in swatches: from attribute settings or product images. ( At least for each attribute.)

Thanks
Best Regards

Hello,

I apologize for the delay.

1, 5, 6. Sorry, for now, it works in such a way, you can leave a future request here – https://woodmart.canny.io/feature-requests so our developers can consider it.

2. Use the “Additional variations images” option in Theme Settings -> Shop -> Variable products to upload more images for the variation – https://prnt.sc/wbVBCjckKYyU

3. Enable those attributes as “Grid attribute swatches to display” – https://prnt.sc/RGKXkPtTsZFf , then the image should shown in both places.

4. Try to use the code below to show more than 1 variations on the archive:

add_action( 'woodmart_variation_attributes_on_grid', function ( $count ) {
	global $product;

	return count( $product->get_variation_attributes() );
});

Kind Regards

Hello,

Thank you very much for your response. Thank you for your help; I hope that by assisting me, you are also solving problems your clients have encountered before and will encounter in the future, and that you will have more satisfied clients.

2) If I add only two photos to one variation, everything breaks. If I select a variation with two additional photos on the product page and then switch to a variation that has only one photo, it will show the selected photo plus the photos from the variation that had two photos. I understand if this were a rare case, but in reality, a variation might have 0, 1, 2, 3, or 4 photos—or even more. Additionally, if a variation has more than one photo, the main product photos are not displayed. The way photos work with variations is illogical and a significant issue.

3) The problem is that there are a lot of attributes, but I can only select one. I could try using “setting presets,” but that would be a headache when filtering specific products in “setting presets,” and I’m afraid it would cause optimization problems.

4) I added the code to functions.php, but it didn’t change anything.

Thanks
Best Regards

Hello,

2. Could you please send me the URL to that product so I can investigate that?

3. I have contacted the developer’s team and as soon as I receive an answer, I will let you know whether it’s possible to make it via custom code or not.

4. Add the below CSS to Theme Settings -> Custom CSS:

body .wd-quick-shop-2:not(.wd-form-inited) tr:not(:first-child) :is(.wd-swatches-grid) {
    display: inline-flex;
}

You should have then such a result: https://prnt.sc/7NZxSxJD5K94

Kind Regards

Hello,

Did you change anything in the code or theme settings? Just by disabling the code and turning off the CSS code for testing, the logic of the “swatches” attributes in the catalog changed for me. If you did, please inform me where and what you changed.

The PHP code should display the remaining “swatches” that are not set in the product settings, and the logic was supposed to remain the same, but it is changing.

PHP:

add_action( ‘woodmart_variation_attributes_on_grid’, function ( $count ) {
global $product;

return count( $product->get_variation_attributes() );
});

CSS:

body .wd-quick-shop-2:not(.wd-form-inited) tr:not(:first-child) :is(.wd-swatches-grid) {
display: inline-flex;
}

Thanks
Best Regards

Hello,

Sorry for the delay.

Sorry, but we didn’t touch anything on your website.

That PHP code displays the same variations that you have on the product page – https://prnt.sc/7NZxSxJD5K94

Update the old CSS code to the below one :

body .wd-quick-shop-2:not(.wd-form-inited) tr:not(:first-child) :is(.wd-swatches-grid),
body .wd-quick-shop-2:not(.wd-form-inited) tr:not(:first-child) :is(select,.wd-swatches-grid) {
    display: inline-flex;
}

Then it should show variations that is from dropdown as well – https://prnt.sc/oVNs-yB_kCca

Kind Regards

Hello.

Could you please help me? I wanted to disable the PHP and CSS code you recommended, so I commented it out, but it still works. Please review the previous messages in this thread for better understanding. I am not using any caching plugins, and I have cleared my browser cache.

But with the code enabled, the swatches on the catalog page are displayed correctly—they are taken from the variant images of the configurable product rather than from the attribute settings.

Please help me figure out this issue.

code:
add_action( ‘woodmart_variation_attributes_on_grid’, function ( $count ) {
global $product;

return count( $product->get_variation_attributes() );
});

body .wd-quick-shop-2:not(.wd-form-inited) tr:not(:first-child) :is(.wd-swatches-grid),
body .wd-quick-shop-2:not(.wd-form-inited) tr:not(:first-child) :is(select,.wd-swatches-grid) {
display: inline-flex;
}

Thanks
Best Regards

Attachments:

You must be logged in to view attached files.

[Luke Nielsen]

Hello,

I apologize for the delay.

Did you try to clear the server cache as well? A lot of servers enable the cache by default.

Looking forward to collaborating with you!

Kind Regards

• This reply was modified 4 hours, 34 minutes ago by Luke Nielsen.
• This reply was modified 4 hours, 33 minutes ago by Luke Nielsen.
• This reply was modified 4 hours, 33 minutes ago by Luke Nielsen.

Hello.

Yes, I tried to clear the cache, but it didn’t help.
Moreover, I am using a VPS server.

Thanks
Best Regards

[Author]

Posts