Display Products from Same Category with Navigation

If you want to display WooCommerce products from the same category one after the other, this article is for you.

By default, when you click on the “Next” button or icon, the next product will be displayed based on the published date.

But, the filter provided in this article will help you display the next/previous product from the same category based on the product’s published date.  

For example – If category A has 10 products, then starting from 1st product next link will display all 10 products. After 10 products the next link will be disabled.

Paste the following filter in the child theme’s functions.php file. 

function astra_woo_product_previous_post_nav( $args ) {

    $args = array(
        'format'         => '%link',
        'link'           => '',
        'in_same_term'   => true,
        'excluded_terms' => '',
        'taxonomy'       => 'product_cat',
    );
    return $args;
    }
    add_filter( 'astra_woo_product_previous_post_nav_args', 'astra_woo_product_previous_post_nav' );
    
    function astra_woo_product_next_post_nav( $args ) {
    
    $args = array(
        'format'         => '%link',
        'link'           => '',
        'in_same_term'   => true,
        'excluded_terms' => '',
        'taxonomy'       => 'product_cat',
    );
    return $args;
    }
    add_filter( 'astra_woo_product_next_post_nav_args', 'astra_woo_product_next_post_nav' );

From the above filter link argument can be updated as follows –

link: If you want to update the next and previous link icons for navigation, update this argument. You can use  <i> tag from various font libraries.

You would then need to upload the respective font library to Astra. 

Here is the article that shows how Font Awesome Icons can be used with Astra. 

That’s it! For any doubts, feel free to open a support ticket below.