Overview

By the end of this tutorial you’ll have a full shopping app: a native mobile app where customers browse products by category, tap one to see its price and an Add to Cart (or Buy Now) button, review their cart, work through checkout, and then check their order history — all running on your existing WooCommerce store.

Your store runs on WooCommerce, the standard WordPress e-commerce plugin. The MAM WooCommerce plugin (mam-woocommerce) is what bridges the two: it turns your WooCommerce categories, products, and orders into mobile content surfaces, adds the cart and checkout buttons, and gives you a WooCommerce settings page where you label and color every button and screen your shopper sees.

Almost everything here is configuration, not code: install WooCommerce, set up products the normal way, activate mam-woocommerce, add a product-category screen to the app, and fill in a settings page of titles, colors, and toggles. The cart and checkout flows are already built into the app — you’re styling and wiring them, not building them from scratch.

What you’ll have at the end

• A WordPress site with WooCommerce products flowing into a native mobile app.
• A product listing screen, scoped to a WooCommerce product category, where each product shows its image, title, and price.
• A working Add to Cart / Buy Now purchase control on each product, styled with your button labels and colors.
• A Cart screen and a Checkout flow (billing/shipping address, optional tip, coupons, terms, confirmation), each with titles and colors you set.
• A My Orders screen so customers can see their order history and order details.
• The whole thing visible in the Previewer app before you ever submit a build to the stores.

You will not have a published store app at the end of this tutorial — publishing is a separate flow. See What’s next.

Prerequisites

• A WordPress site with MAM Main (mam-main) installed and activated, and your MAM account enrolled.
• Admin access to the WordPress dashboard.
• WooCommerce installed and activated, with payment, shipping, and at least a few published products organized into product categories (product_cat).
• The MAM WooCommerce plugin (mam-woocommerce) entitled for your account and activated.
• If you want in-app order-related forms (refund, cancel, feedback, billing address), the MAM Gravity Forms Manager plus Gravity Forms, with those forms built and selected in settings.

mam-woocommerce depends on WooCommerce being active — its product, cart, and order surfaces call WooCommerce functions like wc_get_product() and wc_get_order() directly. If products or orders never appear in the app, confirm WooCommerce is active and that your products are published and assigned to a category first.

The big picture

Here’s what each piece does, so the steps ahead make sense:

How the shopping surfaces map to content types

mam-woocommerce registers several content types you can pick from when building a screen — think of them as the building blocks of your app:

For a customer-facing shopping app, you’ll mainly use WC Product Category (your storefront) and WC My Orders (order history). The cart and checkout screens aren’t content types you add — they’re built-in flows that open the moment a shopper taps a purchase button or the cart icon.

Steps

1. Set up your store in WooCommerce

Before touching the app, make sure you have a real store to show.

1. In WordPress admin, confirm WooCommerce is active and that payments, taxes, and shipping are configured the way you want them on the web. The app reuses your existing WooCommerce checkout setup — it doesn’t replace it.
2. Add several published products with a price and a featured image. Skip the featured image and WooCommerce’s placeholder image shows up instead.
3. Organize your products into product categories (product_cat). Each storefront screen in the app shows just one category at a time, so plan yours the way you want shoppers to browse — for example, “New Arrivals,” “Memberships,” “Accessories.”

You only need a few products in a couple of categories to start — enough to see the listing, the purchase button, and an order appear.

2. Activate MAM WooCommerce

Confirm the MAM WooCommerce plugin (mam-woocommerce) is entitled for your account and activated. On activation it registers the WooCommerce content types and adds a WooCommerce settings page under the Mobile App Mgr menu.

If the WooCommerce content types don’t appear in the content-type picker, recheck that both WooCommerce and mam-woocommerce are active and that your account is entitled for the plugin.

3. Add a product listing screen to your app

Now surface products in the app.

1. In the app builder (home screen layout, a tab, or the left menu), add a new screen and choose the WC Product Category content type.
2. In the content-type picker, select which WooCommerce product category to show. The dropdown lists your product_cat terms by name.
3. Save the screen.

Behind the scenes, the listing pulls every published product post in that category and builds a row for each one — product image, title, price label, plus a purchase section (the Add to Cart / Buy Now button). The price shown is the WooCommerce product’s regular price.

To build a multi-category storefront, add one WC Product Category screen per category and group them — for example as items in the left menu, or as tabs in the bottom tab bar.

4. Style the purchase button (Buy Now / Add to Cart)

Each product row carries a purchase control, and its text and color both come from the WooCommerce settings page, under the Cart group. Head to Mobile App Mgr → WooCommerce and set:

• Buy Now Button and Buy Now Button Color — the immediate-purchase button label and color.
• Add to Cart Button and Add to Cart Button Color — the add-to-cart label and color.
• Update Cart Button / Remove Item Button — labels and colors used inside the cart.

Several Cart-group labels carry older “rental”-style internal variable names (for example, the Add to Cart Button label is stored under a button_request_rental variable, and Buy Now under button_rental_now). The on-screen titles you type are what shoppers see; the legacy variable names are an implementation detail.

Whether a product shows Buy Now or Add to Cart depends on how the product surface itself is built (the show_simple_product content section) — if you need to change that behavior, see Related articles and hand it off to a developer.

5. Configure the Cart screen

Still on the WooCommerce settings page, that same Cart group also controls the cart screen itself:

• Cart screen title — the title shown at the top of the cart.
• Cart is empty message — what shoppers see when the cart has no items.
• Proceed to Checkout button title and Proceed to Checkout Button Color — the button that moves a shopper from cart to checkout.
• Change Dates / Remove Item button titles and colors — used for date-based and editable line items.

Set these so the cart matches your brand wording. Save the page.

6. Configure the Checkout flow

The Checkout group is the biggest section of the settings page — checkout simply has the most moving parts. Open the WooCommerce settings page and work through it top to bottom. Here are the controls that matter:

Screen and section titles

• Checkout Screen Title, plus per-section headers: Order Summary, Shipping Address, Login or Create Account, Payment Information, Shipment Details, and the pickup/delivery header.

What checkout collects and shows (each a yes/no toggle)

• Show Billing Address / Show shipping address — which address blocks to collect.
• Show pickup/delivery option — let shoppers pick fulfillment type (the store-wide default is set by Order Type in the General group: Pickup or Delivery).
• Show Coupons — show a coupon entry field.
• Show Tip Option and Show Driver Tip Option for Deliveries — enable tipping, with up to four preset Tip Level percentages (and four Driver Tip Level presets).
• Show Terms — require terms acceptance, paired with the Terms of Service Message.
• Checkout has comments? — show an order comments field, with a Checkout comments field title.
• Require address fields to place order — make address entry mandatory.
• Use Confirmation Screen? — show a post-order confirmation step.

Button labels, colors, and dialog copy

• Checkout Button Title / Color / Background Color — the place-order button.
• The Purchase dialog set: Checkout Purchase Dialog Title, Dialog Message, Purchase Button Title, Cancel Button Title, and Purchase Confirmation text shown after a successful order.
• Checkout message and Cart Empty Message copy.

Scheduling and timing (for stores with pickup/delivery windows)

• Display as day time slots, Days allowed, Intra order buffer time, Place Hold on Order, and # Days after Order Complete to Settle the Order.

You won’t need every toggle. For a simple ship-to-customer store, you’ll typically turn on billing/shipping address and terms, leave tipping and pickup/delivery off, and set your button labels and colors. Save the page when you’re done.

7. Add an order-history screen

Give customers a way to see what they’ve bought.

1. Add a new screen (a tab or a left-menu item is typical) and choose the WC My Orders content type.
2. Save the screen.

This screen lists the signed-in customer’s orders grouped by WooCommerce status — Pending, Processing, On-Hold, Completed, Cancelled, Refunded — with a message when there’s nothing there yet. Tap an order and it opens an order details view: an itemized table with order ID, date, status, line items, fees/shipping, and the order total, all assembled from the WooCommerce order via the shared order_details content section.

Since My Orders shows the signed-in user’s own orders, it only makes sense once shoppers are logged in. If your app doesn’t already require accounts, see Add a login button and turn on in-app accounts.

8. (Optional) Add order action forms — refund, cancel, feedback

mam-woocommerce can add tab bar action buttons to an order’s detail screen — each one appears only when the order is in the right state and its matching form is configured:

• Refund — appears on Processing orders when a refund form is selected and refunds are allowed for the customer role (Refund settings group). Opens your refund Gravity Form, pre-filled with the order ID and computed refund amount.
• Cancel Order — appears when the order is cancellable and a cancel-order form is selected. Opens the cancel form pre-filled with the order ID.
• Feedback / Review — appears on Completed orders when a feedback form is selected. Lets the customer leave feedback after fulfillment. (You can also surface a review/tip prompt after order completion via the Show Tip and Review after order complete General toggle.)
• Reorder — a cart-icon button that re-adds a past order’s items to the cart.

Each of these is entirely optional — skip the form and the button just never shows up. To use one, build the corresponding Gravity Form, select it in the matching settings option (the refund form, cancel-order form, or feedback form picker), and map its order-ID field so the app can pre-fill it.

9. Preview the app

Now see it live. Open the Previewer app, sign in against your site, and check:

• The product listing shows your category’s products with images, titles, and prices.
• Tapping a product shows the Buy Now / Add to Cart button with your labels and colors.
• Adding an item and opening the cart shows your cart title, the items, and Proceed to Checkout.
• Checkout shows the sections and toggles you enabled (address, tip, coupons, terms, confirmation) and places a real WooCommerce order.
• My Orders shows the order you just placed, and tapping it shows the itemized order details.

If products don’t show up, work back through the prerequisites: WooCommerce active, mam-woocommerce entitled and active, and your products published and assigned to the category you picked for that screen.

Verify

Sign in to the Previewer (or a TestFlight/internal build) and confirm the full shopping loop:

• Browse: the product listing populates from the chosen WooCommerce category, with correct images and prices.
• Purchase: Add to Cart / Buy Now behaves as configured; the cart shows the right items and totals; checkout collects exactly the fields you toggled on.
• Order: a completed checkout creates a matching order in WooCommerce → Orders in the WordPress admin, and that order appears under My Orders in the app with correct status and totals.
• Order actions (if enabled): refund/cancel/feedback buttons appear only on orders in the expected status and open the right forms.

Variations and next steps

• Multi-vendor marketplace: with a WooCommerce vendors plugin, product and order screens can show per-seller profiles and locations (the seller-profile and seller-location content sections). See Related articles.
• Pickup / delivery and scheduling: turn on pickup/delivery options and time slots in the Checkout group for stores that fulfill on a schedule.
• Tipping: enable customer and driver tip presets in checkout for food/service-style stores.
• Subscriptions / memberships: to sell recurring access rather than physical goods, consider the in-app purchase path. See Sell subscriptions with in-app purchases.
• Reviews and ratings: combine with mam-reviews-manager to collect product reviews, optionally prompted after an order completes.
• Featured products on the home screen: add a curated horizontal row of products to the home screen.

What’s next

Once the app looks right in the Previewer, you’re ready to move on to publishing: buy a publishing plan, set up your Apple and Google developer accounts, and run the App Publishing Wizard. See Run the App Publishing Wizard end to end.

Note for app-store review: apps that sell physical goods or services generally use WooCommerce checkout (this tutorial). Apps selling digital content or subscriptions consumed inside the app must use Apple/Google in-app purchase instead — see Sell subscriptions with in-app purchases. Confirm which path your products fall under before submitting.

Related articles

• Plugin: mam-woocommerce
• Content type: WC Product Category (product listing)
• Content type: WC My Orders (order history)
• Recipe: Configure the WooCommerce cart and checkout screens
• Add a login button and turn on in-app accounts
• Require login before users can use your app
• Sell subscriptions with in-app purchases
• Run the App Publishing Wizard end to end