Archived topic
Added to cart notice breaks menu
5 replies · Started by Miguel on June 7, 2019
Dear friends,
I have the following issue: As a user clicks on 'add to cart' button on a product page, it appears a message like [ 'product name' has been added to your shopping cart --- View shopping cart ]. This message is shown on top of the page, before the header/menu, but unfortunately, it breaks the menu layout as covers part of it.
Is there any way to change/move it and make it appears in the content area as it does when a user removes a product from the shopping cart? (Or even under the menu?)
Thanks for your help...
Hi there,
try adding this CSS to make sure the added to cart panel is in front of the navigation:
.add-to-cart-panel {
z-index: 999 !important;
}Hi David,
Thanks for your answer. Unfortunately, it does not work and keeps on top but under the main menu.
Isn't it anyway to add it as it works when you add a product straight from the list grid (in functions.php for example?
Kind regards,
Sorry i didn't check the product page. I saw that the Added to Cart Panel was not displaying correctly on the Shop page, which the above CSS fixes.
The Added to Cart panel can't be used on the Single Product pages as it requires Ajax to be running. Woo only runs Ajax on the shop page.
The Red Notification you're seeing is the default Woocommerce notification and its appearing in its usual place at the top of the content. But as your product page is built entirely with Elementor it sits at the very top of the screen.... The best fix i can provide is to move the notification down the screen with this CSS:
#content {
position: relative;
}
.woocommerce-notices-wrapper {
position: absolute;
top: 315px;
left: 0;
right: 0;
z-index: 100000;
}Dear David,
Thanks for your answer. It worked great!
Kind regards...
You're welcome
