odd issue – invisible wc_sticky_cart_panel obscures links in footer on mobile

[Michael]

I first noticed that the links in the lower half of my footer were not active, but only when in mobile mode. Also noticed that there is a small invisible area in the right of the lower section of the footer that gives a link to the WooCommerce cart. Troubleshooting the issue revealed in sequence:
1. disabling WooCommerce plugin removed the problem
2. changing theme removed the problem
3. disabling GP Premium plugin removed the problem
4. with GP Premium (and everything else) active, disabling WooCommerce removed the problem
5. using chrome inspector on the invisible hotspot reveals this html code:

<div id="wc-sticky-cart-panel" class="add-to-cart-panel">
  <div class="inside-add-to-cart-panel grid-container grid-parent">
    <div class="continue-shopping ">														 
      <a href="#"><span class="continue-shopping-text">Continue Shopping →</span></a>
    </div>
    <div class="cart-info">
      <div class="item-added">Item added to cart.</div>
      <div class="cart-data">1 item - <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price- 
      currencySymbol">$</span>39.00</span></div>
    </div>
    <div class="checkout">
      <a href="https://dev.anothermonsterproductions.com/checkout/" class="button">Checkout</a>
    </div>
  </div>
</div>

The above code is only active on mobile, and is invisible but prevents the underlying links from being clicked. I can not find any relevant settings in either WooCommerce or GP Premium. I’m not understanding where this is coming from.

I would prefer to leave the WooCommerce module in GP Premium active since I would need quite a bit of additional css if I disable it. In fact, WooCommerce support is the main reason I am using GP Premium for this site.

This site is currently in staging and hidden behind directory protection. It is days from going live.

[Michael]

Follow up:

Display add to cart button on scroll is unchecked

Could this issue be related to another setting in Customize > WooCommerce > Layout?

[Michael]

I deselected “Display cart panel on add to cart” under customize > Layout > WooCommerce in the “Shop” section, and the invisible panel is no longer obscuring the links in the footer on mobile.

While this solves the immediate problem, it points to the fact that I was ignoring settings, which I assume were preselected, that were creating no visible effects. Obviously, I need to study the GP Premium features more thoroughly, but I would at least appreciate an explanation of why having the “Display cart panel on add to cart” option selected caused an invisible panel to be present, and only on mobile?

I will appreciate any comments.

[David]

Hi there,

the Add to Cart Panel is a feature of the Single Product page. It only displays when Add to Cart button is scrolled out of view. On Mobile this panel slides up from the bottom of the viewport ( on desktop it slides down from the top ).

You can see it here:

https://docs.generatepress.com/article/woocommerce-overview/#single-product

Whilst the add to cart button is in view the panels visibility is hidden, but it should also be positioned outside of the viewport. So i am not sure why it is blocking your footer links.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

The single product page as well as the product archive pages are designed in Elementor Pro. I’m guessing that prevents the Add to Cart Panel from displaying, and may be why I was unaware of it even though it was checked. I suppose it is possible that the interaction between Elementor Pro and Generate Press could explain why the panel was within the view port as well. Any thoughts would be appreciated. This is the first time I have used GP Premium with Elementor Pro and WooCommerce. There is more to learn, apparently.

[David]

hard to say without seeing the site. Any chance you can provide us temporary login details?

If so you can send them via the account issue form:

https://generatepress.com/contact/

Please add the URL of this topic to the form so we can track.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

I sent you the login details as you requested via the account issue form. I had also included this information in the site url field of the first post as part of the url. The site url is dev.anothermonsterproductions.com.

I also want to emphasize that the immediate issue was resolved by unticking the “Display cart panel on add to cart” item which was previously left selected. The additional discussion now is for information purposes. As I mentioned earlier, the site is just days from going live.

[David]

Can you re-enable the Display Cart Panel option so i can take a look to see what the issue is.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

I ticked the “Display cart panel on add to cart” checkbox. I won’t be working on the site tonight, or again until tomorrow late afternoon.

With the credentials I sent you, you have full Admin access to the back end, so feel free to make changes yourself if you need to, as long as you restore things afterwards. I trust you will be careful.

[David]

Thanks – we’re not covered to make changes to peoples sites i’ll just be taking a look.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

aaah ok – are these products Single Purchase ? If so its a bug that we only found in the last week. We’ll be fixing this on the next update. In the meantime leave the Add to Cart panel disabled.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts