Return to previous page

Change the size of the variation swatches on shop

This topic has 4 replies, 2 voices, and was last updated 2 years, 2 months ago ago by Olga Barlow

Jennifer

Participant

January 25, 2022 at 15:39

Hi there,

I looking for a way to making the squares of the variation swatches smaller on shop page.
If its possible, make smaller only on mobile version.

I found this topic, but it seems to only being for single product page.
https://www.8theme.com/topic/change-the-size-of-variation-swatches-skins-attribute/

regards,

#315176 Copied Theme version: 8.0.11

3 Answers

Olga Barlow

Support staff

January 25, 2022 at 17:12

Hello,

At this moment it’s 18px x 16px https://prnt.sc/26j6bkx Are you sure that you want to make it smaller? What size do you want for the mobile version for the variation swatches?

Regards

#315192 Copied

Jennifer

Participant

January 25, 2022 at 22:30

Hi Olga,

thank you for your reply.
I think a height of 14px would be okey.
Something like 16px x 14px?

Thanks in advance,
Jenn

#315211 Copied
Olga Barlow

Support staff

January 26, 2022 at 12:42
Hello,

Add the below code to Theme Options > Custom CSS
```
@media only screen and (max-width:992px){
    ul.st-swatch-size-normal li.type-label {
        min-width: 16px;
        max-width: 16px;
    }
    ul.st-swatch-size-normal li.type-label a, ul.st-swatch-size-normal li.type-label span {
        font-size: 8px;
        padding: 3px;
    }
    ul.st-swatch-size-normal li.type-color {
        width: 16px;
        height:16px;
    }
}
```
Regards
#315249 Copied
Tagged: change, size, swatches, templates, variation, woocommerce, wordpress
Viewing 4 results - 1 through 4 (of 4 total)

The issue related to '‘Change the size of the variation swatches on shop’' has been successfully resolved, and the topic is now closed for further responses

Change the size of the variation swatches on shop

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection