Woocommerce - Change CSS class based on number of products in the order

Question

I have this simple code here that fetches the thumbnail image of the order on orders.php template.

<div class="product-img-col">
    <div class="product-img-list">
        <?php foreach( $order->get_items() as $item_id => $item ) {
            $product = apply_filters( 'woocommerce_order_item_product', $order->get_product_from_item( $item ), $item );
            echo $product->get_image();
        }
        ?>
    </div>
</div>

What I want to achieve is to separate the thumbnails by class if order contains 1 product or multiple products.

Example:

<div class="product-img-col">
    
    <div class="single-product-img">
        <!-- Insert code to fetch the product thumbnail for single order here -->
    </div>

    <div class="product-img-list">
        <!-- Insert code to fetch the product thumbnails for orders with multiple products here -->
    </div>

</div>

Is this possible? I know foreach function just fetches all the product thumbnails for that specific order. How do I alternate the code to add if condition if the order # contains only 1 product and then fetch the product thumbnail.

EDIT: UPDATE

<div class="product-img-col">
    <div class="<?php echo count( $order->get_items() ) > 1 ? 'product-img-list' : 'single-product-img'; ?>">
        <?php foreach( $order->get_items() as $item_id => $item ) {
            $product = $item->get_product();
            echo $product->get_image();
        }
        ?>
    </div>
</div>

Answer 1

You can use the internal WooCommerce get_item_count() function to check how much items are in the order. You can implement this function in a ternary operator.

<div class="<?php echo $order->get_item_count() > 1 ? 'product-img-list' : 'single-product-img'; ?>">

Also note that $order->get_product_from_item( $item ) is deprecated. You should use $item->get_product() instead. Which will also eliminate the use to add the woocommerce_order_item_product filter, as this is being called in the get_product() function.

You will also need a check on the $product variable. Right now your code will crash if it encounters orders with products that are no longer in your product catalog.

So something like this:

<div class="product-img-col">
    <div class="<?php echo $order->get_item_count() > 1 ? 'product-img-list' : 'single-product-img'; ?>">
        <?php 
        foreach( $order->get_items() as $item_id => $item ) {
            if ( $product = $item->get_product() ) {
                echo $product->get_image();
            }
        }
        ?>
    </div>
</div>

Answer 2

Here is a working solution - single item:https://prnt.sc/HhclHKDpJ1YA multiple items: https://prnt.sc/Zb9MeWUlIw6v

<?php
defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_before_account_orders', $has_orders ); ?>

<?php if ( $has_orders ) : ?>
<?php
    foreach($customer_orders->orders as $customer_order):
        $order = wc_get_order( $customer_order );
        $items = $order->get_items();
        $items_count = $order->get_item_count();
?>
    <div class="product-img-col"><div class="<?php echo count( $order->get_items() ) > 1 ? 'product-img-list' : 'single-product-img'; ?>">
    <?php foreach ( $items as $item ) {
        $product = $item->get_product();
        echo $product->get_image();
    }?></div></div>
    <?php endforeach; ?>
    <?php if ( 1 < $customer_orders->max_num_pages ) : ?>
        <div class="woocommerce-pagination woocommerce-pagination--without-numbers woocommerce-Pagination">
            <?php if ( 1 !== $current_page ) : ?>
                <a class="woocommerce-button woocommerce-button--previous woocommerce-Button woocommerce-Button--previous button" href="<?php echo esc_url( wc_get_endpoint_url( 'orders', $current_page - 1 ) ); ?>"><?php esc_html_e( 'Previous', 'woocommerce' ); ?></a>
            <?php endif; ?>

            <?php if ( intval( $customer_orders->max_num_pages ) !== $current_page ) : ?>
                <a class="woocommerce-button woocommerce-button--next woocommerce-Button woocommerce-Button--next button" href="<?php echo esc_url( wc_get_endpoint_url( 'orders', $current_page + 1 ) ); ?>"><?php esc_html_e( 'Next', 'woocommerce' ); ?></a>
            <?php endif; ?>
        </div>
    <?php endif; ?>
<?php endif; ?>