单一产品页面中的交叉销售

Question

I would like to have Cross Sells displayed in the Single Product page of WooCommerce. I currently have this working and displaying in a toggle content box under the price, however it is using the styling of the current product loop, where all product details are stacked on top of each other - whereas I would like each product detail to be horizontal and next to each other for this section of the page only.

Example below:

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

The code I am currently using presents the Cross Sells, but not in the proposed format and I'm struggling to find a way to reformat these for cross sells only without altering the main product loop.

Any help would be very much appreciated!