Site icon Experience Wordpress Developer Online – Design Develop and Maintenance Support

WooCommerce move related products to a tab on single product page

By default, WooCommerce will display a list of related items at the bottom of the product page but not everyone scrolls down to find them. so i want to move related products to a tab on single product page. so first remove the default related products section on the product page and place a new related products section in a tab still on the product page. so here is my code.

Add below line of code in your theme’s functions.php file of your active child theme (or theme) and save the file.

// remove related products from their original position
 
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);
 
// add a new tab
 
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
 
function woo_new_product_tab( $tabs ) {
     
$tabs['related_products'] = array(
    'title'     => __( 'Related Product', 'woocommerce' ),
    'priority'  => 50,
    'callback'  => 'woo_new_product_tab_content'
);
    return $tabs;
}
 
//put the related products inside
 
function woo_new_product_tab_content() {
woocommerce_output_related_products();
}
Exit mobile version