Clone the WordPress starter kitgithub.com/getwiregum/starter-wordpress

Use the plugin with your existing theme

Install WireGum for WordPress to add the Products editor, workspace settings, native commerce blocks and a shared cart to your own WordPress theme. You do not need the starter. The plugin repository has installation instructions and a command to build an installable ZIP; product templates and styling can be adapted to your theme.

Using the starter source

With the starter source, run npm ci, npm start and npm run seed with Docker running. The official WordPress development environment opens at http://localhost:8888. The environment fetches the plugin from its own repository; the starter README also explains how to use a sibling local plugin checkout while developing both projects. The optional import creates a home page, four example products with images and a thank-you page. The examples are editorial placeholders; connect your own WireGum products to enable purchasing.

For an existing WordPress installation, install Twenty Twenty-Five, copy the starter’s themes/wiregum directory into wp-content/themes/wiregum, and install the plugin from its separate repository. Then activate the plugin and child theme. The starter requires WordPress 6.7 or newer and PHP 8.2 or newer.

Configure the workspace slug, widget URL and locale in Settings → WireGum. Under Products, edit each product’s title, blocks, excerpt and featured image, then enter its public WireGum reference and display-only fallback price in the WireGum product panel. Live prices, variants and stock come from WireGum. Authorize your exact site origin before testing checkout.

Appearance → Editor controls the storefront templates. The WireGum products, buy box, shop link and cart blocks can also be placed in your own pages and templates. Purchasing runs on the published site; the editor displays a server-rendered preview. The shared cart uses a keyboard-accessible dialog. Images and text remain visible when the widget is unavailable, while purchasing stays disabled.

When WireGum makes sense

WooCommerce is the usual starting point for selling with WordPress, especially when you want to manage the store inside WordPress and build around its commerce ecosystem. WireGum can be useful when the website has a different role:

• An editorial, portfolio or brand site needs to sell a small catalog of physical products alongside its existing content.
• A custom theme or headless frontend needs a cart and Stripe Checkout while keeping control of product-page markup and design.
• A team wants to keep publishing in WordPress while managing stock, orders and shipping in a separate dashboard, with a commerce backend it can reuse if the website changes.

The tradeoff is a separate workspace for commerce operations. If your store already depends on WooCommerce extensions or workflows, check those requirements individually before considering a switch.

1. Prepare your workspace

Follow Getting started to create a product and connect Stripe for test checkout. In Storefront, authorize the exact origin of your WordPress site, including staging or local development origins, and copy your workspace slug and the public product reference.

This recipe assumes you can edit PHP in a child theme or a site-specific plugin. If your hosting plan does not allow custom code, check that capability before starting. Product content stays in WordPress; prices, variants and inventory are managed in WireGum. This does not synchronize an existing WooCommerce catalog or its orders.

2. Load the widget once

Add this to your child theme’s functions.php. Omit the opening <?php if the file is already inside a PHP block. Replace workspace-slug, choose your storefront language and use return paths for pages that exist on your site.

<?php
// Add to your child theme's functions.php.
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'wiregum-wordpress',
        'https://wiregum.com/api/storefront/widget',
        array(),
        null,
        true
    );
});

add_action('wp_head', function () {
    $config = array(
        'organization' => 'workspace-slug',
        'locale' => 'en',
        'successPath' => '/thank-you/',
        'cancelPath' => '/shop/',
    );

    echo '<script type="application/json" data-wiregum-config>';
    echo wp_json_encode(
        $config,
        JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT
    );
    echo '</script>';
});

WordPress loads the script in the footer, after the product markup. The configuration is printed in the head using JSON encoding. Custom themes must call wp_head() and wp_footer(). Install this once, rather than repeating the script on each product block.

The workspace slug and product references are public identifiers. No Stripe secret or WireGum API key belongs in this page markup.

3. Add a product to a page

Add a Custom HTML block to your product page and paste the markup below. Replace wg_product_ref with the public reference copied from WireGum. Use ordinary WordPress blocks for the title, photography and product description around it.

<div data-wiregum-product="wg_product_ref" lang="en">
  <div data-wiregum-price></div>
  <div data-wiregum-variant-selector></div>
  <label>
    Quantity
    <input data-wiregum-quantity type="number" min="1" value="1">
  </label>
  <button data-wiregum-add-to-cart type="button">Add to cart</button>
</div>

Each product needs its own reference. For a catalog, repeat the product container with a different reference per item. The variant selector lets customers choose an available variant before adding it to the cart.

Check the published page: the editor preview does not run this frontend integration. If WordPress or a page builder removes the data attributes when saving, render the same markup in a theme template instead. A custom field can hold the product reference; escape its value with esc_attr() when printing it in an HTML attribute.

4. Place the cart

Add this once on the shop page, below the products, or in a shared template used by product pages. Keep the country selector available when shipping rates depend on the destination.

<div data-wiregum-cart-count></div>
<div data-wiregum-country-selector></div>
<div data-wiregum-cart></div>

The widget renders the cart and checkout control. Your theme can style the surrounding markup; the storefront documentation covers custom carts, fixed variants and widget lifecycle events.

5. Test the published storefront

Open the page as a visitor, select a variant, change the quantity and add it to the cart. Check the shipping country, complete a Stripe test checkout and verify the order in WireGum. Check both the success and cancellation return pages before following the going-live checklist.

If controls stay empty, check the workspace slug and authorized origin. Clear your WordPress or CDN cache after changing the integration. If an optimization plugin delays or combines scripts, exclude the WireGum widget and its configuration so they load together on the published page.

For a custom frontend, use the storefront API. For the WordPress loading mechanism used here, see the official wp_enqueue_script reference.