Unleashing E-commerce Success: The Power of Freelance Web Development Specialising in WooCommerce in Bristol
In the ever-evolving world of e-commerce, having a robust and flexible platform...
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
Share
In the ever-evolving world of e-commerce, having a robust and flexible platform...
In the thriving city of Bristol, businesses are constantly seeking innovative ways...
In today's digital age, having a strong online presence is crucial for...
Fed up of getting the W3 Validator warning "The type attribute is unnecessary..."? Here is a handy bit of code to...
For me, the ACF plugin is a standard install for every WordPress project. Its a great tool for developers to...
Get the featured image dimensions (width and height) in WordPress. Paste the following code in the single.php file. <?php $post_id...