Archived topic

Add to cart panel on mobile conflicts vs floating chat widget

5 replies · Started by Allan on March 26, 2022

Viewing posts 1–6 of 6

March 26, 2022 at 3:21 am #2167780

Just added a floating live chat widget on my WooCommerce site. Like those common Intercom or Drift floating bubbles.

As vast majority of our visitors are on mobile, I’m checking if this presents any conflict.

Noticed that the single product page add to cart panel is covered by the floating chat icon.

How can I move the add to cart panel to show up on top rather than bottom of the screen on mobile view?

Also, since live chat widgets are so common, I wonder how else I should optimize the rest of Woo on GP to make sure everything is clean.

Thanks folks!

March 26, 2022 at 4:42 am #2167825

Hi there,

you can add this CSS to position it to the top:

@media (max-width: 768px) {
    #wc-sticky-cart-panel {
        bottom: unset;
        top: 0;
        transform: translateY(-100%);
    }
}

You now need to consider disabling the Sticky Navigation on mobile as the two will clash.

March 26, 2022 at 8:17 pm #2168469

That did the trick, thanks David!

And welcoming any additional ideas on making way for this floating chat widget 😊

March 27, 2022 at 9:47 am #2168941

Glad to hear that.

I can't really make a suggestion regarding the chat widget. Is it possible to add a timer to delay when it appears ?

March 27, 2022 at 9:58 pm #2169287

Thanks! Will also look into best practices from the likes of Intercom and Tidio as they place such widgets on existing Woo and Shopify sites

March 28, 2022 at 2:29 am #2169481

You're welcome

This archived topic is closed to new replies.