Woocommerce: How to remove "add to cart" when hovering over product

Question

I would like some help removing the "Add to cart" text appearing over the product price on the product page of my WordPress website. (translated to "In winkelmand" on my page)

I have been looking all over, the options I found did not work and I am out of ideas.

Here is a screenshot of what is happening: https://snipboard.io/JrgcO2.jpg

URL: https://www.stormrotswallart.nl/winkel/

The yellow text appears when you hover over a product. It also appears on mobile when you select the product before it loads the product page.

Would someone please tell me how to disable this text from appearing? I have tried CSS (display: none) but that just makes the price disappear when you hover over the product.

Thanks in advance, I would really appreciate it!

Answer 1

Thank you @PetarVasilev for helping me in the right direction.I changed and added a few things, it's working like a charm now.

Eventually, what we did was:

• Move the "Add to cart" text and make it opaque (opacity: 0)
• Make the Price text not-opague (opacity: 1)
• Make the pointer stay default so it doesnt look as clickable
• Make the text tiny so people (almost) can't accidentally hover over it or click it
• Remove the margin below so there isn't a large empty area between each product (- Remove the margin also for small screens, it was set independantly)

CSS now looks as follows:

.woocommerce ul.products li.product:hover .price, .theme-block.shop .product:hover .price {
   opacity: 1 !important;
}

.woocommerce ul.products li.product .button.add_to_cart_button, .woocommerce ul.products li.product .button.product_type_simple {
   opacity: 0 !important;
   position: static !important;
   cursor: default;
   font-size: 0px;
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-bottom: 0rem;
}

@media (max-width: 768px) {
.woocommerce ul.products li.product {
    margin-bottom: 0 !important
   }
}

Thank you again @PetarVasilev for pointing me in the right direction!

Answer 2

Try using this CSS:

.woocommerce ul.products li.product:hover .price, .theme-block.shop .product:hover .price {
   opacity: 1 !important;
}

.woocommerce ul.products li.product .button.add_to_cart_button, .woocommerce ul.products li.product .button.product_type_simple {
   opacity: 1 !important;
   position: static !important;
}