Change width of "select options" button woocommerce

[NateGio]

I am trying to adjust the width of the “select options” button on the products of my shop page. I changed the text from select options to select size. I would like to make the button less wide so it does not cover the entire width of the image, ideally just larger than the text inside. Is this possible?

[ruenel]

Hello Nathan,

Thanks for writing in!

Regretfully we do not have a setting that will reduce the width of the mentioned button. You need to add CSS code into X > Theme Options > CSS. You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

The button is using the following set of the class selectors: .woocommerce li.product .entry-header .button. Therefore to change the width of the button is to set a maximum width instead:

.woocommerce li.product .entry-header .button {
    max-width: 200px;
}

If you need to place the button at the center, you can just update the code and use this:

.woocommerce li.product .entry-header .button {
    max-width: 200px;
    left: 50%;
    margin-left: -100px;
}

Feel free to change the maximum width that is enough and suitable for your site.
Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

[NateGio]

The code worked perfectly, thank you for the CSS!

[ruenel]

You’re welcome!
It’s good to know that it has worked for you.

[NateGio]

I have another question about the same button. Is it possible to remove the check mark image in front of the text on the button?

[ruenel]

Hello Nathan,

The icon will vary depending on the product type. You will see a check icon if the product is variable and you will see the cart icon if the product is simple. If you want to disable the icons, you will need to use this code:

.woocommerce .button.product_type_simple:before, 
.woocommerce .button.single_add_to_cart_button:before,
.woocommerce .button.product_type_variable:before {
    display: none;
}

We would love to know if this has worked for you. Thank you.