Woocommerce Archives

Custom Woocommerce ACF Category Filters

We had a client recently that needed to be able to create product filters based on the product categories they were assigned to. This presented a problem because we didn’t want to clog up the taxonomy / category pages with a bunch of filter options and the user also needed to be able to edit these categories in the future.

We took the approach of adding some ACF fields to the product categories and then inserting a meta box on the products based on their selected categories which would list the ACF fields as checkboxes, similar to selecting a taxonomy.

It is hard to explain so here is a bunch of code and images to explain.

Here is our custom meta box displaying the filters that were created in the category page. Notice this is actually displaying the filters from ALL selected categories.

Here are the filters created in one category.

This is what the front end looks like. The checkboxes are FontAwesome icons.

Finally, here is the code needed to accomplish this.

All of this code goes into your “functions.php” file

/**
 * Adds a metabox to the product pages to list the available filters
 * @link: https://wptheming.com/2010/08/custom-metabox-for-post-type/
 */
add_action( 'add_meta_boxes', 'jb_add_filter_metaboxes' );
function jb_add_filter_metaboxes() {
	add_meta_box(
		'jb_product_filters',
		'Product Filters',
		'jb_product_filters',
		'product',
		'side',
		'default'
	);
}

/**
 * Build the filter selection functionality
 * @link: https://wptheming.com/2010/08/custom-metabox-for-post-type/
 */
function jb_product_filters() {
	global $post;
	$terms = wp_get_post_terms($post->ID, 'product_cat', array( 'fields' => 'ids' ));

	$filters = array();
	foreach($terms as $term_id){
		$filter = get_field('filters', 'term_'. $term_id);
		if(! empty($filter)){
			$filters = array_merge($filters, $filter);
		}
	}

	if(! empty($filters)){
		foreach($filters as $filter){
			$meta_key = sanitize_title( $filter['filter_name'] );
			$current_filters = get_post_meta( $post->ID, $meta_key, true );

			if(! empty($current_filters)){
				$current_filters = explode(',',$current_filters);
			}else{
				$current_filters = array();
			}

			echo '<p style="font-weight: bold; margin: 0;">'.$filter['filter_name'].'</p>';

			echo '<ul id="product_filters" class="categorychecklist form-no-clear" style="margin: 0 0 20px;">';
			
			if(! empty($filter['filter_options'])){
				foreach($filter['filter_options'] as $option){
					echo '<li class="wpseo-term-unchecked">
							<label class="selectit">
								<input value="'.$option['option'].'" '.(in_array($option['option'], $current_filters)?'checked="checked"':'').' type="checkbox" name="jb_filter['.$meta_key.'][]"> '.$option['option'].'</label>
							</li>';
				}
			}
				
			echo '</ul>';
		}
	}
}

/**
 * Save the filter information as meta_data that we can query later
 * @link: https://wptheming.com/2010/08/custom-metabox-for-post-type/
 */
add_action( 'save_post', 'jb_save_filter_meta', 1, 2 );
function jb_save_filter_meta( $post_id, $post ) {
	if ( 'revision' === $post->post_type ) {
		return;
	}

	// Return if the user doesn't have edit permissions.
	if ( ! current_user_can( 'edit_post', $post_id ) ) {
		return $post_id;
	}

	// Now that we're authenticated, time to save the data.
	$filter_meta = $_POST['jb_filter'];

	// Cycle through the $filter_meta array.
	foreach ( $filter_meta as $key => $value ) :
		
		$value = implode(',',$value);

		if ( get_post_meta( $post_id, $key, false ) ) {
			// If the custom field already has a value, update it.
			update_post_meta( $post_id, $key, $value );
		} else {
			// If the custom field doesn't have a value, add it.
			add_post_meta( $post_id, $key, $value);
		}
		if ( ! $value ) {
			// Delete the meta key if there's no value
			delete_post_meta( $post_id, $key );
		}
	endforeach;
}

/**
 * Filter products based on submitted filters
 */
add_action( 'pre_get_posts', 'jb_filter_products' );
function jb_filter_products( $query ) {
	if(is_tax()){

		if(! empty($_POST['psearch'])){
			$query->set('s', $_POST['psearch'] );
		}

		if(! empty($_POST['jb_filter'])){
			$meta_query = array('relation' => 'AND');

			foreach($_POST['jb_filter'] as $key => $filter){
				foreach($filter as $value){
					$meta_query[] = array(
						'key'     => $key,
						'compare' => 'LIKE',
						'value'   => $value
					);
				}
				
			}

			$query->set( 'meta_query', $meta_query );
		}

	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

/**

* Adds a metabox to the product pages to list the available filters

* @link: https://wptheming.com/2010/08/custom-metabox-for-post-type/

add_action( 'add_meta_boxes', 'jb_add_filter_metaboxes' );

function jb_add_filter_metaboxes() {

add_meta_box(

'jb_product_filters',

'Product Filters',

'jb_product_filters',

'product',

'side',

'default'

);

}

/**

* Build the filter selection functionality

* @link: https://wptheming.com/2010/08/custom-metabox-for-post-type/

function jb_product_filters() {

global $post;

$terms = wp_get_post_terms($post->ID, 'product_cat', array( 'fields' => 'ids' ));

$filters = array();

foreach($terms as $term_id){

$filter = get_field('filters', 'term_'. $term_id);

if(! empty($filter)){

$filters = array_merge($filters, $filter);

}

if(! empty($filters)){

foreach($filters as $filter){

$meta_key = sanitize_title( $filter['filter_name'] );

$current_filters = get_post_meta( $post->ID, $meta_key, true );

if(! empty($current_filters)){

$current_filters = explode(',',$current_filters);

}else{

$current_filters = array();

}

echo '<p style="font-weight: bold; margin: 0;">'.$filter['filter_name'].'</p>';

echo '<ul id="product_filters" class="categorychecklist form-no-clear" style="margin: 0 0 20px;">';

if(! empty($filter['filter_options'])){

foreach($filter['filter_options'] as $option){

echo '<li class="wpseo-term-unchecked">

<input value="'.$option['option'].'" '.(in_array($option['option'], $current_filters)?'checked="checked"':'').' type="checkbox" name="jb_filter['.$meta_key.'][]"> '.$option['option'].'</label>

</li>';

}

echo '</ul>';

}

/**

* Save the filter information as meta_data that we can query later

* @link: https://wptheming.com/2010/08/custom-metabox-for-post-type/

add_action( 'save_post', 'jb_save_filter_meta', 1, 2 );

function jb_save_filter_meta( $post_id, $post ) {

if ( 'revision' === $post->post_type ) {

return;

}

// Return if the user doesn't have edit permissions.

if ( ! current_user_can( 'edit_post', $post_id ) ) {

return $post_id;

}

// Now that we're authenticated, time to save the data.

$filter_meta = $_POST['jb_filter'];

// Cycle through the $filter_meta array.

foreach ( $filter_meta as $key => $value ) :

$value = implode(',',$value);

if ( get_post_meta( $post_id, $key, false ) ) {

// If the custom field already has a value, update it.

update_post_meta( $post_id, $key, $value );

} else {

// If the custom field doesn't have a value, add it.

add_post_meta( $post_id, $key, $value);

}

if ( ! $value ) {

// Delete the meta key if there's no value

delete_post_meta( $post_id, $key );

}

endforeach;

}

/**

* Filter products based on submitted filters

add_action( 'pre_get_posts', 'jb_filter_products' );

function jb_filter_products( $query ) {

if(is_tax()){

if(! empty($_POST['psearch'])){

$query->set('s', $_POST['psearch'] );

}

if(! empty($_POST['jb_filter'])){

$meta_query = array('relation' => 'AND');

foreach($_POST['jb_filter'] as $key => $filter){

foreach($filter as $value){

$meta_query[] = array(

'key' => $key,

'compare' => 'LIKE',

'value' => $value

);

}

$query->set( 'meta_query', $meta_query );

}

Here is an example of what the front end HTML might look like.

<form id="filter-form" action="<?php echo $_SERVER[REQUEST_URI]; ?>" method="post">
	<div class="search-input">
		<div class="input-group mb-3">
			<input type="text" maxlength="30" class="form-control" id="basic-url" placeholder="Search" name="psearch" value="<?php echo $_POST['psearch']; ?>">
			<div class="input-group-append">
				<button type="submit" class="input-group-text" id="basic-addon2"><i class="far fa-search"></i></button>
			</div>
		</div>
	</div>
	<?php if(! empty($filters)): ?>
		<div class="filter-wrapper">
			<?php 
				foreach($filters as $filter){
					$meta_key = sanitize_title( $filter['filter_name'] );

					echo '<p style="font-weight: bold; margin: 0;">'.$filter['filter_name'].'</p>';

					echo '<ul id="product_filters" class="categorychecklist form-no-clear" style="margin: 0 0 20px;">';
					
					//'.(in_array($option['option'], $current_filters)?'checked="checked"':'').'
					if(! empty($filter['filter_options'])){
						foreach($filter['filter_options'] as $okey => $option){
							echo '<li>
									<input value="'.$option['option'].'" '.(is_array($_POST['jb_filter'][$meta_key]) && in_array($option['option'], $_POST['jb_filter'][$meta_key])?'checked="checked"':'').' id="'.$meta_key.'-'.$okey.'" type="checkbox" class="awesomebox" name="jb_filter['.$meta_key.'][]"><label for="'.$meta_key.'-'.$okey.'" class="selectit">'.$option['option'].'</label>
								</li>';
						}
					}
						
					echo '</ul>';
				}
			?>
		</div>
	<?php endif; ?>
</form>

<form id="filter-form" action="<?php echo $_SERVER[REQUEST_URI]; ?>" method="post">

</div>

<?php if(! empty($filters)): ?>

<?php

foreach($filters as $filter){

$meta_key = sanitize_title( $filter['filter_name'] );

echo '<p style="font-weight: bold; margin: 0;">'.$filter['filter_name'].'</p>';

echo '<ul id="product_filters" class="categorychecklist form-no-clear" style="margin: 0 0 20px;">';

//'.(in_array($option['option'], $current_filters)?'checked="checked"':'').'

if(! empty($filter['filter_options'])){

foreach($filter['filter_options'] as $okey => $option){

echo '<li>

<input value="'.$option['option'].'" '.(is_array($_POST['jb_filter'][$meta_key]) && in_array($option['option'], $_POST['jb_filter'][$meta_key])?'checked="checked"':'').' id="'.$meta_key.'-'.$okey.'" type="checkbox" class="awesomebox" name="jb_filter['.$meta_key.'][]"><label for="'.$meta_key.'-'.$okey.'" class="selectit">'.$option['option'].'</label>

</li>';

}

echo '</ul>';

}

</div>

<?php endif; ?>

</form>

Reorder Posts By Menu Order, then Post Title

This can be done using $args = array( ‘orderby’ => array(‘menu_order’,’title’)) however then you are using a 0 index menu_order (0 menu order goes first) and the first letter of the post title (rather than by say, the last name in the post title). So this is just a function to give a little more control over that ordering

//sort our posts by their menu_order then by alpha value
function jb_reorder_posts($a, $b){
	
	//First take anyone with a menu order and order then first
	if($a->menu_order && ! $b->menu_order){
		return -1;
	}else if(! $a->menu_order && $b->menu_order){
		return 1;
	}else if($a->menu_order > $b->menu_order){
		return 1;
	}else if($a->menu_order < $b->menu_order){
		return -1;
	}

	//if neither person has a menu order, order by last name
	//$a_last_name = end(explode(' ', $a->post_title));
	//$b_last_name = end(explode(' ', $b->post_title));

	//return strcmp($a_last_name, $b_last_name);
        return strcmp($a->post_title, $b->post_title);
}

//Using WP_Query
usort($new_query->posts, 'jb_reorder_posts' );

//Using get_posts()
usort($posts, 'jb_reorder_posts' );

//sort our posts by their menu_order then by alpha value

function jb_reorder_posts($a, $b){

//First take anyone with a menu order and order then first

if($a->menu_order && ! $b->menu_order){

return -1;

}else if(! $a->menu_order && $b->menu_order){

return 1;

}else if($a->menu_order > $b->menu_order){

return 1;

}else if($a->menu_order < $b->menu_order){

return -1;

}

//if neither person has a menu order, order by last name

//$a_last_name = end(explode(' ', $a->post_title));

//$b_last_name = end(explode(' ', $b->post_title));

//return strcmp($a_last_name, $b_last_name);

return strcmp($a->post_title, $b->post_title);

}

//Using WP_Query

usort($new_query->posts, 'jb_reorder_posts' );

//Using get_posts()

usort($posts, 'jb_reorder_posts' );

List Woocommerce Cart Item Attributes

90% of the time I am very thankful for plugins like Woocommerce, that handle so much of the architecture associated with an e-commerce site.

10% of the time I curse their name in the more profane manner possible. This seems to happen most often when using variable products.

For reasons that defy reason, Woocommerce does not list the variable product’s attributes when it is in your cart. There is also no Woocommerce function, afaik, to easily list a cart items selected attributes. Why on earth would someone want to know what type of product they put in their cart! Bah!

Anyway, here is some simple code to list the attributes for the variable products in your cart:

//inside of the /themes/woocommerce/cart.php template
//usually in the "name" or "details" area

$item_data = $cart_item['data'];
$attributes = $item_data->get_attributes();
foreach ( $attributes as $attribute => $attribute_name ) {
	$term = get_term_by('slug', $attribute_name, $attribute);

	echo wc_attribute_label( $attribute ).': '.$term->name;

}

//inside of the /themes/woocommerce/cart.php template

//usually in the "name" or "details" area

$item_data = $cart_item['data'];

$attributes = $item_data->get_attributes();

foreach ( $attributes as $attribute => $attribute_name ) {

$term = get_term_by('slug', $attribute_name, $attribute);

echo wc_attribute_label( $attribute ).': '.$term->name;

}

Hopefully that will save you 1% more time of cursing the name Woocommerce!

Add Custom Fields to Woo Variations

Sometimes each variation needs its own custom fields. Say if you need to add a unique UPC or EAN code. This turned out to be surprisingly simple. Thanks to Remi Corson for the code.

/**
 * Add a UPC and EAN meta fields to variations
 *
 * Tutorial: http://www.remicorson.com/woocommerce-custom-fields-for-variations/
 */

add_action( 'woocommerce_product_after_variable_attributes', 'jb_woo_variation_add_upc_and_ean_fields', 10, 3);
function jb_woo_variation_add_upc_and_ean_fields($loop, $variation_data, $variation) {
	woocommerce_wp_text_input( array(
      'id' => '_upc[' . $variation->ID . ']',
      'label' => 'UPC',
      'description' => '',
      'desc_tip' => 'false',
      'value' => get_post_meta( $variation->ID, '_upc', true ),
      'placeholder' => '',
      'wrapper_class' => 'form-row form-row-first',
      'type' => 'text'
    ));

    woocommerce_wp_text_input( array(
      'id' => '_ean[' . $variation->ID . ']',
      'label' => 'EAN',
      'description' => '',
      'desc_tip' => 'false',
      'value' => get_post_meta( $variation->ID, '_ean', true ),
      'placeholder' => '',
      'wrapper_class' => 'form-row form-row-last',
      'type' => 'text'
    ));
}

//save the new meta data to the variations
add_action( 'woocommerce_save_product_variation', 'jb_woo_add_unit_size_field_save' );
function jb_woo_add_unit_size_field_save($post_id){
	$upc = $_POST['_upc'][ $post_id ];
	if ( ! empty( $_POST['_upc'] ) ) {
		update_post_meta( $post_id, '_upc', esc_attr( $upc ) );
	}

	$ean = $_POST['_ean'][ $post_id ];
	if ( ! empty( $_POST['_ean'] ) ) {
		update_post_meta( $post_id, '_ean', esc_attr( $ean ) );
	}
}

/**

* Add a UPC and EAN meta fields to variations

* Tutorial: http://www.remicorson.com/woocommerce-custom-fields-for-variations/

add_action( 'woocommerce_product_after_variable_attributes', 'jb_woo_variation_add_upc_and_ean_fields', 10, 3);

function jb_woo_variation_add_upc_and_ean_fields($loop, $variation_data, $variation) {

woocommerce_wp_text_input( array(

'id' => '_upc[' . $variation->ID . ']',

'label' => 'UPC',

'description' => '',

'desc_tip' => 'false',

'value' => get_post_meta( $variation->ID, '_upc', true ),

'placeholder' => '',

'wrapper_class' => 'form-row form-row-first',

'type' => 'text'

));

woocommerce_wp_text_input( array(

'id' => '_ean[' . $variation->ID . ']',

'label' => 'EAN',

'description' => '',

'desc_tip' => 'false',

'value' => get_post_meta( $variation->ID, '_ean', true ),

'placeholder' => '',

'wrapper_class' => 'form-row form-row-last',

'type' => 'text'

));

}

//save the new meta data to the variations

add_action( 'woocommerce_save_product_variation', 'jb_woo_add_unit_size_field_save' );

function jb_woo_add_unit_size_field_save($post_id){

$upc = $_POST['_upc'][ $post_id ];

if ( ! empty( $_POST['_upc'] ) ) {

update_post_meta( $post_id, '_upc', esc_attr( $upc ) );

}

$ean = $_POST['_ean'][ $post_id ];

if ( ! empty( $_POST['_ean'] ) ) {

update_post_meta( $post_id, '_ean', esc_attr( $ean ) );

}

PS. You should check out Remi’s page for pretty much ANYTHING Woocommerce related. It is basically an infinite well of Woo knowledge.

Slick Carousel Basic Usage

Slick Carousel is pretty awesome. Not great in every instance but perfect for many. It is also very mobile friendly including swipe events.

Here is some basic setup code to get the slick slider working. This is being used in combination with Woocommerce thumbnails.

<div id="mobile-thumbnails">
	<div class="slick-slider">
		<?php
                        //getting all images attached to this post
			foreach ( $attachment_ids as $attachment_id ) {
				$image_link = wp_get_attachment_url( $attachment_id );
				if ( ! $image_link )
					continue;
				//$image       = wp_get_attachment_image( $attachment_id, apply_filters( 'thumbnail', 'thumbnail' ) );
				$image       = wp_get_attachment_image( $attachment_id, apply_filters( 'large', 'large' ) );
				//$image_class = esc_attr( implode( ' ', $classes ) );
				$image_class = "";
				//$image_title = esc_attr( get_the_title( $attachment_id ) );
				
				//echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>', $image_link, $image_class, $image_title, $image ), $attachment_id, $post->ID, $image_class );
				echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<div class="slick-image">%s</div>', $image ), $attachment_id, $post->ID, $image_class );
	
			}
		?>
	</div>
</div>

<?php

//getting all images attached to this post

foreach ( $attachment_ids as $attachment_id ) {

$image_link = wp_get_attachment_url( $attachment_id );

if ( ! $image_link )

continue;

//$image = wp_get_attachment_image( $attachment_id, apply_filters( 'thumbnail', 'thumbnail' ) );

$image = wp_get_attachment_image( $attachment_id, apply_filters( 'large', 'large' ) );

//$image_class = esc_attr( implode( ' ', $classes ) );

$image_class = "";

//$image_title = esc_attr( get_the_title( $attachment_id ) );

//echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>', $image_link, $image_class, $image_title, $image ), $attachment_id, $post->ID, $image_class );

echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<div class="slick-image">%s</div>', $image ), $attachment_id, $post->ID, $image_class );

}

</div>

Now just initialize this slider somewhere.

jQuery(document).ready(function($){
      $('.slick-slider').slick({
        dots: true,
        adaptiveHeight: true,
        arrows: false
      });
});

jQuery(document).ready(function($){

$('.slick-slider').slick({

dots: true,

adaptiveHeight: true,

arrows: false

});

Add Custom Value to Woocommerce Order

Woocommerce documentation, while thorough, can be hard to follow sometimes. Here are some functions I found somewhere on the Woocommerce site (which I can never find) that allows adding some custom values to the checkout order form and then attaching that value to the order.

/**
 * Add the field to the checkout
 */

add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );
 
function my_custom_checkout_field( $checkout ) {
 
    echo '<div id="my_custom_checkout_field"><h2>' . __('Gift Card') . '</h2>';
 
    woocommerce_form_field( 'my_field_name', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Have a gift card?'),
        'placeholder'   => __(''),
        ), $checkout->get_value( 'giftcard' ));
 
    echo '</div>';
 
}

/**
 * Validate Gift Card
 */
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
 
function my_custom_checkout_field_process() {
    // Check if set, if its not set add an error.
    if ( ! $_POST['my_field_name'] )
        wc_add_notice( __( 'Please enter something into this new shiny field.' ), 'error' );
}

/**
 * Update the order meta with field value
 */
add_action( 'woocommerce_checkout_update_order_meta', 'my_update_order_meta' );
 
function my_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['giftcard'] ) ) {
        //woocommerce solution
        //update_post_meta( $order_id, 'gift_card', sanitize_text_field( $_POST['giftcard'] ) );
        
        //while these 2 statements probably do much the same thing I like to use the ACF fields to track meta data 
        update_field('gift_card', $_POST['giftcard'], $order_id);
    }
}

/**

* Add the field to the checkout

add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );

function my_custom_checkout_field( $checkout ) {

echo '<div id="my_custom_checkout_field"><h2>' . __('Gift Card') . '</h2>';

woocommerce_form_field( 'my_field_name', array(

'type' => 'text',

'class' => array('my-field-class form-row-wide'),

'label' => __('Have a gift card?'),

'placeholder' => __(''),

), $checkout->get_value( 'giftcard' ));

echo '</div>';

}

/**

* Validate Gift Card

add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {

// Check if set, if its not set add an error.

if ( ! $_POST['my_field_name'] )

wc_add_notice( __( 'Please enter something into this new shiny field.' ), 'error' );

}

/**

* Update the order meta with field value

add_action( 'woocommerce_checkout_update_order_meta', 'my_update_order_meta' );

function my_update_order_meta( $order_id ) {

if ( ! empty( $_POST['giftcard'] ) ) {

//woocommerce solution

//update_post_meta( $order_id, 'gift_card', sanitize_text_field( $_POST['giftcard'] ) );

//while these 2 statements probably do much the same thing I like to use the ACF fields to track meta data

update_field('gift_card', $_POST['giftcard'], $order_id);

}