To change the button style "add to cart"

11 replies5 participantsUpdated by Eva Kemp

  • Avatar: vsehmogushiy
    vsehmogushiy
    Participant

    Hello, please tell me how to make buttons in the catalog and on the slider (add to cart) the same button on the item card. The screenshot https://yadi.sk/i/wviZsKF-g9NSn attached.

    11 Answers

    Avatar: stan
    Stan Russell
    Participant

    Hello,

    please specify: do you want to have same ‘Add to cart’ button style for product category pages and single product pages?

    Regards,
    Stan Russell.

    Avatar: vsehmogushiy
    vsehmogushiy
    Participant

    Yes!

    Avatar: Robert Hall
    Robert Hall
    Participant

    Hello,

    Please add this code in custom.css file

    .etheme_add_to_cart_button{
    color:#fff;
    }

    Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

    Regards,
    Robert Hall.

    Avatar: vsehmogushiy
    vsehmogushiy
    Participant

    Thanks, but not quite! The inscription itself “add to cart” when you hover poured the green button, but there is just stressed. How to do that? Preferably all the buttons to do so! https://yadi.sk/i/LUc4CmlogBwNE

    Avatar: Brian Johnson
    Brian Johnson
    Member

    Hello

    You may try this code:

    .cart button{
    color:white!important;
    }
    .cart button:hover{
    color:transparent!important;  -moz-transform:    scale(1.1);
         -o-transform:      scale(1.1);
         -webkit-transform: scale(1.1);
         transform:         scale(1.1);
    }

    With best regards
    Brian Johnson

    Avatar: Robert Hall
    Robert Hall
    Participant

    Hello,

    Also please add following code in custom.css file

    .etheme_add_to_cart_button:hover{
    color:#fff;
    text-decoration: underline;
    }

    Regards,
    Robert Hall.

    Avatar: stan
    Stan Russell
    Participant

    Hello,
    please add following code to yours ‘custom.css’ file:

    .etheme_add_to_cart_button:hover {
    color:white; text-decoration:underline
    }

    Regards,
    Stan Russell.

    Avatar: vsehmogushiy
    vsehmogushiy
    Participant

    When you add these codes began to merge button on the item card, and the problem has not disappeared as it was and remained…

    Avatar: Eva
    Eva Kemp
    Participant

    Hello,

    Please try this one:

    .etheme_add_to_cart_button:hover{
    color: #fff !important;
    text-decoration: underline !important;
    }

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: vsehmogushiy
    vsehmogushiy
    Participant

    Thank you with the goods issue resolved! But with the usual buttons for search and sorting the prices, nothing has changed., please write the code for them!

    Avatar: Eva
    Eva Kemp
    Participant

    Hello,

    Please use this code:

    input[type="submit"]:hover, .woocommerce.widget_price_filter .price_slider_amount .button:hover, .woocommerce-page .widget_price_filter .price_slider_amount .button:hover {
       color: #fff !important;
       text-decoration: underline !important;
    }

    Thank you.
    Regards,
    Eva Kemp.

Want to reply? Log in, or register with your ThemeForest purchase code, to reply to this topic.

Login / Register