Why Choose Us?

3000+ Happy Customers

6000+ Projects Launched

15+ Years of Experience

Support You Can Rely On

WooCommerce Tabbed Category Wise Product Listing

By Shibly 4 years ago16 Comments
Home  /  WordPress Plugins  /  WooCommerce Tabbed Category Wise Product Listing

QuantumCloud’s Senior Software Engineer Shibly talks about how he solved a unique client request that had to do with popular WordPress eCommerce plug in WooCommerce.

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.

woocommerce tabbed latest products by categoryNaturally, 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.

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 it’s 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:

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. Letter 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:

 

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 actuallt very close to my solution already. What I need to do now is to write some jQuery magics.

Let’s explain the code. While working with jQuery, best practice is to always write jQuery code when the DOM document is ready. It means that your browser loads every pieces 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.

Here is the final code all together:

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. 🙂

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.

PS. 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.

PPS. The plug in was published finally! It is available in Github: WooCommerce-Tabbed-Category-Wise-Product-Listing .

PPPS. The plugin has been upgraded to be compatible with WooCommerce 2.x.x. Drop us a line if you face any issues.

PPPPS. Download the WooCommerce Tabbed Category Wise Product Listing from WP Plugin Repository.

Thanks

WordPress Version:
Requires at least: 3.7
Tested up to: 4.4.2

WooCommerce Version:
Tested with 2.6.2

License: GPLv2 or later

Category:
  WordPress Plugins
this post was shared 0 times
 100
About

 Shibly

  (2 articles)

A senior software engineer at QuantumCloud - my primary concentration is the LAMP stack. I craft high performance web applications with PHP in my day-to-day work. While most of my work would imply a PHP singularity, I am, however, comfortable with a wider array of technologies. I am a Linux fan, Mac user, Open Source enthusiast and explorer.

16 Comments

  • Raymond says:

    Nice job,. code works well and just as expected. Would like to know how to add pagination, without page load.. any ideas?

  • Jamil says:

    Hi Raymond,

    Thanks for the comment. We may extend it further according to your suggestions as our free time permits. But don’t hold you breath on it 🙂

    Btw, a plug in was created based on it. See link at the bottom of the post above.

  • kitek says:

    sir i am using your plugin in my site, but there i want to show certain no. of categories there in tabs and also want to add see more button so that when user clicks on it then other categories loads there and on other side where products are shown i want there to add see more button so that when user clicks on it then other products also shown there with in that area please help me how to o this and this is great plugin … great work 🙂

  • Thazin says:

    Hi, I need help, pls. This plugin is not working for me. What is wrong?

  • Jamil says:

    The issues are fixed with the latest version. Please download the latest versions from WP repository:
    https://wordpress.org/plugins/woo-tabbed-category-product-listing/

  • Chitranjan says:

    Hi, i have installed this plugin but not working. after installation, i activate it . then dded the shortcode [wtcpl-product-cat] in a page ..and getting a output as a same code [wtcpl-product-cat] on front. please help.

    • Jamil says:

      Hi,

      Do you have WooCommerce installed already? Did you download the latest version of the addon from https://wordpress.org/plugins/woo-tabbed-category-product-listing/ ?

  • Farhad Hamed says:

    I have the same problem. The page is giving out the exact same shortcode [wtcpl-product-cat] on front. Please help

  • pampa says:

    is it possible to display all categories opened and displaying all available products?

    I mean like this

    Categorie A
    product1 product2 product3

    Categorie B
    product1 product2 product3

    Categorie C
    product1 product2 product3
    product4 product5 product6

    and so on

  • farrukh says:

    Hi how i can add pagination. Please any help? Everything else is working fine but without pagination it is incomplete. Please help?

Leave a Reply

Your email address will not be published.