WooCommerce

WooCommerce is a WordPress plugin, so you install Grona the same way as on any WordPress site: the three-line snippet goes in the <head> of every page. Use this page to install Grona on a WooCommerce store, check that it loads on the shop, product, cart and checkout pages, and set up an order goal.

Before you start

• A WordPress site with WooCommerce installed.
• Admin access to the WordPress dashboard.
• Your Grona workspace id, from your Grona dashboard. See Install the Grona script.

This is the snippet you paste. Replace YOUR_WORKSPACE_ID in both script URLs with your workspace id:

<link rel="preconnect" href="https://cdn.grona.ai">
<script src="https://cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/antiflicker.js" data-grona-af-bg="#ffffff"></script>
<script src="https://cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/main.js" async></script>

Install

The plugin method is recommended because it survives theme updates. The WordPress page also covers the theme file method.

1. Install WPCode. In your WordPress admin, go to Plugins > Add New Plugin, search for “WPCode”, select Install, then Activate.

2. Paste the snippet. Go to Code Snippets > Header & Footer and paste the Grona snippet into the Header section.

3. Save. Select Save Changes.

If you edit header.php instead, paste the snippet directly after the opening <head> tag, above every other script, and paste it again after every theme update.

The snippet loads on every page that renders your theme’s <head>, including the shop, product, cart and checkout pages.

Platform notes

Caching and optimisation plugins. Stores often run WP Rocket, Autoptimize, LiteSpeed Cache, NitroPack or Cloudflare Rocket Loader. These can delay the anti-flicker script, bundle Grona’s scripts, or add ?ver= to the URLs, which causes flicker or makes the dashboard check report the script as missing. Exclude both cdn.grona.ai script URLs from delaying, deferring, combining and minifying, then clear the cache. The WordPress page has the details.

Consent banners. If your consent plugin blocks scripts until a visitor accepts, Grona’s scripts do not run before consent: the first page has no flicker protection and the dashboard check reports the script as missing. See Consent and storage.

Content Security Policy. If your store sends a Content-Security-Policy header, allow Grona’s domains as described in Content Security Policy.

Verify

Open your store in a new private window and visit the shop page, a product page and the cart page. On each, open your browser’s developer tools, filter the Network tab by grona, and confirm that antiflicker.js and main.js both load with status 200 or 304. Then run the dashboard check. See Verify your installation.

Track conversions

For orders, use the WooCommerce order-received page, the thank-you page a shopper sees after paying. Because the Grona snippet loads there too, a page-load goal can count the order:

1. Find the page path. Place a test order and note the path of the order-received page in the address bar.

2. Create the goal. In the Grona dashboard, create a custom-event goal with the page-load trigger. Its pattern is a regular expression matched against the page path, so write one that matches the order-received page and nothing else.

3. Install the goal snippet. Add the snippet the dashboard gives you to your site. See Track conversions and custom events.

Caution

A page-load goal fires every time the page loads, including when a shopper reloads the order-received page. The goal snippet has data fields you fill in yourself: if you pass the WooCommerce order number as order_number, Grona can de-duplicate repeat goals for the same order when it builds reports.

Remove Grona

Delete the Grona snippet from Code Snippets > Header & Footer and select Save Changes, or remove it from header.php. Remove any goal snippets you added, and any Grona exclusions in caching plugins. See Remove Grona for the rest.

Next steps

• Implementation checklist
• Track conversions and custom events