Woocommerce Question posted in
The official Woocommerce documentation can be found here.

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

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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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!


  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search