Remove ‘Add to Cart’ on hover.

[barry.osullivan47]

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

• This topic was modified 7 months ago by barry.osullivan47.

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

Here are the details

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!

[Author]

Posts