Add a category menu to product pages

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;
    }
}

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

I believe it should show sub categories as well.

Can you give it a shot first?

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.

No problem :)

Hey!

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

Thank you :)

Hi there,

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

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

Amazing, that worked perfectly!

Thank you :)

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?

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

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?

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 :)

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

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>';
}
?>