Return to previous page

How to change "add to cart" background color in single products page and related

This topic has 9 replies, 2 voices, and was last updated 8 years, 6 months ago ago by Andrew Mitchell

  • Avatar: audi008
    audi008
    Participant
    August 9, 2016 at 03:07

    Hello,

    I am trying to change background color for “add to cart” button on single product page, plus related products button.

    I already added some codes, but did not see any change,
    I have already changed background color of button on shop page, but not sure why colors do not change on single product page?

    can u plz let me know where to insert the proper codes?

    thanks

    Steven

    #136044 Copied
    8 Answers
    Avatar: audi008
    audi008
    Participant
    August 9, 2016 at 07:31

    Hi again,

    I solved the some color change problems on related products and featured and latest products, however, I could not change the color for that big add to cart button on single product page, no matter what i tried.

    Just wondering if u know the proper codes for this button color change? and hover color..
    plus those small button, like review submit button, newsletter subscribe button… I dont know how to change these buttons color either.

    Hope to have ur reply soon

    thanks a lot

    Steven

    #136053 Copied
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    August 9, 2016 at 07:37

    Hello, we glad the you using your theme.

    To change background color for “add to cart” button on single product page you should add code like this in to your custom css.

    .single-product .cart .button{
	background-color: #f10;
}

    To change background color for related products button on single product page you should add code like this in to your custom css.

    .single-product .product-slider .slider .button {
    background-color: #b10db1;
}

    Regards,
    Andrew Mitchell

    #136056 Copied
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    August 9, 2016 at 07:58

    To change hover background color for “add to cart” button on single product page use this code.

    .single-product .cart .button:hover{
	background-color: #f10;
}
    #136061 Copied
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    August 9, 2016 at 08:36

    Use this code to change reviews and submit button

    .single-product .reviews_tab .submit,
.single-product .mc4wp-form-fields input[type="submit"]{
	background-color: #000;
}
    .single-product .reviews_tab .submit:hover,
.single-product .mc4wp-form-fields input[type="submit"]:hover{
	background-color: #f15;
}
    #136067 Copied
    Avatar: audi008
    audi008
    Participant
    August 9, 2016 at 09:03

    HI Thanks for quickly update

    All ur codes works, but only hover color of single product add to cart big button does not change.

    For another, submit button of newsletter form on home page does not change color either,
    no problem on single product page..

    Hope to see ur reply soon

    cheers

    Steven

    #136073 Copied
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    August 9, 2016 at 09:40

    Change code for single product add to cart big button on this code

    button.button.big.active:hover {
    background-color: red!important;
}

    And change previous code for reviews and submit button on this code

    .reviews_tab .submit, .mc4wp-form-fields input[type="submit"]{
	background-color: #000;
}
.reviews_tab .submit:hover, .mc4wp-form-fields input[type="submit"]:hover{
	background-color: #f15;
}

    Regards,
    Andrew Mitchell

    #136079 Copied
    Avatar: audi008
    audi008
    Participant
    August 9, 2016 at 11:33

    Thanks a lot for help

    Now all works

    thanks

    Steven

    #136108 Copied
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    August 9, 2016 at 12:14

    You are welcome.

    Regards,
    Andrew Mitchell

    #136114 Copied
  • Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘How to change "add to cart" background color in single products page and related’' has been successfully resolved, and the topic is now closed for further responses

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Corporate – WordPress Theme
lazy-placeholder
Electron Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Kids Store – WordPress WooCommerce Theme
lazy-placeholder
WooPress – WooCommerce WordPress Theme
lazy-placeholder
Agricultural Store – WordPress WooCommerce Theme
lazy-placeholder
Headphone Store – WordPress WooCommerce Theme
lazy-placeholder
Pub – WordPress Theme
lazy-placeholder
Business – WordPress WooCommerce Theme
lazy-placeholder
Minimal Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Typography – WordPress 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.