If your app sells products through WooCommerce, MAM Suite can add a cart button to the home screen header, so shoppers can jump to their cart from anywhere in the app. That button carries a small badge — a counter showing how many items are waiting in the cart. Here’s how to control when the button shows up, and how to style its badge.

Metadata

Before you start

This one’s for shopping apps — apps whose products and cart run through WooCommerce on your WordPress site. Makes sense when you think about it: a cart button and an item count only mean something when there’s an actual cart behind them.

You’ll need:

• An app with WooCommerce products configured (so the app has a cart).
• Access to your app’s settings in the Mobile App Manager.

Note on default behavior. Out of the box, the cart button is contextual: it shows up in the home screen header once there’s something in the cart, and steps aside when the cart’s empty. The settings below let you push that behavior either direction — always on, or always off.

Where these settings live

You’ll find all four settings in one place: your app’s settings, under the Home Screen group. Open your app in the Mobile App Manager, head to the app settings area, and look for Home Screen. Here’s what’s waiting for you there:

Change any of these, and you’ll need to save and rebuild (or refresh) the app preview before you see the difference.

Step 1 — Decide how the cart button should behave

Pick whichever behavior fits your app:

• Contextual (recommended default). Leave both Show Cart button always and Hide Cart button always set to No, and the button takes care of itself — showing up once there’s something in the cart, stepping aside when it’s empty.
• Always visible. Set Show Cart button always to Yes, and the button stays put in the header, empty cart or not. Handy when you want shoppers to always have a one-tap path to checkout.
• Always hidden. Set Hide Cart button always to Yes, and the button won’t appear on the home screen at all — a good fit if your app handles cart access another way, like a dedicated Cart tab in the tab bar.

Don’t enable both. Turning on Show Cart button always and Hide Cart button always at the same time asks for two opposite things at once, so pick one — or leave both off and let contextual behavior handle it.

Step 2 — Style the badge

The badge is the small counter that sits on top of the cart button, showing how many items are inside.

1. Set the badge color. Use Cart badge color to pick a color for the badge — it starts out black (#000000) by default. Choose something that stands out against your home screen background and header.
2. Adjust the badge position (optional). Use Badge Offset (%) to nudge the badge up or down — a percentage value that shifts the home screen badge vertically. Reach for this if the badge is overlapping the button artwork, or sitting too high or low for your header design. Start with small values and preview as you go.

Keep these two straight: Badge Offset (%) only adjusts the home screen badge’s position. Cart badge color only sets the color of that same cart item-count badge. If your app shows badges elsewhere too — a tab bar count, say — those are styled on their own.

Step 3 — Preview and verify

1. Save your settings.
2. Refresh or rebuild the app preview.
3. Add an item to the cart in the app, then confirm:
   • The cart button appears in the home screen header (or stays visible/hidden per your Step 1 choice).
   • The badge shows the correct item count.
   • The badge color and position match what you configured.
4. Empty the cart, then confirm the button behaves the way you’d expect for your chosen mode — gone in contextual mode, still there in always-visible mode.

Related setting — keeping the cart between screens

There’s a related Home Screen setting worth knowing about: Do not clear cart on Detail Screen (do_not_clear_cart_on_detail_screen). It controls whether the cart survives a shopper’s trip into a product detail screen. It isn’t part of the button or badge styling covered here, but it does affect what that badge count shows as people move around your app. If shoppers report their cart “resetting” when they tap into a product, this is the setting to check.

Troubleshooting

Verification

This article was last verified against:

• mam-main/includes/app-settings/admin-settings-page.php — settings show_cart_button_always, hide_cart_button_always, cart_badge_color (default #000000), home_badge_offset, all in the home-screen category.
• App-setting reference docs under app-setting-reference/ (app-setting-show_cart_button_always, app-setting-hide_cart_button_always, app-setting-cart_badge_color, app-setting-home_badge_offset).

Re-verify whenever the Home Screen settings group is reorganized, the cart-button visibility logic changes in the app build, or the badge styling settings are renamed or moved.

Related articles

• App Setting: Show Cart button always
• App Setting: Hide Cart button always
• App Setting: Cart badge color
• App Setting: Badge Offset (%)