Product Locator
Integration guides
WooCommerce

Integrating with your WooCommerce website

This guide explains how to integrate the NearSt Product Locator widget into your WooCommerce product pages.

Prerequisites

  • Using the same SKUs for your products between NearSt and WooCommerce
  • A WooCommerce store with admin access
  • A NearSt account with Product Locator license key
  • Basic knowledge of WooCommerce theme editing and/or HTML

Installation steps

  1. Access the WooCommerce theme editor
    Log in to your WordPress admin panel and navigate to Appearance → Theme Editor.
    Select the theme you are using for your WooCommerce store.

  2. Locate the product template
    In the theme editor, find your product template file. This is typically located at woocommerce/single-product.php or woocommerce/content-single-product.php.

  3. Add the widget
    Locate the section where you want the widget to appear (recommended: just above the "Add to Cart" button).
    Add the following code:

    <script src="https://product-locator.near.st/embed.js" async defer></script>
<div
  class="nearst-locator-button"
  data-license-key="YOUR_LICENSE_KEY"
  data-barcode="<?php echo wc_get_product()->get_sku(); ?>"
></div>

  4. Test the Integration
    Preview your changes on a product page, and verify that the widget appears and functions correctly.
    Ensure the barcode is being passed correctly.

Product identifier options

WooCommerce provides several fields for product identification. You should use the one that matches the barcodes of the stock data you're sending to NearSt.

If you're unsure about the types of barcodes you're sending to NearSt, sign into the NearSt dashboard (opens in a new tab), navigate to one of your stores, and look at the Inventory → Manage items page.

Usually, you'll want to use one of the following fields:

  • Product SKU: <?php echo wc_get_product()->get_sku(); ?>
  • Product ID: <?php echo wc_get_product()->get_id(); ?>
  • Custom fields: <?php echo get_post_meta( get_the_ID(), 'custom_gtin', true ); ?>

Troubleshooting

  • If the widget doesn't appear, check that:
    • Your API key is correct
    • The product has a valid barcode
    • The script is loading properly
    • There are no JavaScript console errors
  • Verify the chosen product identifier field contains the correct data by checking your product details in Shopify admin

Widget customization

You can customize the widget's appearance using the options described in the customization guide.

ShopifyPolicies and legal