fervor [>]CODING & CURIOSITY
FERVOR LEARNING SYSTEMTUTORIALS
← WordPress

WordPress / 6 MIN READ

Woo Product Catagory Nav

Creating WooCommerce Product Buy Buttons

From the original Fervor library. Examples may use older package versions.

Tutorial: Creating a Custom Navigation Sidebar for Product Categories on an Archive-Product Template in WooCommerce

Adding a custom navigation sidebar to the archive-product.php template is a great way to enhance usability on your WooCommerce site. This tutorial will guide you through creating a sidebar featuring categories and subcategories.

Step 1: Plan the Sidebar Structure

Our sidebar will include:

  • Product categories as main items.
  • Subcategories indented beneath their parent categories.
  • Links to the category archive pages.

Step 2: Add the Sidebar in Your Theme

  1. Open your WordPress theme folder (preferably a child theme to avoid overwriting updates).

  2. Locate the archive-product.php file in the theme. If it doesn’t exist, copy it from wp-content/plugins/woocommerce/templates/archive-product.php into your child theme’s folder under woocommerce/archive-product.php.

  3. Edit the file and include this code where you want the sidebar to appear, typically before the main product grid:

<div class="product-sidebar">
    <?php get_sidebar('product'); ?>
</div>

Step 3: Register the Sidebar in functions.php

You’ll need to register a new sidebar widget area for the archive template.

Add this to your functions.php file:

function register_product_sidebar() {
    register_sidebar(array(
        'name' => 'Product Sidebar',
        'id' => 'product-sidebar',
        'description' => 'Sidebar for WooCommerce product archive pages',
        'before_widget' => '<div class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));
}
add_action('widgets_init', 'register_product_sidebar');

This creates a widgetized area where you can drop additional widgets if needed.

Step 4: Dynamically Generate Categories and Subcategories

Now we’ll create a custom function to display WooCommerce product categories and subcategories. Add this to your functions.php:

function display_product_categories_sidebar() {
    $args = array(
        'taxonomy' => 'product_cat',
        'orderby' => 'name',
        'parent' => 0, // Get only parent categories
        'hide_empty' => false, // Show categories even if they're empty
    );

    $categories = get_terms($args);

    if (!empty($categories)) {
        echo '<ul class="product-categories">';
        foreach ($categories as $category) {
            echo '<li class="category-item">';
            echo '<a href="' . get_term_link($category) . '">' . $category->name . '</a>';
            
            // Fetch subcategories
            $subcategories = get_terms(array(
                'taxonomy' => 'product_cat',
                'orderby' => 'name',
                'parent' => $category->term_id, // Get subcategories of this category
                'hide_empty' => false,
            ));

            if (!empty($subcategories)) {
                echo '<ul class="subcategory-list">';
                foreach ($subcategories as $subcategory) {
                    echo '<li class="subcategory-item">';
                    echo '<a href="' . get_term_link($subcategory) . '">' . $subcategory->name . '</a>';
                    echo '</li>';
                }
                echo '</ul>';
            }

            echo '</li>';
        }
        echo '</ul>';
    }
}

This function:

  • Gets top-level categories.
  • Fetches and displays subcategories under each parent category.
  • Uses get_term_link() to generate links to category archives.

Step 5: Call the Function in the Sidebar

Edit the sidebar-product.php file in your child theme (create it if it doesn’t exist) and include:

<?php
if (function_exists('display_product_categories_sidebar')) {
    display_product_categories_sidebar();
}
?>

Step 6: Style the Sidebar

Add some CSS to your theme’s style.css file to make the sidebar visually appealing:

.product-sidebar {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
}

.product-categories {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-categories .category-item {
    margin-bottom: 10px;
}

.product-categories .subcategory-list {
    list-style: none;
    padding-left: 20px; /* Indent for subcategories */
    margin: 5px 0 0;
}

.product-categories a {
    text-decoration: none;
    color: #333;
}

.product-categories a:hover {
    color: #0073aa;
}

Step 7: Test the Sidebar

  1. Visit a product archive page (e.g., Shop or category pages).
  2. Check if the sidebar appears and lists the product categories and subcategories correctly.
  3. Verify the links lead to the respective category archive pages.

Optional Enhancements

  1. Show Category Counts:

    • Modify the $args in display_product_categories_sidebar() to include:
      'show_count' => true,
    • Then display the count in the category links:
      echo '<a href="' . get_term_link($category) . '">' . $category->name . ' (' . $category->count . ')</a>';

  2. Highlight Current Category: Add a CSS class to highlight the current category:

    $current_class = (is_product_category($category->slug)) ? 'current-category' : '';
echo '<li class="category-item ' . $current_class . '">';

  3. Toggle Subcategories (Accordion Style): Use JavaScript or jQuery to toggle subcategories open/close when their parent is clicked.

With this tutorial, you now have a fully functional custom navigation sidebar for your WooCommerce product archive pages. 🚀 😊

Bonus toggle sub-categories side nav

Adding Toggle Subcategories (Accordion Style) to Your Product Categories Sidebar

Let’s make the sidebar interactive by adding accordion-style toggling for subcategories. With this feature, clicking on a parent category will expand or collapse its subcategories, giving your users a clean and intuitive navigation experience.

Step 1: Adjust the HTML Structure

Update the display_product_categories_sidebar function in your functions.php file to include unique class names for each category and subcategory list:

function display_product_categories_sidebar() {
    $args = array(
        'taxonomy' => 'product_cat',
        'orderby' => 'name',
        'parent' => 0, // Get only parent categories
        'hide_empty' => false, // Show categories even if they're empty
    );

    $categories = get_terms($args);

    if (!empty($categories)) {
        echo '<ul class="product-categories">';
        foreach ($categories as $category) {
            echo '<li class="category-item">';
            echo '<a href="#" class="toggle-category">' . $category->name . '</a>'; // Toggle link
            
            // Fetch subcategories
            $subcategories = get_terms(array(
                'taxonomy' => 'product_cat',
                'orderby' => 'name',
                'parent' => $category->term_id, // Get subcategories of this category
                'hide_empty' => false,
            ));

            if (!empty($subcategories)) {
                echo '<ul class="subcategory-list" style="display: none;">'; // Initially hidden
                foreach ($subcategories as $subcategory) {
                    echo '<li class="subcategory-item">';
                    echo '<a href="' . get_term_link($subcategory) . '">' . $subcategory->name . '</a>';
                    echo '</li>';
                }
                echo '</ul>';
            }

            echo '</li>';
        }
        echo '</ul>';
    }
}

Key Changes:

  1. Parent category links now have the class toggle-category.
  2. Subcategories are wrapped in <ul class="subcategory-list"> and hidden initially using style="display: none;".

Step 2: Add JavaScript for Toggle Behavior

Add a custom script to enable toggle functionality. You can either enqueue the script through WordPress or add it inline.

Enqueue the Script

Place this in your functions.php to enqueue the custom JavaScript:

function enqueue_sidebar_toggle_script() {
    wp_enqueue_script('sidebar-toggle', get_stylesheet_directory_uri() . '/js/sidebar-toggle.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_sidebar_toggle_script');

Create sidebar-toggle.js

Create a file named sidebar-toggle.js in your child theme’s /js directory and add the following code:

jQuery(document).ready(function ($) {
    $('.toggle-category').on('click', function (e) {
        e.preventDefault(); // Prevent default link behavior

        // Toggle the visibility of the subcategory list
        $(this).next('.subcategory-list').slideToggle();

        // Optionally toggle a "active" class for styling
        $(this).toggleClass('active');
    });
});

Step 3: Style the Active and Expanded States

Add some styles in your theme’s style.css file to make the toggle behavior visually appealing:

/* Parent Category Styling */
.toggle-category {
    display: block;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 0;
}

.toggle-category.active {
    color: #0073aa; /* Highlight active category */
}

/* Subcategory Styling */
.subcategory-list {
    list-style: none;
    padding-left: 20px; /* Indent for subcategories */
    margin: 5px 0 0;
}

.subcategory-list .subcategory-item {
    margin-bottom: 5px;
}

.subcategory-list a {
    text-decoration: none;
    color: #666;
}

.subcategory-list a:hover {
    color: #0073aa;
}

Step 4: Test the Sidebar

  1. Navigate to a product archive page (e.g., the Shop page or a category archive).
  2. Click on a parent category in the sidebar. The subcategories should smoothly expand or collapse.
  3. Verify the toggle works correctly even if there are multiple parent categories.

Optional Enhancements

1. Expand Current Category Automatically

If you want the current category’s subcategories to be expanded on page load, add this snippet to highlight and expand the current category:

Modify the display_product_categories_sidebar function to check if the current category matches:

$is_current = (is_product_category($category->slug)) ? 'style="display: block;"' : 'style="display: none;"';

echo '<ul class="subcategory-list" ' . $is_current . '>';

2. Add Icons for Expand/Collapse

Use CSS or JavaScript to add an icon next to each parent category. Example:

.toggle-category:after {
    content: '+';
    float: right;
    font-size: 12px;
    color: #333;
}

.toggle-category.active:after {
    content: '-';
}

That’s It!

You now have a fully functional, interactive sidebar for product categories with accordion-style toggling. This enhances usability and keeps your category list clean and organized.😊

Keep your curiosity going.Explore more WordPress →
287 TUTORIALS · 22 TOPICSREADY