Home › Forums › WoodMart support forum › Hover effect on "add to cart" button

Hover effect on "add to cart" button

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 17, 2021 at 6:26 pm #259182

    sidatun
    Participant

    When I hover “add to cart” button, it shows cart image.
    how can i change hover effect that keeps the same text as “add to cart” and change color?

    Attachments:
    You must be logged in to view attached files.
    January 18, 2021 at 7:47 am #259257

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

    .product-grid-item .woodmart-add-btn>a:focus span:not(.woodmart-tooltip-label), .product-grid-item .woodmart-add-btn>a:hover span:not(.woodmart-tooltip-label), .woodmart-hover-base:not(.product-in-carousel):not(.hover-width-small):not(.add-small-button) .woodmart-add-btn>a:focus span:not(.woodmart-tooltip-label), .woodmart-hover-base:not(.product-in-carousel):not(.hover-width-small):not(.add-small-button) .woodmart-add-btn>a:hover span:not(.woodmart-tooltip-label), .woodmart-hover-button .hover-mask>a:focus span:not(.woodmart-tooltip-label), .woodmart-hover-button .hover-mask>a:hover span:not(.woodmart-tooltip-label), .woodmart-hover-info-alt .product-actions>a:focus span:not(.woodmart-tooltip-label), .woodmart-hover-info-alt .product-actions>a:hover span:not(.woodmart-tooltip-label), .woodmart-hover-quick .woodmart-add-btn>a:focus span:not(.woodmart-tooltip-label), .woodmart-hover-quick .woodmart-add-btn>a:hover span:not(.woodmart-tooltip-label), .woodmart-hover-standard .btn-add>a:focus span:not(.woodmart-tooltip-label), .woodmart-hover-standard .btn-add>a:hover span:not(.woodmart-tooltip-label), .woodmart-price-table .woodmart-plan-footer .add-to-cart-loop:focus span:not(.woodmart-tooltip-label), .woodmart-price-table .woodmart-plan-footer .add-to-cart-loop:hover span:not(.woodmart-tooltip-label) {
    transform: none!important;
}
.product-grid-item .woodmart-add-btn>a:before, .woodmart-hover-base:not(.product-in-carousel):not(.hover-width-small):not(.add-small-button) .woodmart-add-btn>a:before, .woodmart-hover-button .hover-mask>a:before, .woodmart-hover-info-alt .product-actions>a:before, .woodmart-hover-quick .woodmart-add-btn>a:before, .woodmart-hover-standard .btn-add>a:before, .woodmart-price-table .woodmart-plan-footer .add-to-cart-loop:before {
    content: none!important;
}

    And for the color try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

    .woocommerce .product .add_to_cart_button.button:hover {
    background: aqua;
    color: white;
}

    Best Regards.

    January 18, 2021 at 1:58 pm #259388

    sidatun
    Participant

    It works. thank you so much.

    January 18, 2021 at 2:23 pm #259393

    sidatun
    Participant

    how can i change color of loading and background after I click add to cart?

    January 19, 2021 at 6:34 am #259574

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    You are Most Welcome.

    Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

    .wd-add-btn-replace .add-to-cart-loop:after  {
    border-color: red;
    border-left-color: #000;
}

.wd-add-btn-replace .add-to-cart-loop span {
background: red;
}

    Best Regards.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)