Return to previous page

Custom sizes for variable product attribute swatches

This topic has 2 replies, 2 voices, and was last updated 3 years, 3 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

Language Courses – WordPress WooCommerce Theme

lazy-placeholder

Photographer – WordPress WooCommerce Theme

lazy-placeholder

Minimal Fashion Store – WordPress WooCommerce Theme

lazy-placeholder

Cosmetics Store – WooCommerce Theme

lazy-placeholder

Kids Toys Store – WordPress WooCommerce Theme

lazy-placeholder

Designers – WordPress WooCommerce Theme

lazy-placeholder

Niche Market 02 – Multivendor WP WooCommerce Theme

lazy-placeholder

NFT Crypto Marketplace – WordPress WooCommerce Theme

lazy-placeholder

Ecoenergy – WordPress WooCommerce Theme

lazy-placeholder

Gym Store – 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.