5

I'm using woocommerce on a site I'm working on and I want to display the current product thumbnail at the top of the checkout page, so the user could take a look at what his going to buy.

However I can't find any way to do so.

The closest I got, is to use WC::cart->get_cart(), but this outputs a list of all products.

How can I achieve this?

Thanks

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
Avishay28
  • 2,288
  • 4
  • 25
  • 47
  • Welcome to StackOverflow, please include more code to give context about your question. – FishStix Aug 06 '16 at 02:09
  • welcome to Stackoverflow, what you really want? the checkout page only have the products that are in your cart. Clear the question please – Farrukh Faizy Aug 06 '16 at 07:13
  • @LoicTheAztec you right, I was a little busy the past two days. Your solution works and I accepted the answer, thank you – Avishay28 Aug 07 '16 at 06:26

1 Answers1

16

Yes it's possible writing a custom function.

To display those images at the beginning of checkout page just after your header's theme, use this code:

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 ) {
        $product = $cart_item['data'];
        if(!empty($product)){
            // $image = wp_get_attachment_image_src( get_post_thumbnail_id( $product->ID ), 'single-post-thumbnail' );
            echo $product->get_image();

            // to display only the first product image uncomment the line below
            // break;
        }
    }
}

This code snippet goes on function.php file of your active child theme or theme

You can change the images properties adding some options in get_image() function.

This code is tested and fully functional

OTHER USAGES - You can also use it:

1). With the following others checkout WooCommerce hooks (replacing the first line in the snippet code with one of this):

• Before customer details:

add_action('woocommerce_checkout_before_customer_details', 'displays_cart_products_feature_image');

• After customer details:

add_action('woocommerce_checkout_after_customer_details', 'displays_cart_products_feature_image');

• Before order review:

add_action('woocommerce_checkout_before_order_review', 'displays_cart_products_feature_image');

2). Directly inside your woocommerce templates (this snippet code goes on function.php file of your active child theme or theme):

function displays_cart_products_feature_image() {
    foreach ( WC()->cart->get_cart() as $cart_item ) {
        $product = $cart_item['data'];
        if(!empty($product)){
            // $image = wp_get_attachment_image_src( get_post_thumbnail_id( $product->ID ), 'single-post-thumbnail' );
            echo $product->get_image();

            // to display only the first product image uncomment the line below
            // break;
        }
    }
}

Then you will just paste one of this inside the template file:

  • inside HTML code: <?php displays_cart_products_feature_image(); ?>
  • inside PHP code: displays_cart_products_feature_image();

Reference:

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399