Return to previous page

How to edit a button for variable product on shop page?

This topic has 2 replies, 2 voices, and was last updated 6 years, 1 months ago ago by Rose Tyler

murmoon

Participant

March 7, 2018 at 07:47

Hi.
To edit “add to cart” button for simple product on shop page, I use this CSS:
.add_to_cart_button {
color: white;
background-color: green;
border-color: green;
border-radius: 4px 4px 4px 4px !important;

}

What CSS should I use to make button for variable product look same like add to cart button for sipmle procucts?

Please see screenshot:
https://www.dropbox.com/s/s6b0g3vpemrmyj3/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202018-03-07%2014.14.29.png?dl=0

#187445 Copied Theme version: 4.1.1 WooCommerce version: 3.3.3

1 Answer
Rose Tyler

Support staff

March 7, 2018 at 08:44
Hello,

You can add this code in custom css:
```
.btn.product_type_variable {
    color: white;
    background-color: green;
    border-color: green;
    border-radius: 4px 4px 4px 4px !important;
}
```
https://prnt.sc/iny1fd

Regards
#187460 Copied
Viewing 2 results - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.Log in/Sign up

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder

Customization service (hour)

lazy-placeholder

Ecoenergy – WordPress WooCommerce Theme

lazy-placeholder

Niche Market – Multivendor WP WooCommerce Theme

lazy-placeholder

Spice Store – WordPress WooCommerce Theme

lazy-placeholder

X-Phone Store – WordPress WooCommerce Theme

lazy-placeholder

Water Delivery – WordPress WooCommerce Theme

lazy-placeholder

WooPress – WooCommerce WordPress Theme

lazy-placeholder

Bike Store – WordPress WooCommerce Theme

lazy-placeholder

Real Estate – WordPress WooCommerce Theme

lazy-placeholder

Zoo Shop – WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.