problem swatches woo commerce bloc variation products + Infos LAYOUTS

Hello, I have a problem. If you can help me, I’ve configured the default WooCommerce settings so that the “Size” attribute is selected by default for the “Color” attribute. Therefore, when I use this on the “Add to Cart” block, the data synchronizes correctly when I click on the color, and the image of the associated color variation displays correctly. However, in the “Product Variation” block—which is used to display the variations—the default WooCommerce settings for size and color are not working. Please let me know if there is a solution to this. Thank you.

PS: You can log in with the credentials BELOW to see that on the single product page, there are three “Add to Cart” blocks. You’ll see that the first image changes on the other blocks at the bottom labeled “Products,” which contain “Product Variations” blocks derived from “Layout Loop Element.” It doesn’t work there. Try it with the product: Floral Sunglasses (the “swatches” attribute is already configured in the “Add to Cart” block). Thank you.

And there’s also a second problem, something I don’t understand. Regarding the product archive layout, I have a design that resembles the store page, and I think—though I’m not certain—that subcategories like “accessories” have the same layout. The problem is that they don’t have the same layout for the header at the top and the cards. Therefore, I don’t understand where to edit the subcategories in the menu (featured, accessories, clothing, etc.) (see photos). Please explain where I can change this layout that affects all these category pages, and is it possible to edit each of these category pages individually so that they are different from the store page, given that there is only one archive layout for them? Thank you.

PS ; PICTURES OF THE SECOND PROBLEM

Attachments:

You must be logged in to view attached files.

Hello,

01. Could you please elaborate on your concern more with some useful screenshots so that we can better understand and reproduce this on your site and assist you accordingly with what you actually want?

02. The reason all your category pages (Featured, Accessories, Clothing, etc.) have the same layout is that they are using the same custom Products Archive Layout (Fashion-2).
https://postimg.cc/dhkVnC1G

This layout is applied globally to all product archives, which includes the Shop page, Product categories and Subcategories.

Different layout for specific categories

Yes, it is possible. You can create a new archive layout and assign it to specific categories using conditions:
Create a new layout and Set condition > Product Term and select category.

See Screenshot for better understanding: https://postimg.cc/mzGkPrT6

This way, you can have different designs for different category pages.

Further, you can read more about the Layout Builder here: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Best Regards

Hello, you can see in these images the difference between the two scenarios: when I click on the variant with the “color” attribute (white) inside an “Add to Cart” block, the image for variant “2” is displayed (see image 1): everything is normal in this case. However, when I click on the variant in the second “products” block that uses a “product variants” block for the ‘white’ color (see image 2), the image for the “color” attribute (white) does not appear, unlike in case 1. Can you explain why this block isn’t syncing the information from WooCommerce? Thank you for your response.

Attachments:

You must be logged in to view attached files.

AND I HAVE A SECOND GLITCH AS WELL—SYNCHRONIZATION ISN’T WORKING IN THESE TWO PLACES EITHER (THE “ADD TO CART” BLOCK AND THE “PRODUCT VARIATION” BLOCK) WHETHER THEY ARE LOADED FROM A “LOOP ITEM” LAYOUT OR FROM CARTS CALLED FROM THE “PRODUCTS” BLOCK—SAME PROBLEM, AS SEEN ON MY PRODUCT PAGE ON THE SITE). The problem is: as you can see in photo 1, I enabled the Woodmart option to remove duplicate prices so that it would take effect on “Add to Cart” (see photo 2) and also “Product Variations.” However, on the “Product Variations” block, it doesn’t sync—the duplicate price doesn’t disappear there. Then there’s an even bigger bug. When I click on a variation of a product using a “product variation” block (see photo 3), the “add to cart” block displays the duplicate price (see photo 4). Please let me know why.

Attachments:

You must be logged in to view attached files.

And one last synchronization issue with these same blocks: the default WooCommerce settings, which are set to “Use default variations for each color.” This works on the “Add to Cart” block (see Photo 1). However, on the “Variation Products” block and the “Products” blocks, these default settings do not apply (see Ph

Attachments:

You must be logged in to view attached files.

Hello,

01. I have checked your site and clicked on the variations and the image is changing fine.

See Screenshot for clarification: https://postimg.cc/z37R98XF

02. I have checked your site and tested the variation selection and the variation switch and price update are working correctly, and the “Add to Cart” block is syncing as expected when selecting different variations.

See Screenshot for clarification: https://postimg.cc/r0c7RS4q

Best Regards

Yes, of course, when you click on it, but the default setting that keeps the selection on the first variation without having to click—which works on “Add to Cart”—doesn’t apply to the other blocks. So you have to click and choose a “size” for it to apply, whereas above, the WooCommerce setting applies, which avoids having to click every time and creates an automatic preselection for the customer with this setting. Please let me know if this is configurable?

Translated with DeepL.com (free version)

Hello,

The default variation preselection (auto-select first variation) is applied in the standard Add to Cart block, but it is not supported in other elements like the “Products” block with “Product Variations”.

In those blocks, WooCommerce requires a manual selection before updating the image and price. Unfortunately, there is no built-in option to enable automatic preselection for those blocks.

Best Regards

Hello, okay, but I wanted to ask about the two product blocks I added: one uses a preconfigured layout with color swatches, and the other block, located just above it, is also a product block but uses a custom layout with an item loop that incorporates a “product variations block.” And I wanted to know if the “product block” with the preconfigured layout also uses a “product variation block” inside it to display and synchronize the WooCommerce information?

Translated with DeepL.com (free version)

And a second issue with these swatches: I wanted to know if there’s an option to display exactly the selected swatch (color swatch + its selected photo) that links to the page showing the product once the “color” swatch and its photo have been selected in the Products block. Because currently, it always displays the first swatch when you select a “color” swatch and then click on the assigned photo on the following “single product” page.

Hello,

Could you please elaborate on your concern more with some useful screenshots so that we can better understand and reproduce this on your site and assist you accordingly with what you actually want?

Best Regards

Please take a look at photos 1 and 2 that I’m sending you you so you can understand

Attachments:

You must be logged in to view attached files.

picture 2

Attachments:

You must be logged in to view attached files.

Hello,

WoodMart (and WooCommerce) do not automatically sync selected variations between archive/grid and single product page.

So what you’re expecting: “Keep selected swatch when navigating to product page”. This is not supported by default.

Best Regards

[Author]

Posts