单产品交叉销售页面

Question

我想在WooCommerce的“单一产品”页面上显示交叉销售。我目前正在此工作中，并在价格下的切换内容框中显示该内容，但是它使用的是当前产品循环的样式，其中所有产品详细信息都堆叠在一起-而我希望每个产品详细信息都是水平的并仅在页面的此部分彼此相邻。

以下示例：

add_action('woocommerce_after_add_to_cart_button', 'show_cross_sell_in_single_product', 30);
function show_cross_sell_in_single_product(){
    $crosssells = get_post_meta( get_the_ID(), '_crosssell_ids',true);

    if(empty($crosssells)){
        return;
    }

    $args = array( 
        'post_type' => 'product', 
        'posts_per_page' => -1, 
        'post__in' => $crosssells 
        );
    $products = new WP_Query( $args );
    if( $products->have_posts() ) : 
        echo '<button class="collapsible">We Reccommend:</button><div class="content">';
        woocommerce_product_loop_start();
        while ( $products->have_posts() ) : $products->the_post();
            wc_get_template_part( 'content', 'product' );
        endwhile; // end of the loop.
        woocommerce_product_loop_end();
        echo '</div>';
    endif;
    wp_reset_postdata();
}

我当前使用的代码代表了交叉销售，但没有以建议的格式显示，我正努力寻找一种方法来重新格式化交叉销售，而又不改变主产品循环。

任何帮助将不胜感激！