[Resolved] Add a category menu to product pages

Home Forums Support Add a category menu to product pages

  • This topic has 5 replies, 3 voices, and was last updated 1 month ago by Leo.
Viewing 6 posts - 1 through 6 (of 6 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
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.