Custom Swatch Design

https://ibb.co/Q3kD9068
We want to design our Swatch watch to look like the one shown below. How can we do that?
https://ibb.co/7tm3HZqM

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,

The video shows that you can set the size to Text Swatch, but it doesn’t explain how to adjust the Text Swatch size. The effect shown is different from the screenshot I sent you. The screenshot I sent you shows a rectangular Text Swatch with a background color.

Hello,

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

Best Regards,

What I mean is that the length and height of the Swatch can be customized. Your Text Swatch has a default size and cannot be adjusted. For example, I want to adjust the width of the S-shaped Text Swatch, but I don’t see the option to do so.

Hello,

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

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

Best Regards,

This option does not allow setting the height and length ratio.

Hello,

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

Best Regards,

https://ibb.co/rGsMTBTS
The image above shows the default Text Swatch effect in Woodmart, but the Text Swatch effect I want is shown in the image below.
https://ibb.co/6pPDfRR

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,

So, can the default effect and the selected effect also be set?

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,

[Author]

Posts