Hover effect on "add to cart" button

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.

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.

It works. thank you so much.

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

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