skip to Main Content

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>

2

Answers


  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>
    
    Login or Signup to reply.
  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; ?>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search