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 custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce Conditional Logic – Tags, Examples & PHP
    The WooCommerce and WordPress conditional tags (“WooCommerce and WordPress Conditional Logic”) can be used in your functions.php to display content based on certain conditions. For example, you could display different content for different categories within a single PHP function.
  • WooCommerce: Show Message Upon Country Selection @ Checkout
    If you have country-specific shipping conditions, or you want to show a message conditionally after country selection on the checkout page, here’s a simple WooCommerce PHP snippet you can freely use. This can be slightly customized to target state selection instead. I’ve also edited the initial code to make this work on load as well, […]
  • WooCommerce: Per-Product Terms & Conditions @ Checkout
    A freelance client sells two distinct products on the same website: a membership and an online course. Two different audiences, different formats and… different Terms & Conditions. The goal was therefore to display the “Terms & Conditions” checkbox on the Checkout page based on the product in the cart. Once again, we’re going to use […]
  • WooCommerce: How to Enable Catalog Mode?
    One of the most common WooCommerce questions is: can I use WooCommerce to build a catalog of products (without add to cart, price… basically a product gallery)? Using WooCommerce for this case scenario is indeed very helpful – you can make the most of all the inbuilt features such as single product gallery and carousel, […]
  • WooCommerce: Display Different Widgets Based On Product Category
    Using Widget Logic, you can easily set what widget you want to display based on what WooCommerce product categories users are browsing. For example, you can set what widgets users will see when he will land to the “Book” product category page. These widgets will not be visible in other pages, it will be only […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent 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. Follow @rmelogli

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? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

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