Support » Plugin: WooCommerce » Overlay appears over product image and add to cart button woocommerce

  • Resolved dawieh


    Good day,

    I use Elementor pro and Woocommerce. I set the default shop page to display all the product categories. This works fine. As soon as you click on any of the product categories, it proceeds to list the relevant products underneath the category clicked.

    The problem I’m facing, is on this page, as soon as you try to click the product name (to go to single product page with more info) or click the product image or the ‘add to cart’ button, a light grey rectangular overlay appear preventing the click.

    If you were to browse directly to the single product page the add to cart button works fine. I’ve checked all settings but cannot seem to get this resolved. Do you perhaps have any suggestion of what could cause this?

    Thanks – Look forward to hearing from you.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Stef


    Since you didn’t post a URL it is hard to help you.

    However, you are using a premium plugin that is not related to WC you are best seeking assistance from the folks that make Elementor Pro you and can serve you better.

    Thread Starter dawieh


    Hi Stef,

    Thanks for feedback. Sorry, wanted to post the url in private message…

    Herewith a link to the main shop page displaying the categories (this page works fine): – if you now click on any of the categories, the products per category page contains the issue. Let’s take the following category page as an example:

    The buttons are working fine on the single product page (except for the quantity arrows not displaying):

    I have also contacted Elementor for assistance



    No problem. We cannot accept private messages in these forums. Another rule.

    Plugin Support RK a11n


    Thanks for forwarding that link – helps a great deal!

    When looking at the underlying code on that page, I see that it’s your theme that powering that rectangle. It’s possible that your theme isn’t playing all that well with your Elementor plugin. To see that in action, have a look at this screenshot:

    Link to image:

    Moving forward, you’ll want to get in touch with your theme developer for more support on that.

    As a temporary workaround, you could add the following custom CSS to your WordPress settings under Appearance > Customize > Additional CSS:

    .products .product:not(.swiper-slide)::before {
      display: none;
      content: "";
    Thread Starter dawieh


    Hi RK,

    Thank you for feedback, do appreciate. I did contact the theme developers but they simply said I must purchase the Woocommerce ‘Quick Start Kit’ – I have yet to hear how this will actually solve my problem…

    Awesome, thank you – I’ve added the custom css and it now seems to be working just fine.

    I really appreciate your help.


Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Overlay appears over product image and add to cart button woocommerce’ is closed to new replies.