This page exists in one language only. Some pages here are English, some Swedish.

Installing Stockisto on WordPress & WooCommerce

There are two ways to put the widget on a WordPress site. Pick one.

The Stockisto plugin. Set your embed id once, then place the widget with a shortcode. Pick this on WooCommerce: the plugin reads each product's SKU for you. No theme files, no PHP.
The manual snippet. Paste your embed snippet into WordPress's native Custom HTML block. Fine for a store finder and every brand-level widget. A SKU-aware WooCommerce card then needs a PHP template, because a Custom HTML block cannot run PHP.

Before you begin

You have a Stockisto account and at least one retailer imported
Your saved embed id, from Supplier Admin → Install
For the WooCommerce product card: WooCommerce installed

Path A: the Stockisto plugin

Getting the plugin

Download the plugin ZIP from Install → Install on WordPress in Supplier Admin. It is one PHP file (version 1.0.0) with no bundled JavaScript, so it installs and updates like any other plugin.

Step 1: Install and activate

In wp-admin, go to Plugins → Add New → Upload Plugin, choose the ZIP, install it and click Activate.

Step 2: Set your embed id

Go to Settings → Stockisto Widget and fill in:

Embed id: the saved we_... id from your admin's Install panel. In embed mode, type, view and styling come from the saved widget. Only page keys are written into the snippet.
Brand slug: keep this for an existing legacy install. Leave Embed id empty to use legacy mode.
Widget: what [stockisto_widget] renders when you do not name one. Leave it on Where to buy for a store list.
Where to buy view: Full for the whole list, or Inline for a compact product-page panel. Button, Pill and Corner are also offered.
SKU source: leave on Read the current WooCommerce product so product widgets pick up the product being viewed.

Step 3: Place the widget

Add a core Shortcode block wherever the widget should appear: a page, a post, or a footer template part under Appearance → Editor:

[stockisto_widget]

This uses the Embed ID you saved under Settings → Stockisto Widget.

Use the Shortcode block, not Custom HTML. WordPress expands the shortcode in PHP before the page is sent, which is what lets the plugin read a WooCommerce SKU. It also works for editors who are not administrators, who often cannot save raw <script> markup.

The shortcode takes type (one of the eight widgets, default where-to-buy), view, slug and sku, plus the widget's other settings by name, such as soldOut or reserve:

[stockisto_widget view="inline"]
[stockisto_widget view="full" slug="your-brand-slug"]
[stockisto_widget view="inline" sku="ABC-123"]

Step 4 (WooCommerce): show it on every product page

To put the card on every product without editing a template, add this to your child theme's functions.php:

add_action( 'woocommerce_after_single_product_summary', 'stockisto_widget_render' );

Set Where to buy view to Inline first, or pass it explicitly:

add_action( 'woocommerce_after_single_product_summary', function () {
    stockisto_widget_render( array( 'view' => 'inline' ) );
} );

The plugin reads the SKU of the product being rendered, so every product page shows stock for the right product.

It renders nothing rather than guessing

In embed mode, a product with no SKU emits data-sku="". This suppresses product-dependent rendering; a SKU-independent widget can still render. Legacy product snippets with no usable SKU render nothing. If a card is missing, view the page source and look for a comment beginning <!-- Stockisto widget not rendered:. It names the reason.

Theme-template placement

To drop it into a template file directly, the plugin exposes a template tag:

<?php if ( function_exists( 'stockisto_widget_render' ) ) { stockisto_widget_render(); } ?>

stockisto_widget_sku() returns the current WooCommerce SKU, or an empty string outside a product context. stockisto_widget_snippet( $args ) returns the markup instead of echoing it.

Path B: the manual snippet

The dashboard generates a snippet for every widget mode under Install → Install on WordPress. Each one goes in one of two places, and the two are not interchangeable:

Any page or footer. Plain HTML, no code. Paste it into a Gutenberg Custom HTML block. This covers the store finder and every brand-level widget mode.
WooCommerce product page. The product snippets carry PHP in data-sku, so they must go in a PHP template or a functions.php hook. This needs theme access.

Store finder on any page or footer

Choose the Any page / footer placement and copy the snippet:

The id below is an example. Use the saved embed id your admin supplies.

<script
  src="https://cdn.test.stockisto.com/widget.js"
  data-api-base="https://api.test.stockisto.com"
  data-embed="we_0123456789abcdef0123456789abcdef"
  async></script>

Open the page (Pages → Edit) or your footer template part (Appearance → Editor)
Click the + inserter and choose Custom HTML
Paste the snippet and click Update or Publish

WooCommerce product page (PHP fills in the SKU)

In embed mode, use the plugin shortcode above on product pages. It reads and escapes the WooCommerce SKU, including data-sku="" when no usable SKU exists. Keep the generated PHP if you copy a product snippet; a Custom HTML block cannot run it. The following PHP example is for an existing legacy install:

<?php
$stockisto_sku = isset( $product )
    && is_callable( array( $product, 'get_sku' ) )
    ? $product->get_sku() : '';
$stockisto_sku = is_string( $stockisto_sku ) ? trim( $stockisto_sku ) : '';
$stockisto_sku_length = preg_match_all( '/./us', $stockisto_sku )
    + preg_match_all( '/[\x{10000}-\x{10FFFF}]/u', $stockisto_sku );
if ( '' !== $stockisto_sku
    && $stockisto_sku_length > 0 && $stockisto_sku_length <= 100
    && 'YOUR-SKU' !== $stockisto_sku
    && false === strpos( $stockisto_sku, '{{' )
    && false === strpos( $stockisto_sku, '}}' )
    && false === strpos( $stockisto_sku, '<?' ) ) : ?><script
  src="https://cdn.test.stockisto.com/widget.js"
  data-api-base="https://api.test.stockisto.com"
  data-stockisto-slug="YOUR-BRAND-SLUG"
  data-widget-type="where-to-buy"
  data-sku="<?php echo esc_attr( str_replace( '&', '&amp;', $stockisto_sku ) ); ?>"
  data-view="inline"
  async></script>
<div id="stockisto-where-to-buy"></div><?php endif; ?>

The PHP around the script reads the product's SKU and checks it. When the product has no usable SKU, the snippet renders nothing, so a shopper never sees stock for the wrong product.

This snippet only works in a PHP template

The snippet is PHP. A Gutenberg Custom HTML block does not run PHP, so the literal <?php … ?> would reach the browser and the SKU would be wrong. Add it to a PHP template instead, or use the plugin's shortcode.

Add it in one of these places. Use a child theme so a theme update does not overwrite it:

Your child theme's single-product.php, where the card should render

A functions.php hook:

add_action( 'woocommerce_after_single_product_summary', function () {
    global $product;
    $stockisto_sku = isset( $product )
        && is_callable( array( $product, 'get_sku' ) )
        ? $product->get_sku() : '';
    $stockisto_sku = is_string( $stockisto_sku ) ? trim( $stockisto_sku ) : '';
    $stockisto_sku_length = preg_match_all( '/./us', $stockisto_sku )
        + preg_match_all( '/[\x{10000}-\x{10FFFF}]/u', $stockisto_sku );
    if ( '' !== $stockisto_sku
        && $stockisto_sku_length > 0 && $stockisto_sku_length <= 100
        && 'YOUR-SKU' !== $stockisto_sku
        && false === strpos( $stockisto_sku, '{{' )
        && false === strpos( $stockisto_sku, '}}' )
        && false === strpos( $stockisto_sku, '<?' ) ) : ?><script
      src="https://cdn.test.stockisto.com/widget.js"
      data-api-base="https://api.test.stockisto.com"
      data-stockisto-slug="YOUR-BRAND-SLUG"
      data-widget-type="where-to-buy"
      data-sku="<?php echo esc_attr( str_replace( '&', '&amp;', $stockisto_sku ) ); ?>"
      data-view="inline"
      async></script>
    <div id="stockisto-where-to-buy"></div><?php endif; ?>
    <?php
} );

Keep generated PHP unchanged. The legacy examples read the SKU with WooCommerce's get_sku() and escape it with esc_attr(). The manual hook works without the plugin.

Copy the saved embed id from your admin's Install panel. Keep data-api-base as generated. The we_... id identifies the saved widget; changes in the admin reach the snippet on its next load. New snippets need no slot div. Page keys such as data-sku still come from the current product.

Snippets installed today keep working

Existing snippets with data-stockisto-slug, type and view remain supported. Omitted settings use the owner's default embed, with the existing attribute behaviour as fallback when that lookup fails.

<script
  src="https://cdn.test.stockisto.com/widget.js"
  data-api-base="https://api.test.stockisto.com"
  data-stockisto-slug="YOUR-BRAND-SLUG"
  data-widget-type="where-to-buy"
  async></script>

Allow https://api.test.stockisto.com in connect-src and https://cdn.test.stockisto.com in script-src on TEST. For production use the generated https://api.stockisto.com and https://cdn.stockisto.com origins. A blocked API connection shows a load-failed state for a named embed; it cannot use cached results.

Allow your site domain

In Install → Embed script → Allowed origins, add your WordPress domains, one per line:

https://www.yourbrand.com
https://yourbrand.com

The widget loads without this list. Analytics events and lead attribution are only credited to your account from a listed origin, and Install Health reports the domains it hears from.

Confirming the install

Open a page where you added the widget. The locator should render. Then return to Install in Supplier Admin: the Install Health panel shows Script detected once your site reports in, and lists each widget's last render outcome.

Troubleshooting

Problem	Likely cause	Fix
Shortcode shows as literal `[stockisto_widget]`	Plugin not activated	Activate it under Plugins
Plugin renders nothing at all	No brand slug, or no SKU in this context	View source for `<!-- Stockisto widget not rendered:`; the comment names the reason
Plugin card missing on some products only	Those products have no SKU	Set a SKU on the product. Variable products use the parent SKU, which is often empty
No Custom HTML block	Classic editor, not the block editor	Switch to the block editor, or use a Custom HTML widget
Product card shows `<?php … ?>` as text	PHP snippet pasted into a Custom HTML block	Move it to a PHP template or `functions.php` hook, or use the shortcode
Widget not visible	Embed resolve failed	Keep the generated embed id and allow the API origin in `connect-src`
Product card shows the wrong or blank stock	SKU PHP edited, or `$product` not in scope	Keep the PHP as generated; make sure it runs inside a product context
"Loads, but refused" in Install Health	Locator set to Private, or plan gate	Set the locator to Public, or check the widget type against your plan
Events missing in Install Health	Site domain not on Allowed origins	Add your WordPress domains
CSP error in the console	`Content-Security-Policy` blocks the script	Allow `https://cdn.test.stockisto.com` in your `script-src`

FAQ

Do I need the Stockisto plugin?

No. The manual snippet works on its own. The plugin is worth it on WooCommerce, where it resolves each product's SKU so you never touch a PHP template.

Can I use the plugin and the manual snippet together?

You can, but not on the same page, or the widget renders twice.

Can I put the WooCommerce snippet in a Custom HTML block?

No. It contains PHP, and Gutenberg blocks do not run PHP. Use the store finder snippet in a Custom HTML block, a PHP template for the product card, or the plugin's shortcode.

Does it slow down my site?

No. The script loads with async and fetches store data only when the widget scrolls into view.