Offcanvas

When Should We Call You?

Edit Template

[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

Show Product Image on WooCommerce Checkout & Order-Pay Pages

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:
    [php]/**
    * @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;
    }
    [/php]

  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:
    [php]/**
    * @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;
    }
    [/php]

  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.


Web仔


全新 Digital Marketing 體驗,請聯絡 Web 仔


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

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Popular Articles

Everything Just Becomes So Easy

Lorem Ipsum is simply dumy text of the printing typesetting industry lorem ipsum.

Most Recent Posts

  • All Post
  • Banking
  • Business
  • Comertial
  • DropShipping
  • Entertinment
  • SEO
  • Wordpress
  • 大數據
  • 教學
  • 數碼營銷
  • 新知
  • 機器學習
  • 社交媒體營銷
  • 網站設計
  • 網絡安全

夢想由這一刻開始

make your dream comes true more easier and faster!

You have been successfully Subscribed! Ops! Something went wrong, please try again.