Return to previous page

Custom sizes for variable product attribute swatches

This topic has 2 replies, 2 voices, and was last updated 3 years, 4 months ago ago by Rose Tyler

Srinivasan

Participant

August 5, 2021 at 07:59

my website is for chairs and we have various attributes which are for the variable products. I would like to keep the colour of the chair the same as the current size and define custom size for the attributes such as a headrest, armrest and footrest.

I have an example here below:

https://ibb.co/Wgk2zMT

here you can see that the colour swatches are square and smaller in size and the other attributes such as headrest and wheels are rectangular and larger.

if I make adjustments to the current CSS then all the sizes are being changed. is there another solution to this?

#297796 Copied Theme version: 8.0.3 WooCommerce version: 5.5.2

1 Answer
Rose Tyler

Support staff

August 5, 2021 at 08:13
Hello,

Try to add the next code in Theme Options > Theme custom CSS:
```
.single-product ul.st-swatch-shape-square li.type-image {
    width: 70px;
    height: 70px;
}
```
Regards
#297797 Copied
Viewing 2 results - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.Log in/Sign up

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder

Ecoenergy – WordPress WooCommerce Theme

lazy-placeholder

Home Decor Store – WordPress WooCommerce Theme

lazy-placeholder

Animals Store – WordPress WooCommerce Theme

lazy-placeholder

SEO Agency – WordPress WooCommerce Theme

lazy-placeholder

Home Decor 02 Store – WordPress WooCommerce Theme

lazy-placeholder

Luxury Jewelry Store – WordPress WooCommerce Theme

lazy-placeholder

Car Parts Store – WordPress WooCommerce Theme

lazy-placeholder

Artmaxy Store – WordPress WooCommerce Theme

lazy-placeholder

Underwear Store – WordPress WooCommerce Theme

lazy-placeholder

Designers – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.