Product variations are not easy from a UX perspective.

Our products often have many variations. These variations cause the “add to cart” button to appear incorrectly in mobile view. On single product pages, it appears as a list. I want the variations to appear as boxed options on single product pages.

I’ve included an example site in the screenshot. It would be much more user-friendly if it looked like that, as we’re constantly receiving complaints about the difficulty of use.

If we use “On variation click” on the store page, the product display is distorted. Using “On select options click” also reduces functionality. How can I solve this?

Attachments:

You must be logged in to view attached files.

Hello,

Navigate to Products > Attributes > Edit your attribute and click Configure terms and enable any swatch type. In this case, the variations will show in the list view according to the reference site that you have sent.

You can read more here https://xtemos.com/docs-topic/variable-products-and-swatches/ and https://xtemos.com/docs-topic/attribute-swatches/

Best Regards,

The option you described and that is shown in the document does not exist. The mobile issue has also not been resolved.

Attachments:

You must be logged in to view attached files.

Hello,

01. Please note that the swatch type option is available inside the attribute terms, not in the main attribute settings.

Kindly follow these steps:

Navigate to Products > Attributes
Click Configure terms next to your attribute
Edit one of the terms
There, you will find the option to select the Swatch type.

See Screenshots for a better understanding:
https://postimg.cc/jDTZDG0P
https://postimg.cc/sMK9vxJZ

02. Regarding the add to cart button in mobile, Try to add the following custom css code in Theme Settings > Custom CSS > Custom CSS for mobile.

.single_variation_wrap .woocommerce-variation-availability {
    font-size: 10px !important;
}
.single_variation_wrap .woocommerce-variation-price {
    font-size: 10px !important;
}
.single_variation_wrap .quick-shop-wrapper .single_add_to_cart_button {
    margin: -8px !important;
}
.quick-shop-wrapper .single_add_to_cart_button:before {
	font-size: 16px !important;
}
.quick-shop-wrapper select {
    height: 30px !important;
}
.single_variation_wrap .single_add_to_cart_button:before {
    top: -15px !important;
}

Best Regards,

[Author]

Posts