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.
2条回答 默认 最新
- doujiao9574 2018-04-02 18:41关注
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.
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报