How to Navigate Between Same Category Products from a Single Product Page?

No results found. Try again with different words?

Search must be at least 3 characters.

Display Products from Same Category with Navigation

Astra Pro Addon plugin’s WooCommerce addon allows displaying navigation on the single product page. Refer a document here to see the option in detail. Enabling this option will add previous and next button link on the WooCommerce single product page. 

By default, when you click on the next button, a product will be displayed on the basis of published date. If you want to show next and previous products from the same category only then use filter provided below. This filter will display next/previous product from the same category based on the product 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 following filter in 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 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 respective font library to Astra. Here is the article that shows how Font Awesome Icons can be used with Astra. 
Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form