How to add custom JavaScript to WooCommerce Thank you Page?


First things first, why would you need to add a JavaScript snippet to your Thank you page?


Well in my case, I wanted to add a piece of code that sends revenue data to FigPii.

This allows users to measure the revenue impact of A/B tests running on their WooCommerce website.


You can add a PHP snippet to your function.php file but if you update your theme it'll disappear so the best way to go forward is to create a plugin that'll add the code.


Create a file called custom_code.php and start editing it in your favorite IDE.


Start by adding this snippet to your file so direct access to the file is not allowed:


if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

Then edit the Plugin name and all the other information you see bellow:

<?php
/**
 * Plugin Name: FigPii
 * Plugin URI: https://figpii.com
 * Description: FigPii integration for WooCommerce.
 * Author: FigPii
 * Author URI: https://figpii.com/
 * Version: 1.0
 * Text Domain: figpii
 * Domain Path: /languages/
 *
 * License: GNU General Public License v3.0
 * License URI: http://www.gnu.org/licenses/gpl-3.0.html
 *
 * Woo: 12345:342928dfsfhsf8429842374wdf4234sfd
 * WC requires at least: 3.0
 * WC tested up to: 5.8.0
 *
 * License: GNU General Public License v3.0
 * License URI: http://www.gnu.org/licenses/gpl-3.0.html
 */

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

Let's create our function now:


function build_revenue_tracking_script($order_id)
{

    $order = wc_get_order($order_id);

    $order_total = $order->get_total();;

    echo "
    <script>let order_total = \"$order_total\";window._fpEvent=window._fpEvent||[];window._fpEvent.push([\"processOrder\",{revenue: order_total}]);window._fpEvent.push([\"eventConversion\",{value:\"purchase\"}]);</script>
  ";

}

What this does is take the $order_id from the thank you page, then using wc_get_order we're going to retrieve order data, in my case only the total order amount is needed but you can fetch other related data, such as item name, product id and so on.


$order = wc_get_order( 65 );

$order_items = $order->get_items();

foreach( $order_items as $item_id => $item ){

	// methods of WC_Order_Item class

	// The element ID can be obtained from an array key or from:
	$item_id = $item->get_id();

	// methods of WC_Order_Item_Product class

	$item_name = $item->get_name(); // Name of the product
	$item_type = $item->get_type(); // Type of the order item ("line_item")

	$product_id = $item->get_product_id(); // the Product id
	$wc_product = $item->get_product();    // the WC_Product object

	// order item data as an array
	$item_data = $item->get_data();

	echo $item_data['name'];
	echo $item_data['product_id'];
	echo $item_data['variation_id'];
	echo $item_data['quantity'];
	echo $item_data['tax_class'];
	echo $item_data['subtotal'];
	echo $item_data['subtotal_tax'];
	echo $item_data['total'];
	echo $item_data['total_tax'];

}

Having the $order_id is crucial for our function to work so make sure to add the following action above your main function:


add_action('woocommerce_thankyou', 'build_revenue_tracking_script');

At the end you'll have something that looks like this:



<?php
/**
 * Plugin Name: FigPii
 * Plugin URI: https://figpii.com
 * Description: FigPii integration for WooCommerce.
 * Author: FigPii
 * Author URI: https://figpii.com/
 * Version: 1.0
 * Text Domain: figpii
 * Domain Path: /languages/
 *
 * License: GNU General Public License v3.0
 * License URI: http://www.gnu.org/licenses/gpl-3.0.html
 *
 * Woo: 12345:342928dfsfhsf8429842374wdf4234sfd
 * WC requires at least: 3.0
 * WC tested up to: 5.8.0
 *
 * License: GNU General Public License v3.0
 * License URI: http://www.gnu.org/licenses/gpl-3.0.html
 */

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

add_action('woocommerce_thankyou', 'build_revenue_tracking_script');

function build_revenue_tracking_script($order_id)
{

    $order = wc_get_order($order_id);

    $order_total = $order->get_total();;

    echo "
    <script>let order_total = \"$order_total\";window._fpEvent=window._fpEvent||[];window._fpEvent.push([\"processOrder\",{revenue: order_total}]);window._fpEvent.push([\"eventConversion\",{value:\"purchase\"}]);</script>
  ";

}

?>

Then all you need to do is to compress this file and install it manually on your WordPress / WooCommerce instance.

This function will fetch the order total based on the order id and add the data to our custom revenue tracking code.


47 views

Related Posts

See All