Return to previous page

Resize variation swatchs size (they are too small)

This topic has 12 replies, 4 voices, and was last updated 2 years, 5 months ago ago by Awais Ahmed

Diollo Store

Participant

May 18, 2022 at 12:55

hello, how to resize the color swatches size ?
on mobile-tablet-desktop ?

site url :
diollo.store

#324136 Copied Theme version: 8.1.5

11 Answers
Rose Tyler

Support staff

May 18, 2022 at 13:11
Hello,

Add this code in Theme Options > Theme custom CSS > Global:
```
.single-product ul.st-swatch-size-large li.type-image {
    width: 60px;
    height: 60px;
}
```
Regards
#324137 Copied
Diollo Store

Participant

May 18, 2022 at 14:03

worked only for the image field, i want to all the swatches to be resized

#324144 Copied
Rose Tyler

Support staff

May 18, 2022 at 14:08
Ok, change the code to:
```
.single-product ul.st-swatch-size-large li {
    width: 60px;
    height: 60px;
}
```
Regards
#324145 Copied
Diollo Store

Participant

May 18, 2022 at 14:34

worked nicely
how i can do it in the shop page the little ones under the title ?

also how to make inline (not above each other) in single product

#324151 Copied
Rose Tyler

Support staff

May 19, 2022 at 07:22
Hello,
```
ul.st-swatch-size-normal li {
    width: 25px !important;
    height: 25px !important;
}
```
```
.single-product .et_product-block table.variations tr {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 15px;
}
```
Regards
#324192 Copied
bagshaw50

Participant

July 5, 2022 at 00:14

Hi I have applied this code but it has not increased the text within the variation box, and it is not centre aligned. can you please tell me the code to increase the text and centre align it in the box? Please see website below

#328694 Copied
Awais Ahmed

Participant

July 5, 2022 at 05:11
Hello, @bagshaw50,

Please copy and paste the below-given CSS code to XStore >> Theme Settings >> Theme Custom CSS and under Global Custom CSS if you want to apply it on all the versions of the site like Desktop, Mobile, or Tablet.

And if you want to apply it only on Mobile then paste it under Mobile Custom CSS.

You can change the Font Size in the below given code as per your requirements.
```
ul.st-swatch-size-normal li.type-label span {
    font-size: 30px !important;
}
```
https://postimg.cc/CRB3CZ0x

Regards 8Themes Team.
#328701 Copied
bagshaw50

Participant

July 6, 2022 at 21:19

any idea why the code isnt working

https://empowerclothing.co.uk/product/the-nakd-scrunch-collection-scrunch-bum-gym-leggings-in-baby-blue/

its creating a bigger white space instead of increasing the variation size

#329073 Copied
Awais Ahmed

Participant

July 7, 2022 at 05:10
Hello, @bagshaw50,

The Code I gave you was for the Shop/Category pages as I also showed in the provided screenshot as well, but now you want to increase the size on the single product page, so you have to try with the below given Code.
```
ul.st-swatch-size-large li.type-label span {
    font-size: 25px !important;
    padding: 5px !important;
}
```
https://postimg.cc/ctB36S7m

Regards 8Themes Team.
#329081 Copied
bagshaw50

Participant

July 7, 2022 at 21:16

perfect thanks

#329139 Copied

Awais Ahmed

Participant

July 8, 2022 at 05:51

If you do not mind, can you please leave a 5 stars rating for our Theme & Customer and Technical Support by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in the future. It would encourage our work a lot. If you like our Theme and Support.

Thanks for contacting us.
Have a great day?

Topic Closed.

#329159 Copied
Tagged: resize, size, small, swatch, templates, variation, woocommerce, wordpress
Viewing 12 results - 1 through 12 (of 12 total)