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-storefront',
        '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.