Image by David Zydd from Pixabay
Depending on what an online store is selling, brands may or may not be a crucial part of its product navigation. By default, WooCommerce doesn’t include brands as a built-in taxonomy for products. Are they necessary to sell products? A store that has its own line of products created by them may not be concerned about this at all. If the store is an affiliate vendor for big name fashion brands or a dealer in a wide array of products from different manufacturers, however, it may need brands featured prominently on their website.
The code below was written for a client who needed her customers to be able to search products by brand. She also wanted to keep the number of plugins on her site down to a minimum so that her site would load more quickly. As a result, this snippet was added as a theme customization.
The code below can be added to your theme’s functions.php if you wish, but I prefer keeping as much custom code as possible out of it. My usual practice, picked up from other WordPress theme developers, is to break out custom code into separate files and call them with either ‘include’ or ‘require_once’ in functions.php.
For this theme, I added a folder named includes inside of the theme directory, and created a file named woocommerce.php inside of the includes folder. At the bottom of the theme’s functions.php, I added the following line:
require_once( get_stylesheet_directory() . '/includes/woocommerce.php' );
If you build a theme with a lot of different customizations, don’t be surprised if you end up with 10 or 20 files in your ‘includes’ or ‘inc’ directory. More features and functionality naturally leads to more custom code if you want to limit the number of plugins on the site. On the up side, when updating or debugging the theme, it does end up being easier to manage.
For this example, we’re adding a shortcode to the theme, so we’re going to need to hook into the init action so that it’s available early on in the page load process. I’m going to name the function ‘custom_init_hooks’.
// Hook into WordPress initialization
add_action( 'init', 'custom_init_hooks' );
Inside of the ‘custom_init_hooks’ function, I’ll use ‘add_shortcode’ to create the new brands shortcode. I’ll name it ‘custom_product_brands’. We also need a callback function that will contain the code to make the shortcode work. Just to make it obvious, I’ll name it ‘custom_child_brand_callback’.
// Add shortcode to theme
function custom_init_hooks(){
add_shortcode( 'custom_product_brands', 'custom_child_brand_callback' );
} // End 'custom_init_hooks'
So, the final piece needed to add the brands shortcode is the callback function, which gets the taxonomy data and displays it.
In the shortcode function below, we first need to initialize both the $woocommerce variable. This serves the purpose of allowing us to access the data from the instance of WooCommerce that is running on the site. For this shortcode, it is possible that we don’t need to call on the $woocommerce variable, but when working with products it’s a good idea to include it in case you have need of it.
We want to put ob_start() at the beginning of the code because we will be printing information out to the page from our function. Ob_start() turns output buffering on and makes sure we’re only sending out the brands html.
Next, we initialize a variable to store the terms data in. I named it $brands and then used the get_terms function to retrieve all of the product brands. For this project, I was able to just get the terms with 2 parameters, the taxonomy name and the argument for ‘hide_empty’. The client wanted a complete list of all brands, whether they had products or not.
Once I had the terms to work with, then I looped through all of them and printed them to the page in the form of a nav list. This shortcode was intended to be used in OceanWP’s off-canvas sidebar, but the shortcode would work in other locations as well.
Before starting the loop, I check to make sure the $brands variable has items to loop through. No point in using resources to loop through an empty array, right? Then I add the html for the Brands section title, and print out a bulleted list with the brand names. As the loop is iterating over the array of items, the WordPress function get_term_link is called so that each brand has a link for the customer to follow.
After the loop, we add a return statement using ob_get_clean() to get the contents of the current output buffer and then delete it.
<?php
function custom_child_brand_callback(){
global $woocommerce, $product;
ob_start();
$brands = get_terms(
array(
'taxonomy' => 'product_brand',
'hide_empty' => false
)
);
if( count( $brands ) > 0 ):
?>
<h4 class="widget-title">Brands</h4>
<ul class="woocommerce-widget-layered-nav-list">
<?php
foreach( $brands as $brand ) :
?><li>
<a href="<?php echo get_term_link( $brand, 'product_brand' );?>">
<?php echo $brand->name; ?>
</a>
</li><?php
endforeach;
?>
</ul>
<?php
endif; // End if
return ob_get_clean();
} // End 'custom_child_brand_callback'
