Remove ‘Add to Cart’ on hover.
-
Hello,
I would like to remove the ‘Add to Cart’ element when the user hovers over the price of a product in a product archive.
Can you please suggest a method or CSS element I can use to do this?
Thanks very much
Hello,
Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.
Best Regards
Hello,
Please add this code to the Theme Settings > Custom CSS > Global:
@media (min-width: 1025px){
.wd-hover-alt:not(.wd-variation-active) .swap-elements :is(.price,.wd-add-btn) {
display:none;
}
}
Best Regards
Thank you for that solution, however that hides the price too.
I would like to just display the price and not an ‘add to cart’ button.
Hello,
Please replace the code with this one:
.wd-hover-alt .wd-add-btn>a {
display:none;
}
If you have any questions please feel free to contact us.
Best Regards
Thanks.
However, that removes the price on hover.
I would like the price to stay, basically removing any hover function.
Thanks
Hello,
Please remove the previous code and leave this code only:
.wd-hover-alt .wd-add-btn>a {
display:none;
}
Best Regards
Hello,
Again that just removes the ‘Add to Cart’ link. So when a user hovers over the price, the price disappears, I would like the price to remain on hover.
Thanks
Hi,
Sorry for misunderstanding. Please replace all previous custom code with this one:
@media (min-width: 1025px) {
body .wd-hover-alt:not(.wd-variation-active):is(.purchasable,.product-type-grouped):hover .swap-elements {
transform: none;
}
}
body .wd-hover-alt .wd-add-btn {
display: none;
}
This code hides “add to cart” button and removes the price animation.
Kind Regards
Great, thanks very much!
That works as expected.
You are welcome!
Wish you a wonderful day!
The topic ‘Remove ‘Add to Cart’ on hover.’ is closed to new replies.
.
