Your chat widget is live, and it works. Then you open the store on a phone, scroll to a product, and the launcher is sitting on the Add to Cart bar. You tap Buy, and the chat window opens.
The usual advice is to shrink the widget, set it closed by default, and defer the script. That’s all about weight, and weight is worth checking, so I tested it. Same site, widget on and off, and the speed scores came back the same both times.
Some widgets are genuinely heavy and worth optimizing. But a widget sitting on your Add to Cart button costs you the sale outright, and that one isn’t a weight problem.
It’s a position problem, and the bottom strip of a phone screen is where your cart bar, your cookie banner, and your launcher all end up competing.
Below I’ve gone through the test results, how to measure your own theme’s cart bar, and what to set the widget to so it clears it.
In this Article:
- Your Chat Widget Isn't Too Heavy, It's in the Wrong Place
- What Happened When We Measured a Widget On vs Off
- How to Find Out How Tall Your Sticky Cart Bar Actually Is
- The Pixel-Guessing Loop, and the Settings That End It
- Common Questions About Chat Widgets on Mobile
- Chat Widget Mobile Optimization: What It Comes Down To
Your Chat Widget Isn’t Too Heavy, It’s in the Wrong Place
On a phone, the bottom of the screen is contested space. Your sticky Add to Cart bar lives there. So does your cookie banner. And so does your chat launcher, usually in the bottom right corner by default.
When the launcher lands on top of the Buy button, the shopper taps chat instead of buying. That costs you the sale in a way that a few extra kilobytes never will.
I ran a Lighthouse audit on the same site with the widget on and off. The short version: the widget added about 148 KiB of assets and moved no Core Web Vital.
So the fix isn’t a file-size project. It’s three steps, in this order:
- Choose the corner that isn’t contested. If your cart bar or banner crowds one side, move the launcher to the other.
- Measure your sticky bar height. You need the real number from your own theme, not a guessed one.
- Set a pixel offset from the bottom. This lifts the launcher clear of the bar instead of hiding it.
Work through them in that order, and the collision is gone before you ever open a performance report.
What Happened When We Measured a Widget On vs Off
I set up four identical pages on the same WordPress site. Two ran WPChat, two had no chat widget at all.
Then I tested each one in PageSpeed Insights on a simulated mid-range Android over a slow connection, twice per page, and averaged the results.
Here is what came back.
| Metric | Without widget | With widget |
|---|---|---|
| Performance | 96.5 | 96.5 |
| First Contentful Paint | 2.0s | 2.0s |
| Largest Contentful Paint | 2.30s | 2.35s |
| Total Blocking Time | 0ms | 0ms |
| Cumulative Layout Shift | 0 | 0 |
| Speed Index | 2.05s | 2.20s |
- Largest Contentful Paint, the moment the biggest thing on screen finishes loading, moved by 0.05 seconds.
- Speed Index, roughly how fast the page fills in visually, moved by 0.15 seconds.
Both sit inside normal run-to-run variance on identical configurations, so neither is a real difference.
Total Blocking Time and Cumulative Layout Shift stayed at zero. That means the widget blocked nothing on the main thread and shifted nothing on the page as it loaded.
The cost shows up in the diagnostics instead. The page went from 33 KiB of cacheable files to 181 KiB, which is roughly 148 KiB of widget assets, or about the size of one mid-sized photo.
So the plain version is this: the widget cost about 148 KiB and moved no Core Web Vital, meaning none of the three load-and-stability scores Google actually uses for ranking.
As long as you’re using a well-coded plugin like WPChat for your chat widget, the site speed won’t be an issue for your mobile visitors.
How to Find Out How Tall Your Sticky Cart Bar Actually Is
Every theme builds its sticky Add to Cart bar differently, so there is no number I can hand you. You have to read your own. It takes about two minutes in your desktop browser.
Here is how to get it.
- Open one of your product pages in Chrome on your computer. Pick a product you actually sell, not a sample one, because the bar’s contents change what it looks like.
- Open DevTools. Right-click anywhere on the page and choose “Inspect”. A panel opens on the side or bottom of your screen.
- Switch to the phone view. Click the small phone-and-tablet icon near the top left of the DevTools panel, labeled “Toggle device toolbar”. The page redraws at phone width.
- Set it to a phone width, 390 is a common one. At the top of the page you’ll see a size box with a dropdown next to it, usually reading “Responsive”. Type 390 into the width field. Your bar stacks and sizes itself differently at phone widths than it does on a desktop screen.
- Scroll down until the sticky bar appears. On most themes it slides in once you scroll past the main Add to Cart button.
- Right-click the bar itself and choose “Inspect” again. Chrome jumps to that element in the “Elements” panel and highlights it on the page.
- Hover over the highlighted line in the Elements panel. A small tooltip appears over the page showing two numbers, something like 390 × 64. The first is width, the second is height. That second number is what you came for.
Write it down. That’s your bar height in pixels.
Here’s a few things to consider from here:
- If the number looks too small, you selected the button instead of the bar. In the Elements panel, click the line just above the one you’re on and watch the highlight. Keep going up until it covers the whole strip, edge to edge, then read the height again.
- Check a second product. A simple product with one button usually gives a shorter bar than a variable product, where a quantity selector or variation dropdown pushes it taller.
- Keep the bigger number. The widget can only sit at one height.
You now have a number. The next question is where you type it, because a lot of widgets don’t give you anywhere to put it and hand you CSS instead.
WPChat has fields for exactly this: a position setting and separate pixel offsets from the bottom and the right.
Turning That Number Into an Offset
Your offset is the bar height plus a gap. If your bar measures 64px, don’t set the offset to 64px.
Set it to something like 80px instead. The gap matters because tap targets don’t have to overlap to cause problems.
A fingertip covers far more screen than a mouse cursor does, so two controls sitting flush against each other will produce mis-taps even when the layout looks clean. A gap of 16px above the bar is enough to separate them.
So the working formula is: bar height + 16px = your bottom offset.
One Caution Before You Trust That Number
DevTools draws your layout, but it doesn’t draw the phone. The browser’s own interface sits on top of the page on a real device, and that costs you height the emulator never shows you.
Three things eat into it:
- The browser interface. The address bar and the toolbar at the bottom of Safari and Chrome on iOS take up real space.
- The collapsing address bar. It shrinks as you scroll and expands when you scroll back up, so the space available shifts while the shopper is using the page.
- iOS safe-area insets. The home indicator strip at the bottom of newer iPhones is reserved space that your layout has to sit above.
Don’t forget that the bar heights differ across themes like Astra, Botiga, Woostify, and the rest, and I haven’t tested them all.
That’s why I’d pick an offset with headroom over a pixel-perfect one.
Set your number, then open the product page on an actual phone once and tap the Buy button. If it’s clean, you’re done. If it’s tight, add another 10px and check again.
The Pixel-Guessing Loop, and the Settings That End It
Two public support threads on WordPress.org show what happens when a widget doesn’t give you a setting for this.
In the first thread, a store owner reports the chat widget covering the WooCommerce Add to Cart button on mobile. The fix is short: move the widget’s position in the plugin settings. That’s the whole resolution.
The second thread goes the other way. A cookie bar is landing on top of a chat widget’s buttons on mobile, and there’s no setting for it.
So, support hands over custom CSS that raises the bar 100px on screens below 479px wide.
That isn’t enough, so the number goes up to 160px. The user comes back and reports the banner now sits in the middle of nowhere.
Nobody in that thread did anything wrong. The loop happens because a guessed pixel value is being tested against a bar height that was never measured, inside a media query, the store owner has no way to debug on their own phone.
You change the number, reload, squint, change it again. There’s no measurement anywhere in that process, which is why it doesn’t converge.
The Settings That Replace the Guess
Where that bar sits depends on your theme, which is exactly why WPChat gives you position controls instead of assuming one corner works everywhere.
The controls map onto the fix order from earlier in this article.
- Position: The launcher sits bottom right by default, with bottom left available. This is the horizontal move, for when your Add to Cart button occupies one side of the bar.
- Offset: Separate pixel fields for distance from the right and distance from the bottom. The number you measured earlier goes into the bottom field: your bar height plus the 16px gap.
- Page targeting: This lets you switch the widget off on specific pages, which is how you keep it away from pages where you don’t need it.
Worth knowing about page targeting: when the widget is switched off on a page, WPChat doesn’t load it and then hide it. It checks first, so the files never download at all.
Ready to get started? Check out our step-by-step guide on adding an online chat widget to your website.
Common Questions About Chat Widgets on Mobile
How do I measure my theme’s sticky Add to Cart bar height?
Measure it in Chrome DevTools with the device toolbar on. Press F12, click “Toggle device toolbar”, set the width to a phone size like 390, then scroll until the sticky bar appears. Right-click the bar, choose “Inspect”, and hover over the highlighted line in the “Elements” panel. The tooltip shows two numbers, and the second one is your height in pixels.
Bottom-left or bottom-right when I have a sticky cart bar?
Pick the corner opposite the bar’s main button, so a mis-tap costs you nothing. If your Add to Cart button sits on the right, put the launcher on the bottom left. When the bar spans the full width of the screen there’s no free corner either way, so leave the position alone and lift the launcher with a bottom offset instead.
Does a chat widget hurt my PageSpeed score?
In my test, no. Running the same site with the widget on and off, it added about 148 KiB of assets and moved no Core Web Vital. TBT and CLS both stayed at zero. One caveat: that was a clean test page, which is a best case, so an image-heavy product page won’t behave identically.
Why doesn’t one recommended pixel offset work across themes?
Because the sticky Add to Cart bar isn’t a WooCommerce feature. It comes from your theme or a separate plugin, and each builds that bar at a different height. Any number you copy from a support thread was measured on somebody else’s theme, which is why you need to measure your own.
Chat Widget Mobile Optimization: What It Comes Down To
A well-built widget doesn’t have to weigh your site down. WPChat added about 148 KiB in my test and moved no Core Web Vital, so weight was never what cost the sale. The position was: the launcher sitting on the one button your shopper came to tap.
Here’s what you can do:
- Measure your sticky bar in Chrome DevTools at a phone width, and take the height from the tooltip.
- Add a 16px gap to that number. That’s your bottom offset.
- Set the position and offset in your widget’s settings, not in a media query.
- Switch the widget off for cart and checkout, if you want the complete focus to be on the sale.
- Check it on a real phone once, because the browser’s own bars and the reserved strip at the bottom of newer iPhones eat height the emulator never shows you.
The number you end up with belongs to your theme, not to chat widgets in general. Different themes all build that bar differently, which is why a field you can type your own measurement into beats any number I could print here.
You have a measurement now. WPChat gives you somewhere to type it: position, separate pixel offsets, and page targeting.
Get WPChat and start connecting with visitors on all devices and grow your business.
