How to change button size in variant selector

[X-DREAM]

How do I change the button size in variant selector? and if possible to remove the character inside the button as well. thanks

www.x-dream.com.au

password:666

 

[yashgarg]

Hey @X-DREAM ,

You can change the button size by modifying the CSS for the respective selectors

Please follow the following steps

1) Go to your online store and select Themes from left panel

2) Press 3 dots menu in center (on the left of Customize button) and then Edit Code

3) Open the file product-options-radio.css (you can search for it)

4) Search for this .\#product-options-radio-item-input.\!sold-out+.\#product-options-radio-item-body

5) Here you can add new properties like width and height and tweak their values to get desired effect

Your final code should have 2 new entries like this 

This will change variant picker size like this (you can play with values of width and height)

Thanks

Yash Garg

[X-DREAM]

I don't want change the size of the pic inside the button, I want make the whole button smaller.

Thanks

[yashgarg]

In that case you can choose a smaller value of widht and height

[X-DREAM]

ok I see. 

so how about the name inside the button, can be removed??

[yashgarg · Accepted solution]

Add this to the css file, that should remove the name

.\#product-options-radio-item-media + .\#product-options-radio-item-value {

  display: none;

}

Thanks

Yash Garg

[X-DREAM]

It works perfect, the name been removed and button can change to smaller, but the picture inside the button is too small, if anyway can make the pic inside the button bigger? I tried the below code, it not working.

Thanks

[yashgarg]

Search for this .\#product-options-radio-item-media in that css file

You will see a single width property in that

Increase it as per requirement

[X-DREAM]

that can increase the whole button size like below. or is that anyway maybe I can use the picture replace the button?

Thanks