WooCommerce: Add Different Facebook Pixels to Different Pages

Last week a client who was about to carry a Facebook Advertising campaign asked me something pretty interesting. We already saw in the past how to add conversion tracking to the Thank-you page, however this time was slightly different.

My client’s FB consultant required a code for the whole site, another code for the Checkout page only (“user has initiated checkout”), and another one for the Thank-you page (“user has purchased”). So, here’s how I did it.

WooCommerce: add different Facebook Tracking codes to different pages
WooCommerce: add different Facebook Tracking codes to different pages

Thinking out loud: conditional logic

When you code in WooCommerce you always need to ask yourself a question: does your snippet need to run on every page of the website?

If the answer is no, you probably heard already of conditional logic (I covered WooCommerce conditional logic in a previous tutorial). And this case is no different.

We need a different Facebook tracking code for:

  1. the whole site, excluding checkout & thank you page
  2. the Checkout page only
  3. the Thank-you page only

So the trick is basically finding what’s the ideal PHP to execute something along the lines of: IF (CONDITION) > THEN (ECHO THIS).

If you took a look at my tutorial, the conditional tag to target the checkout page is: is_checkout(). Problem is, this targets the Thank-you page as well (they have the same page ID!). So I had to use another conditional tag, called is_wc_endpoint_url( ‘order-received’ ), which targets exclusively that “endpoint”.

Ok, let’s see how the PHP works 🙂

PHP snippet: Add Different Facebook Pixels to Different WooCommerce Pages


/**
 * @snippet       Add Different Facebook Pixels to Different WooCommerce Pages
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=21309
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 2.6.8
 */

add_action( 'wp_head', 'bbloomer_head_conditional_fb_pixel' );

function bbloomer_head_conditional_fb_pixel() {

if ( is_checkout() && !is_wc_endpoint_url( 'order-received' ) ) {
	
// FIRST WE TARGET THE CHECKOUT PAGE WITH is_checkout()
// AND WE MAKE SURE TO EXCLUDE THE THANK YOU PAGE

	?>
		<!-- Facebook Pixel Code for Initiated Checkout -->
		<!-- End Facebook Pixel Code -->
	<?php } elseif ( is_wc_endpoint_url( 'order-received' ) ) { // THEN WE TARGET THE THANK YOU PAGE ONLY ?>
		<!-- Facebook Pixel Code for Conversions -->
		<!-- End Facebook Pixel Code -->
	<?php } else { // FINALLY WE TARGET ALL THE OTHER PAGES ?>
		<!-- Facebook Pixel Code for Rest of Website -->
		<!-- End Facebook Pixel Code -->
	<?php
} 
        
}

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7+.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce Customization?

Check out these free video tutorials. You can start learning how to customize WooCommerce without unnecessary plugins. Watch me code and learn by example!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

6 thoughts on “WooCommerce: Add Different Facebook Pixels to Different Pages

  1. Hi Rodolfo,

    I have 2 pixels on my woocommerce pages. I detected it with Facebook pixel helper. I installed my pixel with “Facebook for woocommerce” plugin.

    The other pixel id, I don’t know where it came from. Please how can I detect and remove it.

    1. Hi Anthony, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  2. Where am I supposed to add the facebook pixel inside this code?
    Because if I just copy and paste this code, as there is no pixel included in the code, it does absolutely nothing.

    1. Nerea, thanks so much for your comment! Where do you need to add the pixel, and how does it look?

  3. Thanks for this Rodolfo! Could come in handy later…

    1. Thanks for your feedback Jan!

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

Your email address will not be published. Required fields are marked *