Add to cart button Styling using custum CSS

Solved4 replies3 participantsUpdated by Eva Kemp

  • Avatar: Ali Akil
    Ali Akil
    Participant

    Hi, need to know the class of the add to cart button in home page, shop page and in single product page. I used the tool in chrome and it says .button. this class is for every button in the template. please hover and normal.

    thanks.

    4 Answers

    Avatar: Jack Richardson
    Jack Richardson
    Support staff

    Hello,

    If you want to change text color for “Add to Cart” button use this code:

    a.button.etheme_add_to_cart_button.product_type_simple {
      color: red;
    }
    a.button.etheme_add_to_cart_button.product_type_simple:hover {
      color: grey;
    }

    This is for home page and shop page.

    For single product page use this code:

    .single-product-page .product-info .single_add_to_cart_button {
      color: #fff;
    }
    .single-product-page .product-info .single_add_to_cart_button:hover {
      color: #000;
    }

    Best regards,
    Jack Richardson.

    Avatar: Ali Akil
    Ali Akil
    Participant

    What about the background color? thanks

    Avatar: Ali Akil
    Ali Akil
    Participant

    got it thanks 🙂

    Avatar: Eva
    Eva Kemp
    Participant

    Hello,

    You’re welcome.

    Regards,
    Eva Kemp.

The issue related to '‘Add to cart button Styling using custum CSS’' has been successfully resolved, and the topic is now closed for further responses