Return to previous page

I want to change the size of variation swatches

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

cofashion2022

Participant

June 9, 2022 at 08:18

I want to change the size of variation swatches (Size and color Attribute) to something large than what it is currently. If you could give me the relevant CSS code then I can adjust it.

#325455 Copied Theme version: 8.1.6 WooCommerce version: 6.5.1

7 Answers

Rose Tyler

Support staff

June 9, 2022 at 08:28

Hello,

For Shop or Single Product page?

Regards

#325457 Copied

cofashion2022

Participant

June 9, 2022 at 09:47

Shop page.
and is there a way to be able to represent the image instead of the color?
Here is an example:
https://drive.google.com/file/d/1lQiO7vnleTPHOuRtTYlMkAPYzdIoe72O/view?usp=sharing

#325469 Copied
Rose Tyler

Support staff

June 9, 2022 at 10:40
Hello,

Add the next code in Theme options > Theme custom CSS:
```
.content-product .st-swatch-popup>.et_st-default-holder ul.st-swatch-size-normal li {
    width: 24px !important;
    height: 24px !important;
}
.et_st-default-holder {
    margin-bottom: 10px;
}
.content-product .st-swatch-popup>.et_st-default-holder ul.st-swatch-size-normal li >span {
    padding: 6px !important;
    font-size: 11px !important;
}
```
you can select the Image type – https://prnt.sc/-l3cdgWZEecc

Regards
#325477 Copied
cofashion2022

Participant

June 10, 2022 at 00:12

I used this css to change price color and size, but the unit prices without promotion are still the same. Please give me CSS to change its color and size.
https://drive.google.com/file/d/1iKBzIvZJ_wLAHMintqZ60GBk7Wwl7bOu/view?usp=sharing
And the original price CSS on the single product page.
https://drive.google.com/file/d/1asZ0zt4OX1jBUgdjJ5fIrkrEGREnR2W7/view?usp=sharing

#325544 Copied

Rose Tyler

Support staff

June 10, 2022 at 08:25

Hello,

1/ Edit this custom CSS code https://prnt.sc/09Aon32uMh02
2/ Describe the desired result in more detail.

Regards

#325568 Copied

cofashion2022

Participant

June 10, 2022 at 10:34

I will describe it in more detail.
I used this CSS to highlight the promotional price area and the original price area.
https://drive.google.com/file/d/1_RrUIISSBX7ywOVfmXu_dKc-2pgmxM0f/view?usp=sharing

But when entering the CSS, the promotion area changes according to my wishes, but the original price area of the products without promotion does not change.
You can see the arrow direction in the image below. I want the CSS to be able to change their colors
https://drive.google.com/file/d/1-zO7EiHsxgl8z7VrTzLWb8paRxx21IWv/view?usp=sharing

#325585 Copied
Olga Barlow

Support staff

June 10, 2022 at 11:52
Hello,

Use the below code if you want to highlight both simple price and discount price
```
.content-product .price > .amount, .content-product .price ins span {
    color: #fcaf16;
}
```
Regards
#325606 Copied
Tagged: change, size, swatches, template, variation, woocommerce, wordpress
Viewing 8 results - 1 through 8 (of 8 total)