WooCommerce 列表页增加产品自定义图片

WooCommerce 默认情况下产品列表页只调用了一张产品的缩略图，如何增加一张自定义的产品图片，来使每个产品拥有两个图片调用呢？

在模板文件中找到 woocommerce 的 content-product.php 文件，其中有一行代码 do_action( ‘woocommerce_before_shop_loop_item_title’ ); 这是一个用于触发在商品标题之前显示内容的动作钩子（action hook），它包含了产品缩略图的调用。

如果要再继续添加另一张图片，可以创建一个自定义的回调函数，并将其挂钩到该动作上。在这个自定义的回调函数中，您可以输出您想要显示的自定义图像。

以下是一个简单的示例，展示如何实现这一点：

function custom_content_before_product_title() {
    // 添加您自定义的图像路径
    $custom_image_url = 'URL_TO_YOUR_CUSTOM_IMAGE';

    // 输出自定义图像的HTML
    echo '
';
    echo '. esc_url($custom_image_url) . '" alt="Custom Image">';
    echo '
';
}

add_action( 'woocommerce_before_shop_loop_item_title', 'custom_content_before_product_title', 10 );

在这个例子中，您需要将URL_TO_YOUR_CUSTOM_IMAGE替换为您实际自定义图像的URL。这个函数将在每个商品标题之前输出一个包含自定义图像的

元素。

请注意，esc_url函数用于对URL进行转义，以确保它是安全的。

如果要使用文章的自定义字段（custom field）thumbHover 来设置自定义图像的URL，可以使用 WordPress的 内置函数 get_post_meta 来获取该自定义字段的值。以下是一个修改过的代码示例：

function custom_content_before_product_title() {
    // 获取当前商品的ID
    global $product;
    $product_id = $product->get_id();

    // 获取自定义字段 thumbHover 的值
    $custom_image_url = get_post_meta( $product_id, 'thumbHover', true );

    // 输出自定义图像的HTML
    if ( ! empty( $custom_image_url ) ) {
        echo '
';
        echo '. esc_url( $custom_image_url ) . '" alt="Custom Image">';
        echo '
';
    }
}

add_action( 'woocommerce_before_shop_loop_item_title', 'custom_content_before_product_title', 10 );

在这个示例中，使用了 get_post_meta 函数，该函数接受三个参数：文章ID（或产品ID）、自定义字段的名称（thumbHover）以及一个可选的布尔值，用于指示是否只返回单个值。如果您的自定义字段只存储一个值，设置为 true，否则设置为 false。

请确保在添加这个代码之前，您的商品或文章已经有了 thumbHover 这个自定义字段，并且填写了正确的图像URL。如果自定义字段不存在或者没有值，代码中的条件判断将确保不输出空的HTML。