Click here to Skip to main content
Click here to Skip to main content

Tagged as

WooCommerce Tabbed Category Wise Product Listing

, 9 Apr 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
WooCommerce Tabbed Category Wise Product Listing

The Background

WooCommerce is a very popular and often used eCommerce plug in of WordPress CMS. It is very user friendly, scalable, robust and, most importantly, has tons of extensions available. We have to use WooCommerce a lot in various client projects. And sometimes we have to face and solve client requests that are neither possible with default WooCommerce nor available as an extension.

The Problem

In one of my recently completed WooCommerce projects, the client wanted to show all the main product categories in tabs on the Home page. The products under the specific categories would display when clicked on a specific category name/tab.

Naturally, I looked for a built in or a community contributed solution first and, to my surprise, found none. This seemed like a common feature that should have been already existing. So I had no choice but to jump into some custom coding. I knew it had to be done with Ajax because I can’t reload the page just to show a few new products every time. So jQuery was an obvious choice. The following was my plan of actions:

  • First, I’ll write a custom WordPress query to fetch all the parent WooCommerce product categories and their ids from database.
  • Then I’ll use a short-code from WooCommerce to fetch all the recent products from the shop.
  • Then I’ll wrap those names inside loops and pass every parent category slug names to the WooCommerce shortcode. It will return then a list of parent categories and their associated products.
  • Finally, I’ll do some jQuery magic to load certain products under a category and hide the rest in the same time. When clicked on another parent category, I’ll repeat the same technique. Of course, I’ll use necessary CSS too to match the design with my WordPress theme.

The Solution

Let’s get our hands a little dirty with the code. First, we need to prepare a custom query for the database to fetch all the parent product categories.

 $args = array(
                        'number' => $number,
                        'orderby' => $orderby,
                        'order' => $order,
                        'hide_empty' => $hide_empty,
                        'include' => $ids
                    ); 
        $product_categories = get_terms ('product_cat', $args);     

Here, first I prepared an array with necessary parameters as array keys to pass appropriate parameter values to get_terms () function. get_terms () basically returns an array of term objects. It throws a WP_Error object if nothing is found. It supports a wide range of parameters as its second argument but it needs basically two parameters as its arguments. 1st one is the taxonomy term in which it will look after and the 2nd one is the list of filters as an array () to filter the taxonomy. For more details, you can check the codex in here.

If everything went OK, the code should return a list of names as the main category names as I have already defined them in my WooCommerce setup.

Next:

<div class="nav" id="tabs">
                    <?php
                    $args = array(
                        'number' => $number,
                        'orderby' => $orderby,
                        'order' => $order,
                        'hide_empty' => $hide_empty,
                        'include' => $ids
                    );
 
                    $product_categories = get_terms('product_cat', $args);
                    ?>

The code is straight forward here. I started a loop and a counter in the same time with initial value as 0. In the main sequence of the loop, we passed the $product_categories variable to iterate it and assign each value to $cat variable. Then we got the slug property from the $cat value and assigned it as an id to an anchor tag. Also as a class. I have added category slug name as id and class to the anchor tag. That means if I had 5 main categories, then I would have 5 anchor tags. With 5 individual ids and class names each. Later, I will write a jQuery code to get the category name from the id and class to identify them individually. Forget about the conditional PHP block inside the anchor tag I wrote for now. I will explain that later.

So I have the category names and I have rendered them in a tabular format. I need to fetch the products now. But how will I do that? Well, there are numerous ways to do that. But for simplicity’s shake, I’ll use shortcode from Woo-Commerce. Here is the code:

<div class="product_content" id="tabs_container">
                <?php
                $i = 0;
                foreach ($product_categories as $cat) {
                    ?>

If you look closely to the loop, you’ll find that there is nothing new here. Same loop as the previous code block. Except, this time I passed a variable to the shortcode and that is the category name. The name is coming from the very first code block I wrote to get all the category names. So, I just made the shortcode a little bit more dynamic here. I also put a counter before the loop start. I’ll explain that later. The shortcode I wrote returned a list of products from a specific category. As it is inside the loop, it will render 5 individual product blocks (as I have 5 main categories in my shop). Simple. I’ve the category names and the associated product blocks. I am actually very close to my solution already. What I need to do now is to write some jQuery magics.

jQuery(document).ready(function () {
jQuery("#tabs a").click(function (event) {
 
        event.preventDefault();
 
        var my_id = jQuery(this).attr("id");
 
        jQuery("#tabs a").removeClass("active");
        jQuery(this).addClass("active");
        jQuery("#tabs_container .each_cat").fadeOut("slow");
        jQuery("#tabs_container .each_cat").removeClass("active");
       jQuery("#product-" + my_id).fadeIn("slow");
       jQuery("#product-" + my_id).addClass("active");
});  
}); 

Let’s explain the code. While working with jQuery, the best practice is to always write jQuery code when the DOM document is ready. It means that your browser loads every piece of contents requested to the server first so that your code does not perform on some hollow DOM objects. First, I needed to grab the anchor tags with jQuery. Not all anchor tags, only the anchor tags inside the div with the id “tab”. I needed to perform click operations on each of them. Next I defined a jQuery object as $my_id to get the id attribute of each anchor tag. Then I used jQuery’s removeClass() method to remove the active class from the anchor tags first and add active class to only the anchor tag clicked on. Then I got the “tab_container div.’s .each_cat div and removed the active class from them. Next, I only added the active class to the product container which had the same id as $my_id and $my_id holds the category name from the anchor tag. Easy as picking candy from a baby.

The Mysterious Counter Variable

Remember the $i I promised to talk about later? Well, it serves a very simple yet noble purpose. It assigns the active class to the very first element of the loop. Post a comment below if you still don’t get it altogether. Smile | :)

Final Thoughts

Necessity is the mother of innovation. At first, I did not have a clue as to how I would meet this client requirement as there was no particular solution or even hint of a solution online. I did not know how to make category wise product listing in Woo-Commerce. But after just a little bit of thinking and researches, the solution seemed easy and obvious. Thank you for reading.

P.S. A nice little WooCommerce plug in was created based on the above. We will publish that shortly for everyone to download and use easily on their website.

** And here is the plug in link in GitHub: https://github.com/qcloud/WooCommerce-Tabbed-Category-Wise-Product-Listing

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Member 10706014
CEO QuantumCloud
Bangladesh Bangladesh
I am Executive director at QuantumCloud. We provide innovative web solutions to businesses interested in outsourcing their web design, web development, eCommerce, inbound marketing and mobile application development needs to a professional web development company. We like to leverage the awesome powers of open source solutions such as WordPress, Joomla!, Magento and Drupal for quick turn around, scalability and lower cost. Our website is at http://www.quantumcloud.com/
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionDisplay Particular categories. PinmemberMember 112201279-Nov-14 20:03 
QuestionThe Plug In is Now Available in Github PinmemberMember 107060141-Oct-14 2:38 
QuestionWhere to place the code PinmemberMember 1094059211-Jul-14 7:44 
Questionplugin PinmemberMember 1084590026-May-14 21:13 
AnswerRe: plugin PinmemberMember 1070601427-May-14 4:07 
GeneralRe: plugin [modified] PinmemberMember 1072060617-Sep-14 2:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1411022.1 | Last Updated 9 Apr 2014
Article Copyright 2014 by Member 10706014
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid