skip to Main Content

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

2

Answers


  1. 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
    }
    
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search