How to make changes to Add to Cart and Checkout button

This topic has 8 replies, 2 voices, and was last updated 7 years ago ago by Jack Richardson

  • Avatar: damonjones01
    damon
    Participant
    April 10, 2017 at 14:52

    Hi there,

    I would like to change the Add to Cart and Checkout Buttons to Black with white font.

    Please could you tell me how to this.

    And the code to insert.

    Many thanks

    7 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    April 10, 2017 at 16:19

    Hello,

    Add this css code in custom.css:

    .add-to-container .add_to_cart_button,
    .widget_shopping_cart_content .btn.button.right,
    .quick-view-popup .product-info .single_add_to_cart_button,
    .single-product-page .product-info .single_add_to_cart_button {
        background-color: black;
        color: white;
    }

    Regards,
    Jack Richardson.

    Avatar: damonjones01
    damon
    Participant
    April 12, 2017 at 17:08

    Hi Jack,

    Thank you so much for the code, I really appreciate it.

    The issue I am having is that although black with white fonts, it has a red outer layer. Can this be changed in theme options.

    Likewise please could you provide me with the code for changing:
    – Proceed to Checkout button
    – Place Order button

    I would like them both in Black with white fonts.

    Thanks again, your service is 5 star

    Avatar: damonjones01
    damon
    Participant
    April 12, 2017 at 17:19

    Sorry Jack,

    Please ignore my previous post

    Ive just figured out that by changing the colour in the theme options. it changes the colour for all the buttons to black.

    The issue i have now is that my main navigation menu is black with white font.

    When i hover over the menu items they now become invisible as the the background is also black.

    Is there code just to change the main navigation labels to become red, when hovering over them?

    Thanks again

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    April 13, 2017 at 08:33

    Hello,

    Add this css code:

    .main-nav .menu > li > a:hover {
    color: red;
    }

    Regards,
    Jack Richardson.

    Avatar: damonjones01
    damon
    Participant
    April 13, 2017 at 14:24

    Hi Jack,

    Sorry entered the code in custom CSS and doesnt seem to work.
    Ive previoulsy changed the main colour in Theme options to black to enable all buttons such as checkout, add to cart to be black.

    Could this be what is causing issues. a conflicting issue?

    i’d be happy to give you my wordpress login details to have a look.

    Avatar: damonjones01
    damon
    Participant
    April 13, 2017 at 14:30

    details

    Please, contact administrator
    for this information.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    April 14, 2017 at 09:31

    Hello,

    Please clear your browser cache and check the menu now.

    Regards,
    Jack Richardson.

  • Viewing 8 results - 1 through 8 (of 8 total)

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

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