在 WooCommerce 单一产品自定义选项卡中显示交叉销售

Question

我正在尝试在单个产品页面的自定义选项卡内显示 WooCommerce 交叉销售 （类似于“评论”和“其他信息”的选项卡）。为此，我尝试使用 WooCommerce 函数：

woocommerce_cross_sell_display();

但它不起作用（我没有收到任何错误，也没有视觉结果）。

这是我到目前为止尝试过的方法：

//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();
    }

它是有线的，因为加售工作正常，但交叉销售（基本上是一样的）不起作用。

如何在 WooCommerce 单品页面自定义选项卡中显示交叉销售？

Link to my website

Answer 1

检查下面的代码。

//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
}

Answer 2

产品交叉销售适用于购物车，需要在 woocommerce_cross_sell_display() function 中进行一些更改，以使其在产品单页中运行。

这可以通过在自定义函数中克隆该函数的代码并更改 this line:

来完成

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

和

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

所以你的最终代码将是：

// 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,
        )
    );
}

代码进入活动子主题（或活动主题）的 functions.php 文件。已测试并有效。

在 WooCommerce 单一产品自定义选项卡中显示交叉销售

Display cross sells inside WooCommerce single products custom tab

php

wordpress

tabs

product

woocommerce