[Resolved] Sticky Add to Cart Panel – Odd behaviour on Mobile

Home Forums Support Sticky Add to Cart Panel – Odd behaviour on Mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1310799
    pairfum

    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

    #1310958
    David
    Staff
    Customer Support

    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;
        }
    
    ......
    }
    #1311016
    pairfum

    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

    #1311169
    David
    Staff
    Customer Support

    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;
    }
    #1314544
    pairfum

    Hi David,

    Many thanks for this suggestion.

    It now works perfectly.

    Thank you for your help.

    Kind regards,

    Pairfum London

    #1315181
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.