WooCommerce: Hide or show products / content based on a cookie

Need a bespoke WooCommerce site with dynamic content for two types of visitor?

For example, this is from a recent freelance web design project for a company near Bristol. It’s handy if you have Trade and Non-Trade customers and want to deliver a “sitewide” experience for each. The ideal scenario is when you land on the site, you have 2 buttons, “Trade” and “Non-Trade”. Depending on which one you choose drops/switches a cookie and delivers bespoke products and content.

The best way to deliver the correct products depending on which cookie is set, is to hook in to the core WooCommerce product loop parameters and filter the results.

First off, you will need to create a radio button for your products using ACF. Then set each product to show, hide or display on both.

Download js-cookie https://github.com/js-cookie/js-cookie and add the cookie functions for each button to your custom js file.

<script>

jQuery(document).ready(function(){

jQuery('a.trade').click(function() {

	jQuery.removeCookie('NONTRADE', { path: '/' });

	var trade = 'trade';
 	jQuery.cookie('TRADE',trade, { expires: 7, path: '/' });
 	jQuery('body').addClass(trade); // Adds the cookie class to the body for good measure

});

jQuery('a.nonTrade').click(function() {

	jQuery.removeCookie('TRADE', { path: '/' });

	var nontrade = 'nontrade';
 	jQuery.cookie('NONTRADE',nontrade, { expires: 7, path: '/' });
 	jQuery('body').addClass(nontrade); // Adds the cookie class to the body for good measure

});

</script>

The place this in your functions.php file.

<?php

add_action( 'woocommerce_product_query', 'tradehide_product_query' );

function tradehide_product_query( $q ){

	$meta_query = $q->get( 'meta_query' );

	if (isset($_COOKIE['TRADE'])) :

	   $meta_query[] = array(
			
           'relation' => 'OR',
            array(
            'key'     => 'acf_radio_fieldname',
            'value'   => 'trade',
            'compare' => 'LIKE'
            ),
            array(
            'key'     => 'acf_radio_fieldname',
            'value'   => 'both',
            'compare' => 'LIKE'
            )
                        
        );		

	elseif (isset($_COOKIE['NONTRADE'])) :

		$meta_query[] = array(
			
            'relation' => 'OR',
            array(
            'key'     => 'acf_radio_fieldname',
            'value'   => 'nontrade',
            'compare' => 'LIKE'
            ),
            array(
            'key'     => 'acf_radio_fieldname',
            'value'   => 'both',
            'compare' => 'LIKE'
            )
            
        );

	endif;
	
	
	$q->set( 'meta_query', $meta_query );

}

You can also use this anywhere in your templates to hide or show content:

<?php if (isset($_COOKIE['TRADE'])) : ?>

  // Your trade content

<?php elseif (isset($_COOKIE['NONTRADE'])) : ?>

  // Your non-trade content

<?php endif; ?>

ACF, Coding Tips, jQuery, PHP, WooCommerce Tips