[Resolved] Add a category menu to product pages

[Emma]

Hi, I noticed on your ‘niche’ template, there is a category menu above the products. I would like to do a similar thing on a website I’m working on but I can’t work out how to do this and show the menu only on the product pages. Could you advise how to do it?

[David]

Hi there,

its custom coded using a Hook Element. These are the steps:

1. Create a new Hook Element.
1.1 Add this PHP Code:

<?php
$cat_args = array(
	'orderby'    => 'name',
	'order'      => 'asc',
	'hide_empty' => true,
);
 
$product_categories = get_terms( 'product_cat', $cat_args );
 
if ( ! empty( $product_categories ) ) {
	echo '<ul class="woo-cat-nav">';
		foreach ( $product_categories as $key => $category ) {
			printf( 
				'<li>
					<a href="%1$s">
						%2$s
					</a>
				</li>',
				get_term_link( $category ),
				$category->name
			);
		}
	echo '</ul>';
}
?>

1.2 Select the woocommerce_archive_description hook from the list
1.3 Check execute PHP.
1.4 Set your Display Rules to include Product Archives

2. Add this CSS:

/* Woo category nav */

.woo-cat-nav {
    list-style-type: none;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 80px;
}

.woo-cat-nav li {
    padding: 5px 0;
    margin: 0 10px;
    border-bottom: 1px solid #ccc;
    font-size: 0.95em;
    text-transform: uppercase;
}

@media (max-width: 768px) {

    .woo-cat-nav {
        margin-bottom: 40px;
    }

    .woo-cat-nav {
        justify-content: center;
    }
}

[Emma]

Thank you, will doing this also show the subcategories in the menu or will it only show the primary categories? (I have 3 main categories each with multiple sub categories).

[Leo]

I believe it should show sub categories as well.

Can you give it a shot first?

[Emma]

Thanks for your reply. I have managed to do this by designing the navigation using Elementor, saving it as a template and entering the shortcode using the hook. I don’t know why I didn’t think of that before. Many thanks for your help.

[Leo]

No problem 🙂

[Lee]

Hey!

How can I adjust this element to show only primary categories only?

Thank you 🙂

[David]

Hi there,

include 'parent' => 0 in your $cat_args :

$cat_args = array(
	'orderby'    => 'name',
	'order'      => 'asc',
	'hide_empty' => true,
        'parent' => 0,
);

[Lee]

Amazing, that worked perfectly!

Thank you 🙂

[Rafał]

David, thank you for the Hook!
Could you develop PHP code to show only these categories where an attribute is applied, please?
For example, attribute: Manufacturer → Company_Name.
I’d like to show its archive (loop of products by Company_Name) with menu of categories to which Company_Name’s products have been added.
Will you get a power to figure it out?

[David]

You’re welcome Lee.
Hi Rafal,

the above function is simply looping through a list of categories. What you require would be very complicated and requires custom development i am afraid

[Rafał]

I might suppose to 😉
Maybe with some plugin the category menu would be filtered easier? eg. Perfect Brands for WooCommerce?
OR
WooCommerce gives some possibility – maybe with a shortcode – that render filtered categories with current attribute name?

[Tom]

You could try asking over on something like https://wordpress.stackexchange.com/. If you provide the working code above and explain how you want to adjust it, someone may have a quick solution for you.

Otherwise, something like codeable.io might be worth checking out 🙂

[Simon]

Is it possible to only show the child category options and not the parent ones unless at root?

[David]

Hi there,

for your ‘root’ you could hook in the function above with the 'parent' => 0 arg
Then a separate hook for your product archives with this snippet:

<?php
$current_term = get_queried_object();
$parent = $current_term->term_id;
$product_categories = get_term_children( $parent, 'product_cat' ); 
 
 if ( ! empty( $product_categories ) ) {
	echo '<ul class="woo-cat-nav">';
	foreach ( $product_categories as $category ) {
            $term = get_term( $category, 'product_cat' );
		printf( 
			'<li><a href="%1$s">%2$s</a></li>',
			get_term_link( $term ),
			$term->name
		);
	}
  echo '</ul>';
}
?>

[Author]

Posts