Create an accordion menu with hover functionality for categories and subcategories in WordPress/WooCommerce

Want to create a sleek accordion menu that expands on hover? Check out my latest blog post for a step-by-step guide—perfect for WooCommerce and WordPress sites!

To create an accordion menu with hover functionality for categories and subcategories in WordPress, follow these steps:

Step 1: Plan the Menu Structure

Ensure your product categories and subcategories are properly organized in WordPress. You can do this in Products > Categories.

• Parent categories should contain the top-level categories.
• Child categories should be nested under their respective parent categories.

Step 2: Add Custom Code for Accordion Menu

You’ll need to customize your WordPress theme by adding code to your theme’s functions.php and creating CSS/JavaScript for the menu functionality.

1. Fetch Categories with Product Counts

Add the following code to your theme's functions.php file to generate the category structure:

  
function get_product_categories_with_count() {
    $args = array(
        'taxonomy'     => 'product_cat',
        'orderby'      => 'name',
        'hide_empty'   => false,
        'parent'       => 0, // Fetch only parent categories
    );
    $product_categories = get_terms($args);

    $output = '
';
    foreach ($product_categories as $category) {
        $output .= '
';
        $output .= '' . $category->name . ' (' . $category->count . ')';
        $output .= get_child_categories($category->term_id);
        $output .= '
';
    }
    $output .= '
';

    return $output;
}

function get_child_categories($parent_id) {
    $args = array(
        'taxonomy'     => 'product_cat',
        'orderby'      => 'name',
        'hide_empty'   => false,
        'parent'       => $parent_id, // Fetch child categories
    );
    $child_categories = get_terms($args);

    if (!empty($child_categories)) {
        $output = '
';
        foreach ($child_categories as $child) {
            $output .= '
';
            $output .= '' . $child->name . ' (' . $child->count . ')';
            $output .= '
';
        }
        $output .= '
';
        return $output;
    }
    return '';
}

2. Add the Menu to Your Template

Paste the following code wherever you want the menu to appear, such as in a sidebar or custom page template:

 

echo get_product_categories_with_count();
 

3. Style the Accordion Menu

Add this CSS to your theme’s stylesheet or via the Additional CSS section in WordPress:

 
.accordion-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.accordion-menu > li {
    position: relative;
    padding: 10px 15px;
    border-bottom: 1px solid #ccc;
}

.accordion-menu a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    display: block;
}

.accordion-menu .subcategories {
    list-style: none;
    padding: 0 15px;
    margin: 0;
    display: none; /* Initially hidden */
}

.accordion-menu .subcategories li {
    padding: 5px 0;
}

.accordion-menu li:hover > .subcategories {
    display: block; /* Show on hover */
}

4. Add Optional JavaScript (for Smooth Transitions)

To add smooth expand/collapse transitions, enqueue a small JavaScript snippet in your theme:

 

function enqueue_accordion_scripts() {
    wp_enqueue_script('accordion-menu', get_template_directory_uri() . '/js/accordion-menu.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_accordion_scripts');

In your theme directory, create a file js/accordion-menu.js with the following content:

 

jQuery(document).ready(function($) {
    $('.accordion-menu > li').hover(
        function() {
            $(this).find('.subcategories').stop(true, true).slideDown();
        },
        function() {
            $(this).find('.subcategories').stop(true, true).slideUp();
        }
    );
});

Step 3: Test and Adjust

1. Test the menu in various browsers to ensure compatibility.
2. Adjust CSS styling as needed to fit your site’s design.

This implementation allows you to display product counts and reveal subcategories on hover, creating a dynamic accordion-style menu. Let me know if you need help refining it!