Custom Swatch Design

Hello,

All the available styles and functionalities with the Swatch are described in the documentation here: https://xtemos.com/docs-topic/variable-products-and-swatches/. Please read and follow i,t and choose the one that better suits your requirements.

Best Regards,

Hello,

Navigate to Products > Attributes > Edit Attribute and change the available swatches style: https://ibb.co/VrWrmzw

Best Regards,

Hello,

Navigate to Products > Attributes > Edit attribute and change the swatch size.

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

Best Regards,

Hello,

Can you please share the page URL so I can check and give you custom CSS code?

Best Regards,

Hello,

Try to add the following CSS in Theme Settings > Custom CSS

.wd-swatches-product .wd-swatch {
    width: 120px;   /* adjust width as needed */
    height: 30px;  /* adjust height as needed */
    border-radius: 15px; /* make it rounded */
}

Best Regards,

Hello,

From Products > Attributes > Swatch style (Underline, Border, Tick mark, etc.) only controls how the selected state is highlighted. They do not provide any control over the width, height, or ratio of the text swatch.

If you want to change the swatch dimensions or have different sizing/shape for default and selected states, this is not available via theme options and must be done using custom CSS.

So in short:

• Swatch style options = selection effect only
• Size / height / width ratio = CSS customization only

Best Regards,