Want To Duplicate Product Variations With Its Price, Image, SKU and etc? Download This Free Plugin

Change Size of Color Attribute Swatch Only

Brooke Parker

Is there a way, maybe with some custom CSS, to change the size of the Color Attribute Swatch Only. I mostly use Color or Image, and for the Image attribute swatch I needed it a little larger. But it looks strange having it that large for the Color Swatch. I would like to change the Size on the Shop Page and Product Page. I do not believe there is a setting for this so if you have some Custom CSS it would be appreciated.

Please see what I mean:

Color Swatch on Product Page: https://www.screencast.com/t/HoeBu5fIbIv  (too large)
Image Swatch on Product Page: https://www.screencast.com/t/EEDooF6rr (good size)

Color Swatch on Shop Page: https://www.screencast.com/t/VOMkv2MnckM4 (too large)
Image Swatch on Product Page: https://www.screencast.com/t/CSz1pAfJy (good size)

Tanvirul Haque

Hi Brooke,

Could you add me here on Skype? My Skype ID is: shovon.haque2

Please add me and say hi. I am waiting for you there to quickly squash your issue.


Brooke Parker

I do not have Skype, and you are on a different time zone than me. So I would be asleep. Can you please provide assistance on this ticket. I had also provided login credentials if needed.

Tanvirul Haque

Hi Brooke,

Have you tried this option https://prnt.sc/11fqqo6 to make large size of a specific attribute?

If the option doesn’t help, please record me reproducing your issue using a tool like this? https://www.useloom.com It helps me to figure out the issue quickly and squash it immediately.

And don’t forget to add your site login details in the site login details area. I’ll check what’s happening there.

You can add new users by going to Users > Add New set the user and password for us, set the role to admin, and set the info here.

And add your site URL, login username, and password in the site login area. Follow this guideline: https://www.useloom.com/share/27c1f2ac633c4060b2da883d946107d7

Hope to hear from you soon!

Thank you

Brooke Parker

Using the Large Size Attribute Section will not work because some of our Products that use the “Color” Attribute we want displayed as a Color Swatch while others we want displayed as a Image Swatch. I want to change the Container Size of Color Swatch to be smaller than that of Image Swatch.

I sent you pictures via screen cast in the first ticket…did you view those?
The One labeled Too Large is using a Color Swatch, the One Labeled Good Size is using an Image Swatch. But they both use the Attribute of “Color” Don’t you have some type off CSS that can be used to change the Size of Color Swatches only? I need to change the Size of the Swatch Type not the Attribute Type. Attribute Type is Color on both of these, but the Swatch Type is different.

KG506 Bodywork Set…https://wordpress-548167-1777419.cloudwaysapps.com/product/kg-506-bodywork-set/
BackEnd Swatch Configuration: https://www.screencast.com/t/grld2P4M (video does have audio)

Sparco Neck Collar…. https://wordpress-548167-1777419.cloudwaysapps.com/product/sparco-neck-collar/
This one also uses the Attribute of Color but the Swatch Type of Image.

I provided you with Login details on the first submission of this ticket. I don’t understand why you keep  asking me to provide you with details that I provided you with on the original ticket.  I can see the credential that I provided  at the top of this chain??

I have to wait a full 24 hours for a reply because of out time zone difference, so please can you tell me if there is a solution for this. Most other Plugins that I deal with just give me a simple line of Code that I can insert.

Tanvirul Haque

Hello Brooke Parker,

We are sorry for the delayed reply. Please try with those codes and let me know is it working for you or not:

/* Change color type size */
.variable-item.color-variable-item:not(.radio-variable-item) {
width: 40px;
height: 40px;
/* Change image type size */
.variable-item.image-variable-item:not(.radio-variable-item) {
width: 50px;
height: 50px;

Is there anything else that I can help you with?


Tanvirul Haque

Hello Brooke Parker,

Where you have put those CSS codes? You have put those CSS codes into your Appearance Menu > Customize > Additional CSS