Install on WooCommerce

Two install paths: a one-line theme edit (preferred) or via Google Tag Manager (zero theme changes).

# Option A — Theme footer

In WordPress admin: Appearance → Theme File Editor → footer.php.

Add this just before <?php wp_footer(); ?>:

<script src="https://cdn.skryx.io/widget.js"
        data-key="pk_live_YOURKEY"
        data-target=".search-field, #woocommerce-product-search-field-0"
        defer></script>

The selector matches both the legacy WooCommerce search field and the modern Block-Editor variant. The widget will attach to whichever matches first.

💡 If you don't want to edit theme code directly, use the Insert Headers and Footers plugin and paste the snippet into the Footer box.

# Option B — Google Tag Manager

In GTM:

1. Tags → New → Custom HTML
2. Paste the same snippet
3. Trigger: All Pages — DOM Ready
4. Save and publish

Make sure your store's domain is in your Skryx key's Allowed origins list.

# Common WooCommerce selectors

# Step 2 — Restrict the key

In Skryx API Keys → edit the key:

• Add your store domain (e.g. https://your-store.com)
• If you also serve admin or staging on subdomains, add those too

The widget will refuse to render off-list origins.

# Style notes

WooCommerce themes often inject CSS that overrides default input styles. The widget renders inside a Shadow DOM, so it's immune — but the input box you attach to is YOUR theme's input. If you want the widget to render its own input instead, drop data-target from the snippet.

# Troubleshooting

• Two dropdowns open at once → WooCommerce's built-in AJAX product search is still firing. Disable it in WooCommerce → Settings → Products → General → Product search, or hide it via CSS: .woocommerce-search-results { display: none; }.
• 404 from /?s=… after click → set the "Show all results" URL template in Search Widget → Behaviour to /?s={query} (the standard WordPress search URL).