See where WooCommerce shoppers drop out of checkout.

Add Cuttl to WooCommerce

1. Sign in to Cuttl, or create a free account. Add your store with its domain. Open the site’s Install tab and copy the Cuttl Tag. It starts with <!-- Start Cuttl -->.
2. In WordPress, go to Plugins → Add New Plugin and search for WPCode. Install and activate “WPCode – Insert Headers and Footers”.
3. Go to Code Snippets → Header & Footer.
4. Paste the Cuttl Tag into the Header box.
5. Click Save Changes.
6. In Cuttl, turn on Journey Insights for heatmaps and recordings, or Web Experiments for A/B tests. Admins can do it on the product’s page or in Settings → Plan & usage. A new workspace starts with both off, and until one is on, Cuttl keeps nothing from your site.

Developers can add it to a child theme instead. The WordPress guide has the wp_head code.

Count orders

• In Cuttl, add a page goal for the page shoppers see after they pay. WooCommerce shows it at an address like /checkout/order-received/1234/, so match /checkout/order-received/*. The * covers every order number.
• A/B tests can use that goal to show which version gets more orders.

Check it works

1. Open any page of your live site in a browser.
2. In Cuttl, open the site’s Install tab. It shows when data last arrived, usually within a minute.
3. Nothing yet? View the live page’s source and search for app.cuttl.io to check the Cuttl Tag is there. Then check that the site’s domain in Cuttl matches the address in your browser.

Using a caching plugin? Clear its cache first, so the live pages include the Cuttl Tag.

Good to know

• Card fields from payment providers such as Stripe and PayPal load in the provider’s own frame. Cuttl can’t see inside it, so card numbers never reach Cuttl.
• If you renamed the order received endpoint under WooCommerce → Settings → Advanced, use your own name in the goal.
• To leave out your own sessions, open any page of your site once with ?cuttl_ignore=1 at the end of the address.