Question

我有一个独特的情况，即WooCommerce产品中定义的产品图像需要与购物车和结帐中的图像不同，而不是产品页面上显示的产品图像。有没有一种方法可以用一种替代方式覆盖它，只显示购物车/结账时？没有一些指导，我无法弄清楚这一点。对不起，如果这对SO来说太简单了。

Answer 1

实际上有两种方法可以做到这一点：

您可以覆盖主题中的购物车和结帐模板。

WooCommerce允许您通过在主题文件夹中的正确目录结构中添加它们来覆盖其大部分模板。请参阅here。

基本上这意味着如果您在此主题中创建主题中的文件;

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

您可以完全自定义此页面。从最新版本的WooCommerce开始，您需要更换第68行;

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

使用您自己的图像获取方法。

然而，这不是一个非常未来的证据，当WooCommerce更新他们的基本模板时，你的基础模板可能会停止工作或错过新功能，所以...

首选选项：您可以使用过滤器

购物车图片的过滤器是;

woocommerce_cart_item_thumbnail

因此，您需要在functions.php中创建一个返回所需图像的函数。

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');

默认情况下，图片看起来并没有真正显示在结帐中，所以如果你想要这个，你必须查看WooCommerce钩子。

Answer 2

非常感谢Ben Kelly指出我正确的方向。以下是我们实施的实际解决方案。您自己的解决方案可能会有所不同。

首先，我们使用Advanced Custom Fields插件在产品编辑器中设置自定义图像字段。然后，我们将所需的购物车/结帐图像上传到每个产品的自定义图像字段。

然后我们更改了以下文件的以下部分。

<强> /可湿性粉剂内容/主题/ mychildtheme / woocommerce /购物车

<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>

在儿童主题的style.css文件中加上一些样式。虽然我知道更好的解决方案是更新functions.php文件而不是覆盖单个WooCommerce模板文件，但这是我们网站目前的最佳解决方案。

可以在functions.php中覆盖WooCommerce产品图片吗？

2 个答案: