Display cross sells inside WooCommerce single products custom tab

Question

I'm trying to display WooCommerce cross sells inside a custom tab in single product pages (similar tab as "Reviews" and "Additional information"). For that I tried using WooCommerce function:

woocommerce_cross_sell_display();

But it doesn't work (I receive no error and no visual result).

Here is what I tried so far:

//Add custom tabs filter
add_filter('woocommerce_product_tabs', 'add_new_default_product_tab' );
function add_new_default_product_tab( $tabs ) {

    global $product;

    // set the new priority to the "reviews" tab
    $tabs['reviews']['priority'] = 20;

    // gets the value to use as the title and slug of the new tab
    $custom_tab_title = "אביזרים";
    $custom_tab_title2 = "אביזרים משלימים";

    // if the custom field is set, it adds the new tab
    if ( ! empty($custom_tab_title) ) {
        $tabs['awp-' . sanitize_title('props')] = array(
            'title' => 'אביזרים',
            'callback' => 'awp_custom_woocommerce_tabs',
            'priority' => 5
        );
    }
    if ( ! empty($custom_tab_title) ) {
        $tabs['awp-' . sanitize_title('additional-props')] = array(
            'title' => 'אביזרים משלימים',
            'callback' => 'awp_custom_woocommerce_tabs2',
            'priority' => 10
        );
    }
    return $tabs;
}
 
    //Callback to display upsells (WORKS)
    
    function awp_custom_woocommerce_tabs($key, $tab) {
         woocommerce_upsell_display( 3,3 );
    }
    
    
    //Callback to display cross sells (Doesn't work)
    
    function awp_custom_woocommerce_tabs2($key, $tab) {
        woocommerce_cross_sell_display();
    }

Its wired because upsells working fine, but cross sells (which basically is the same) doesn't work.

How to display cross sells inside WooCommerce single product pages custom tab?

Link to my website

Reflector

Answer 1

Product cross sells are for cart and some changes in woocommerce_cross_sell_display() function are required, to get it work in product single pages.

This can be done cloning the code from that function in a custom function and changing this line:

$cross_sells = array_filter( array_map( 'wc_get_product', WC()->cart->get_cross_sells() ), 'wc_products_array_filter_visible' );

with

$cross_sells = array_filter( array_map( 'wc_get_product', $product->get_cross_sell_ids() ), 'wc_products_array_filter_visible' );

So your final code is going to be:

// Add custom tabs filter
add_filter('woocommerce_product_tabs', 'add_new_default_product_tab' );
function add_new_default_product_tab( $tabs ) {

    global $product;

    // set the new priority to the "reviews" tab
    $tabs['reviews']['priority'] = 20;

    // gets the value to use as the title and slug of the new tab
    $custom_tab_title = "אביזרים";
    $custom_tab_title2 = "אביזרים משלימים";

    // if the custom field is set, it adds the new tab
    if ( ! empty($custom_tab_title) ) {
        $tabs['awp-' . sanitize_title('props')] = array(
            'title' => 'אביזרים',
            'callback' => 'woocommerce_upsell_display_in_tab',
            'priority' => 5
        );
    }
    if ( ! empty($custom_tab_title) ) {
        $tabs['awp-' . sanitize_title('additional-props')] = array(
            'title' => 'אביזרים משלימים',
            'callback' => 'woocommerce_cross_sell_display_in_tab',
            'priority' => 10
        );
    }
    return $tabs;
}

// Callback to display upsells
function woocommerce_upsell_display_in_tab() {
     woocommerce_upsell_display( 3, 3 );
}


// Callback to display cross sells
function woocommerce_cross_sell_display_in_tab( $limit = 3, $columns = 3, $orderby = 'rand', $order = 'desc' ) {
    global $product;

    $cross_sells = array_filter( array_map( 'wc_get_product', $product->get_cross_sell_ids() ), 'wc_products_array_filter_visible' );

    wc_set_loop_prop( 'name', 'cross-sells' );
    wc_set_loop_prop( 'columns', apply_filters( 'woocommerce_cross_sells_columns', $columns ) );

    // Handle orderby and limit results.
    $orderby     = apply_filters( 'woocommerce_cross_sells_orderby', $orderby );
    $order       = apply_filters( 'woocommerce_cross_sells_order', $order );
    $cross_sells = wc_products_array_orderby( $cross_sells, $orderby, $order );
    $limit       = apply_filters( 'woocommerce_cross_sells_total', $limit );
    $cross_sells = $limit > 0 ? array_slice( $cross_sells, 0, $limit ) : $cross_sells;

    wc_get_template(
        'cart/cross-sells.php',
        array(
            'cross_sells'    => $cross_sells,

            // Not used now, but used in previous version of up-sells.php.
            'posts_per_page' => $limit,
            'orderby'        => $orderby,
            'columns'        => $columns,
        )
    );
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

Danuloff

Answer 2

Check the below code.

//Add custom tabs filter
add_filter('woocommerce_product_tabs', 'add_new_default_product_tab' );
function add_new_default_product_tab( $tabs ) {

    global $product;

    // set the new priority to the "reviews" tab
    $tabs['reviews']['priority'] = 20;

    // gets the value to use as the title and slug of the new tab
    $custom_tab_title = "אביזרים";
    $custom_tab_title2 = "אביזרים משלימים";

    // if the custom field is set, it adds the new tab
    if ( ! empty($custom_tab_title) ) {
        $tabs['awp-' . sanitize_title('props')] = array(
            'title' => 'אביזרים',
            'callback' => 'awp_custom_woocommerce_tabs',
            'priority' => 5
        );
    }
    if ( ! empty($custom_tab_title) ) {
        $tabs['awp-' . sanitize_title('additional-props')] = array(
            'title' => 'אביזרים משלימים',
            'callback' => 'awp_custom_woocommerce_tabs2',
            'priority' => 10
        );
    }
    return $tabs;
}

//Callback to display upsells (WORKS)

function awp_custom_woocommerce_tabs($key, $tab) {
    ?>
    <div class="related">
    <?php
    // Customised: Show cross-sells on single product pages, under the attributes and short description
    global $post;
    $crosssells = get_post_meta( $post->ID, '_upsell_ids',true);
    if($crosssells) { 
        echo '<h2>Up Sell products</h2>';
        echo '<ul>';
        foreach ($crosssells as $item) {
            // WP_Query arguments
            $args = array (
                'p'           => $item,
                'post_type'   => array( 'product' ),
                'post_status' => array( 'publish' ),
            );
            // The Query
            $crosssells_products = new WP_Query( $args );
            // The Loop
            if ( $crosssells_products->have_posts() ) {
                while ( $crosssells_products->have_posts() ) {
                    $crosssells_products->the_post();
                    ?>
                        <li><a href="<?php the_permalink();?>"><?php the_title();?></a></li>
                    <?php
                }
            } else {
                // no posts found
            }
            // Restore original Post Data
            wp_reset_postdata();
        }
        echo '</ul>';
    }
    ?>
    </div>
    <?php
}


//Callback to display cross sells (Doesn't work)

function awp_custom_woocommerce_tabs2($key, $tab) {
    ?>
    <div class="related">
    <?php
    // Customised: Show cross-sells on single product pages, under the attributes and short description
    global $post;
    $upsell = get_post_meta( $post->ID, '_crosssell_ids',true);
    if($upsell) { 
        echo '<h2>Cross Sell products</h2>';
        echo '<ul>';
        foreach ($upsell as $item) {
            // WP_Query arguments
            $args = array(
                'p'           => $item,
                'post_type'   => array( 'product' ),
                'post_status' => array( 'publish' ),
            );
            // The Query
            $upsell_products = new WP_Query( $args );
            // The Loop
            if ( $upsell_products->have_posts() ) {
                while ( $upsell_products->have_posts() ) {
                    $upsell_products->the_post();
                    ?>
                        <li><a href="<?php the_permalink();?>"><?php the_title();?></a></li>
                    <?php
                }
            } else {
                // no posts found
            }
            // Restore original Post Data
            wp_reset_postdata();
        }
        echo '</ul>';
    }
    ?>
    </div>
    <?php
}

Kiowa