Created
October 15, 2017 09:50
-
-
Save dr5hn/10b241076ac3c8ac1e4d84f7ec48866e to your computer and use it in GitHub Desktop.
How to show product image on checkout page. Woocommerce
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/* | |
* Showing Product Image on Checkout Page -- By Darshan Gada | |
*/ | |
add_action('woocommerce_before_checkout_form', 'displays_cart_products_feature_image'); | |
function displays_cart_products_feature_image() { | |
foreach ( WC()->cart->get_cart() as $cart_item ) { | |
$item = $cart_item['data']; | |
//print_r($item); | |
if(!empty($item)){ | |
$product = new WC_product($item->id); | |
// $image = wp_get_attachment_image_src( get_post_thumbnail_id( $product->ID ), 'single-post-thumbnail' ); | |
echo $product->get_image(); | |
echo $product->name; | |
echo $product->price; | |
// to display only the first product image uncomment the line bellow | |
// break; | |
} | |
} | |
} | |
?> |
As of woocommerce 3.9.3
/** * Show product thumbnail on checkout page. * * @see {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" style="float: left; padding-right: 15px">' . get_the_post_thumbnail( $cart_item['product_id'], array( 60, 120 ) ) . '</span>'; return $thumbnail . '<span class="product-name__text">' . $name . '</span>'; }
This is perfect for my flatsome theme. Screenshot- https://drive.google.com/file/d/11EkrNQoNkA9K_G2M8p3fZ7Vu_i6h5Waw/view?usp=sharing
Do you have a code for showing image on /checkout/order-received/ page?
Thank you very much for your help
I was able to display the product image in the checkout section
Can you help me how can I add a product attribute to this section?
Help us if you can
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@farinspace
same here, I see double thumbnails on mobile. any way to fix it?