Cart Overlay code placement

[finkk]

Hello there,

I noticed that the cart overlay was not appearing on the single product pages, so manually added the code to the custom header - see attached pic ‘cart-overlay-code-placement.png’

This has caused the problem of being hidden but creating a block over any content that appears behind it. For example, on this page: http://odettel.sg-host.com/product/beef-roasting-joints/ when you scroll down to the product, the quantity field and Add to Cart button are blocked. See attached pic ‘cart-overlay-in-page.png’

How can I solve this problem?

Kind Regards,

Spencer

[kory]

Howdy, @finkk! There are some nuances to how the add to cart features work in WooCommerce. I recently replied to another user about this and went into this setup in great detail:

Shop Notices Not Displaying

Howdy @cdnwhite, thanks for writing in! WooCommerce is a little convoluted in how it handles certain bits of functionality, so hopefully I can help to illustrate a few different ways you might want to set things up depending on what you’re trying to achieve. The first thing to be aware of is the control for allowing AJAX add to cart buttons at WordPress Admin → WooCommerce → Settings → Products → General → Add to cart behaviour → Enable AJAX add to cart buttons on archives: [Screen Shot 2021-…

Click through to that reply to check out all the content in there, as that may help to illuminate what’s going on for you here. You will want to start by removing your duplicate overlay as it isn’t needed, it’s always there, WooCommerce just has some odd nuances in how that all triggers.

Hopefully that helps point you in the right direction, cheers!