Docs Platforms WooCommerce

WooCommerce

Add elNudge to your WooCommerce store via functions.php — includes cart and purchase event hooks.

elNudge integrates with WooCommerce through WordPress action hooks. All three pieces — loading the SDK, tracking cart events, and tracking purchases — are added in your theme's functions.php (or a site-specific plugin). No third-party plugin is required.


1. Load the SDK via wp_head

Add the following to your active theme's functions.php file (or a must-use plugin). This outputs the elNudge snippet into <head> on every front-end page:

<?php
function elnudge_add_sdk() {
    // Skip wp-admin and login pages — elNudge only runs on the storefront
    if ( is_admin() ) {
        return;
    }
    ?>
    <script>
      (function(w,d,s,k){
        w.__eln=w.__eln||function(){(w.__eln.q=w.__eln.q||[]).push(arguments)};
        var t=d.createElement(s);t.async=1;
        t.src='https://cdn.elnudge.com/v1/sdk.js';
        t.setAttribute('data-site-key',k);
        d.head.appendChild(t);
      })(window,document,'script','sk_live_YOUR_SITE_KEY');
    </script>
    <?php
}
add_action( 'wp_head', 'elnudge_add_sdk' );

Replace sk_live_YOUR_SITE_KEY with your key from app.elnudge.com → your site → Install.

Use sk_test_XXXXXXXX on staging environments.


2. Fire CART_ADD via woocommerce_add_to_cart

WooCommerce fires woocommerce_add_to_cart server-side after every add-to-cart action, including AJAX requests. Use this hook to inject a small inline script that elNudge picks up on the next page load.

<?php
function elnudge_track_cart_add( $cart_item_key, $product_id, $quantity, $variation_id ) {
    $product   = wc_get_product( $product_id );
    $variation = $variation_id ? wc_get_product( $variation_id ) : null;

    $price    = $variation ? $variation->get_price() : $product->get_price();
    $currency = get_woocommerce_currency();
    $name     = $product->get_name();
    $variant  = $variation ? implode( ', ', $variation->get_variation_attributes() ) : '';

    // Store event payload in session; output it via wp_footer
    WC()->session->set( 'elnudge_cart_add', [
        'product_id'   => (string) $product_id,
        'product_name' => $name,
        'variant'      => $variant,
        'price'        => number_format( (float) $price, 2, '.', '' ),
        'currency'     => $currency,
        'quantity'     => (int) $quantity,
    ] );
}
add_action( 'woocommerce_add_to_cart', 'elnudge_track_cart_add', 10, 4 );

function elnudge_output_cart_add_event() {
    $payload = WC()->session ? WC()->session->get( 'elnudge_cart_add' ) : null;
    if ( ! $payload ) {
        return;
    }
    WC()->session->set( 'elnudge_cart_add', null );
    $json = wp_json_encode( $payload );
    ?>
    <script>
      if (window.__eln) {
        window.__eln('track', 'CART_ADD', <?php echo $json; ?>);
      }
    </script>
    <?php
}
add_action( 'wp_footer', 'elnudge_output_cart_add_event' );

Handling WooCommerce AJAX cart updates

When a visitor adds to cart via AJAX (the default on most themes), WooCommerce fires woocommerce_add_to_cart server-side but returns a JSON response — the page does not reload, so wp_footer does not run. To fire the event in this case, add a small frontend listener:

// In your theme's JS (e.g., assets/js/theme.js or a <script> embed)
jQuery(document.body).on('added_to_cart', function (event, fragments, cart_hash, button) {
  var productId   = button.data('product_id') || button.closest('form').find('[name="product_id"]').val();
  var productName = button.closest('.product').find('.product_title').text().trim();
  var price       = button.closest('.product').find('.price .woocommerce-Price-amount').first().text()
                        .replace(/[^0-9.]/g, '');

  if (window.__eln && productId) {
    window.__eln('track', 'CART_ADD', {
      product_id:   String(productId),
      product_name: productName,
      variant:      '',
      price:        price,
      currency:     wc_cart_fragments_params.currency || '',
      quantity:     parseInt(button.val(), 10) || 1,
    });
  }
});

If your theme's AJAX returns richer product data, populate the fields from that response instead.


3. Fire PURCHASE via woocommerce_thankyou

The woocommerce_thankyou hook fires once when the order confirmation page renders. Use it to output the PURCHASE event:

<?php
function elnudge_track_purchase( $order_id ) {
    $order = wc_get_order( $order_id );
    if ( ! $order ) {
        return;
    }

    // Guard against duplicate fires (e.g., visitor refreshes thank-you page)
    $already_tracked = $order->get_meta( '_elnudge_purchase_tracked' );
    if ( $already_tracked ) {
        return;
    }
    $order->update_meta_data( '_elnudge_purchase_tracked', '1' );
    $order->save();

    $payload = wp_json_encode( [
        'order_value' => number_format( (float) $order->get_total(), 2, '.', '' ),
        'currency'    => $order->get_currency(),
        'item_count'  => $order->get_item_count(),
    ] );
    ?>
    <script>
      if (window.__eln) {
        window.__eln('track', 'PURCHASE', <?php echo $payload; ?>);
      }
    </script>
    <?php
}
add_action( 'woocommerce_thankyou', 'elnudge_track_purchase' );

Quiet zones

Suppress nudges on WordPress admin and login pages, and any other paths that should be free of nudges:

<?php
function elnudge_add_sdk() {
    if ( is_admin() ) {
        return; // Never loads on /wp-admin/*
    }
    $quiet_zones = '/wp-login.php,/account,/my-account/*,/cart';
    ?>
    <script>
      (function(w,d,s,k){
        w.__eln=w.__eln||function(){(w.__eln.q=w.__eln.q||[]).push(arguments)};
        var t=d.createElement(s);t.async=1;
        t.src='https://cdn.elnudge.com/v1/sdk.js';
        t.setAttribute('data-site-key',k);
        t.setAttribute('data-quiet-zones','<?php echo esc_attr( $quiet_zones ); ?>');
        d.head.appendChild(t);
      })(window,document,'script','sk_live_YOUR_SITE_KEY');
    </script>
    <?php
}
add_action( 'wp_head', 'elnudge_add_sdk' );

You can also manage quiet zones from app.elnudge.com → your site → Engagement Rules → Quiet Zones. Dashboard settings take precedence over the attribute.


Verification steps

  1. Activate debug mode by temporarily changing sk_live_YOUR_SITE_KEY to include data-debug="true" — or add t.setAttribute('data-debug','true'); to the loader snippet.
  2. Visit your storefront. In the browser console, confirm:
    typeof window.__eln === 'function' // true
  3. Add a product to your cart. Watch for an elNudge CART_ADD log in the console (debug mode) or check the Live view in the dashboard.
  4. Complete a test purchase (WooCommerce → enable cheque/BACS payment for testing). Confirm the PURCHASE event fires on the thank-you page.
  5. Visit /wp-login.php and /wp-admin/ — the console should show no elNudge activity.
  6. In app.elnudge.com → your site → Live, your session should appear within seconds.