Showing product images on the WooCommerce payment page makes a great contribution to users. Because it is the right of every e-commerce customer to see what their order is and check them before payment.
In this article, I will tell you how you can show your mini product images in the product details on the payment form on your WooCommerce sites. First of all, always make a backup without interfering with the theme codes. As you can see in the product details in the image below, you only write the product name and quantity;
You can activate this feature by adding the php codes below to your theme’s functions.php file. You can add it to your functions.php file by going to View> Theme Editor. Or, you can take a look at the content named “Adding code to functions file with the Code Snippets plugin” that I shared before. Example usage will be as follows;
The php code you need to add is as follows;
/**
* Displaying Product Images on the WooCommerce Payment Page
*
* @template {templates|woocommerce}/checkout/review-order.php
*/
add_filter( 'woocommerce_cart_item_name', 'jfs_checkout_show_product_thumbnail', 10, 2 );
function jfs_checkout_show_product_thumbnail( $name, $cart_item ) {
if ( ! is_checkout() ) return $name;
$thumbnail = '<span class="product-name__thumbnail customimagecheckout">' . get_the_post_thumbnail( $cart_item['product_id'], array( 60, 120 ) ) . '</span>';
return $thumbnail . '<span class="product-name__text">' . $name . '</span>';
}After this process, you can now easily show the product images on the payment page. Remember, this code will only show product images on the payment page. On the cart page, by default, WooCommerce displays product images in a table. After adding the code, the order details on the payment page will be as follows;
It might look a little weak in style. If you have CSS knowledge, you can create a custom style using the customimagecheckout tag. Do not hesitate to ask any questions you have in the comment area.
