[Resolved] Display cart panel on add to cart

[Kevin]

Hello,

When enabling the customizer setting:

Layout > Woocommerce > Display cart panel on add to cart

I expect to see this behaviour

https://docs.generatepress.com/wp-content/uploads/2019/03/1.8_StickyAddToCart.gif

On my website, I see a red banner on page refresh instead of an animated dropdown.

I have checked the following:

• plugin and theme up to date
• disabled all plugins
• disabled cache (Server and Cloudflare)

Am I misunderstanding how this option works?

Looking forward to hearing from you.

[David]

Hi there,

I just checked your site and it is working how it should be. Which is on the product archives ( Including Related Products ). It requires Ajax to function, which woo doesn’t currently apply to single products hence why you get the standard notification.

[Kevin]

Thanks for the explanation.

[David]

You’re welcome

[Andrew]

Since this is still open and the heading is adequately general, can you confirm whether this feature works on mobile, David? And if not, can it be enabled? Thanks

[Tom]

Yes, this feature works on mobile 🙂

[Andrew]

Thank you. I see it’s on the bottom, can it be placed at the top? We have a chat icon that overlays the add to cart button when it’s on the bottom.

[Tom]

Give this CSS a shot:

@media (max-width: 768px) {
    .add-to-cart-panel {
        bottom: auto;
        top: 0;
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    
    .add-to-cart-panel .continue-shopping {
        position: relative;
        order: initial;
        margin: 0;
        background: none;
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        line-height: auto;
    }

    .add-to-cart-panel.show-sticky-add-to-cart {
        transform: translateY(60px) !important; /* height of your sticky nav */
    }
}

[Andrew]

Sorry Tom, looks like it will work but should have specified we have the sticky nav enabled, so now the sticky nav overlays the cart panel.

[Tom]

Can you link me to your site?

[Andrew]

https://odornuke.com/product/urine-odor-remover-eliminator-tablet/

[Tom]

I don’t think I’m seeing the issue on that page. Can you show me a screenshot?

[Andrew]

Tom we’ve got the CSS you provided commented out currently because we’re running an ad campaign.

Here’s what it looks like currently: http://snpy.in/Rxzhiw

[Tom]

Can you try the updated CSS above?: https://generatepress.com/forums/topic/display-cart-panel-on-add-to-cart-2/#post-947445

[Andrew]

That did it, thanks!

[Author]

Posts