Archived topic
Sticky Add to Cart Panel - Odd behaviour on Mobile
5 replies · Started by pairfum on June 2, 2020
Dear Support,
We notice an odd behaviour of the sticky add-to-cart panel on mobile compared with the desktop:
- unlike the desktop, the add-to-cart button (or choose perfume) only become active when you scroll down past the the add-to-cart button and it has disappeared from view.
- equally, unlike the desktop, the sticky add-to-cart panel is immediately visible and not just when you have scrolled past the add-to-cart button.
Are both behaviours on purpose?
This is our site: https://www.pairfum.com
From our perspective it does not make sense that a button is visible when it doesn't work.
Ideally, we would like the sticky add-to-panel to have the same behaviour & functionality on mobiles as on desktops.
Is this feasible?
Many thanks for your help on this.
Kind regards,
Pairfum London
Hi there,
you have this CSS in your child theme which is forcing the Sticky panel to be always displayed on mobile:
@media (max-width: 768px) {
/* GeneratePress - show sticky add-to-cart permanently on product pages */
/* Source: https://generatepress.com/forums/topic/display-sticky-add-to-cart-button-sooner/ */
.single-product .add-to-cart-panel {
opacity: 1;
}
......
}Hi David,
Many thanks for your explanation and I must admit we had forgotten about this.
We quite like keeping this code but only if there is a way to make the sticky add-to-cart panel functional.
Currently, it only becomes functional when you have scrolled past the add-to-cart button on the page and it has disappeared from view.
Kind regards,
Pairfum London
Try editing that CSS and include pointer-events: auto !important; after the opacity property ie.
.single-product .add-to-cart-panel {
opacity: 1;
pointer-events: auto !important;
}Hi David,
Many thanks for this suggestion.
It now works perfectly.
Thank you for your help.
Kind regards,
Pairfum London
You're welcome
