[WooCommerce教學]Show Product Image on WooCommerce Checkout & Order-Pay Pages

【WooCommerce】WooCommerce’s default checkout page is not that much optimized, for example: Show Product Image WooCommerce on Checkout & Order-Pay Pages. It needs a lot of customization to make it more user-friendly. HKWeb+ is going to provide you some small tips, which helps you increase the conversion of the checkout & order-pay pages.

Optimize WooCommerce Checkout Customer Experience

This, therefore, implies that WooCommerce checkout page needs a lot of customization to make it more user-friendly.

If you are customizing your customers user experience on WooCommerce checkout, you may also want to checkout this article on how to create WooCommerce redirect after checkout and possibly use this plugin – WooCommerce redirect after checkout plugin to enhance the customer checkout experience.

Default WooCommerce Checkout Page

This is the default look of the Checkout page

This is where we come in. We will give you an expert solution, which will help you to increase the conversion of the checkout page.

This brief tutorial will show you how to product image on the checkout page without overriding templates.

Steps to Add Product Images on the Checkout Page of your WooCommerce Store

Here are the steps that you need to follow:

1. Log into your WordPress site and access the Dashboard as the admin user.
2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will Show Product Image at Checkout Page.
3. Add the following code to the php file:

   /**
   * @snippet WooCommerce Show Product Image @ Checkout Page
   * @author HKWeb+
   */</pre>
   add_filter( 'woocommerce_cart_item_name', 'ts_product_image_on_checkout', 10, 3 );
   function ts_product_image_on_checkout( $name, $cart_item, $cart_item_key ) {
   /* Return if not checkout page */
   if ( ! is_checkout() ) {
   return $name;
   }
   /* Get product object */
   $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
   /* Get product thumbnail */
   $thumbnail = $_product-&gt;get_image();
   /* Add wrapper to image and add some css */
   $image = '
   <div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">'
   . $thumbnail .
   '</div>
   ';
   /* Prepend image to name and return it */
   return $image . $name;
   }
   

4. To see the outcome of this code you need to refresh the checkout page and you should see this:
   

You should now be able to see all the product images as shown above.

Default WooCommerce Order-Pay Page

Additionally, you may opt to add the images to the order-pay page after users have placed the order. This is the default of the Order Pay Page:

This can be done to optimize the page and users can see an image of what they have purchased, besides the short description. It is very simple to do this and you simply need to follow these steps.

Steps to Add Product Images on the Order Pay Page of your WooCommerce Store

1. Log into your WordPress site and access the Dashboard as the admin user.
2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will Show Product Image at Order Pay Page.
3. Add the following code to the php file:

   /**
   * @snippet WooCommerce Show Product Image @ Order-Pay Page
   * @author HKWeb+
   */</pre>
   add_filter( 'woocommerce_order_item_name', 'ts_product_image_on_order_pay', 10, 3 );
   function ts_product_image_on_order_pay( $name, $item, $extra ) {
   /* Return if not checkout page */
   if ( ! is_checkout() ) {
   return $name;
   }
   $product_id = $item-&gt;get_product_id();
   /* Get product object */
   $_product = wc_get_product( $product_id );
   /* Get product thumbnail */
   $thumbnail = $_product-&gt;get_image();
   /* Add wrapper to image and add some css */
   $image = '
   <div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">'
   . $thumbnail .
   '</div>
   ';
   /* Prepend image to name and return it */
   return $image . $name;
   }
   

4. To see the outcome of this code you need to refresh the Order Pay page and you should see this:
   

Conclusion

In this post, HKWeb+ has highlighted two areas where you can add the product image, which is Woocommerce Checkout & Order-Pay pages. We do not recommend overriding the theme, as this can create conflict with a theme. It is advisable to use a filter to do this as shown in the simple steps above.

18/03/2022

全新 Digital Marketing 體驗，請聯絡 Web 仔。

IT 及增值服務：創建網站、推廣行銷、開立公司。