Topic: resize variation swatchs size (they are too small)

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

Ok, change the code to:

.single-product ul.st-swatch-size-large li {
    width: 60px;
    height: 60px;
}

Regards

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

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.

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.

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.