Can WooCommerce product image be overridden in functions.php?

Question

I have a unique situation where the product image defined in a WooCommerce product needs to be a different image in the cart and checkout than what is defined as the product image as shown on the product page. Is there a method of overriding it with an alternative that shows just at cart/checkout? I'm not able to figure this out without some guidance. Sorry if this is too simple for SO.

Answer 1

A big thanks to Ben Kelly for pointing me in the right direction. Below is the actual solution we implemented. Your own solution may vary.

First, we set up a custom image field in the product editor using the Advanced Custom Fields plugin. Then we uploaded the desired cart/checkout image to each product's custom image field.

Then we changed the following parts of the following files.

/wp-content/themes/mychildtheme/woocommerce/cart

<td class="product-thumbnail">
                        <?php
                            $thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );

                            if ( ! $product_permalink ) {
                            if(get_field('cart_&_checkout_image', $product_id)) {

                                echo '<img src="'.get_field('cart_&_checkout_image', $product_id)['url'].'" data-lazy-src="'.get_field('cart_&_checkout_image', $product_id)['url'].'" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" style="max-height: 92px;object-fit: contain;object-position: left;width: 100%;">';

                            } else {
                                echo $thumbnail;
                            }

                            } else {
                            if(get_field('cart_&_checkout_image', $product_id)) {
                                echo '<a href="'.esc_url( $product_permalink ).'"><img src="'.get_field('cart_&_checkout_image', $product_id)['url'].'" data-lazy-src="'.get_field('cart_&_checkout_image', $product_id)['url'].'" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" style="max-height: 92px;object-fit: contain;object-position: left;width: 100%;"></a>';                                  
                            } else {

                                echo '<a href="'.esc_url( $product_permalink ).'">'.$thumbnail.'</a>';

                            }
                            }
                        ?>
                    </td>

/wp-content/themes/mychildtheme/woocommerce/checkout/form-checkout.php

<td class="product-thumbnail">
                        <?php

                            $thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );

                            if ( ! $product_permalink ) {
                            if(get_field('cart_&_checkout_image', $product_id)) {

                                echo '<img src="'.get_field('cart_&_checkout_image', $product_id)['url'].'" data-lazy-src="'.get_field('cart_&_checkout_image', $product_id)['url'].'" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" style="max-height: 145px;object-fit: contain;object-position: left;">';

                            } else {
                                echo $thumbnail;
                            }

                            } else {
                            if(get_field('cart_&_checkout_image', $product_id)) {
                                echo '<a href="'.esc_url( $product_permalink ).'"><img src="'.get_field('cart_&_checkout_image', $product_id)['url'].'" data-lazy-src="'.get_field('cart_&_checkout_image', $product_id)['url'].'" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" style="max-height: 145px;object-fit: contain;object-position: left;"></a>';                                 
                            } else {

                                echo '<a href="'.esc_url( $product_permalink ).'">'.$thumbnail.'</a>';

                            }
                            }
                        ?>
                    </td>

Plus some styling in the child theme's style.css file. While I'm aware that the better solution would be to update the functions.php file rather than override individual WooCommerce template files, this was the best solution for our site at the moment.

Answer 2

There's actually two methods for doing this:

You can override the cart and checkout templates in your theme.

WooCommerce allows you to override most of it's templates by adding them in the correct directory structure within your theme folder. See here.

Basically this means if you create a file within your theme at this path;

/your-theme/woocommerce/cart/cart.php

You can completely customise this page. As of the latest version of WooCommerce you'd need to replace line 68;

$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );

With your own image getting methods.

However, this isn't very future proof, when WooCommerce updates their base templates yours might stop working or miss out on new features so...

The preferred option: You can use filters

The filter for the cart image is;

woocommerce_cart_item_thumbnail

So you need to create a function in your functions.php that returns the image you want.

function custom_product_image($image) {
   $new_image = "<img src='a-really-cool-image.png' class='my-image' />

   return $new_image;

}

add_filter('woocommerce_cart_item_thumbnail', 'custom_product_image');

By default it looks like the image doesn't actually display on the checkout so if you want this you'll have to look into WooCommerce hooks.