Home › Forums › WoodMart support forum › Product variations are not easy from a UX perspective.

Product variations are not easy from a UX perspective.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 12, 2026 at 1:42 am #708251

    zngntr
    Participant

    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.
    February 12, 2026 at 1:41 pm #708350

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    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,

    February 13, 2026 at 3:06 am #708444

    zngntr
    Participant

    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.
    February 13, 2026 at 9:37 am #708460

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    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
Viewing 4 posts - 1 through 4 (of 4 total)