[Resolved] Add a category menu to product pages

Home Forums Support Add a category menu to product pages

  • This topic has 22 replies, 5 voices, and was last updated 2 months ago by David.
Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #1254638
    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?

    #1254894
    David
    Staff
    Customer Support

    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;
        }
    }
    #1255510
    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).

    #1256577
    Leo
    Staff
    Customer Support

    I believe it should show sub categories as well.

    Can you give it a shot first?

    #1257258
    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.

    #1258251
    Leo
    Staff
    Customer Support
    #1345553
    Lee

    Hey!

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

    Thank you πŸ™‚

    #1345768
    David
    Staff
    Customer Support

    Hi there,

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

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

    Amazing, that worked perfectly!

    Thank you πŸ™‚

    #1346726
    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?

    #1346797
    David
    Staff
    Customer Support

    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

    #1346950
    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?

    #1347538
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1391390
    Simon

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

    #1391743
    David
    Staff
    Customer Support

    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>';
    }
    ?>
Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.