专注 WordPress 高端企业主题的的设计与开发! 共同抗击疫情,即日至疫情结束8折优惠(不含促销产品),优惠券:TYZH2020。

WooCommerce 通过woocommerce_cart_item_thumbnail钩子修改购物车缩略图

2020 年 4 月 25 日 1.40K次

在开发基于 WooCommerce 的商城主题时,我们一般会将模板文件添加到主题中来进行修改,对于有钩子或接口的地方,就没有必要再修改模板代码了,减少主题文件或代码的同时也带来很多便捷。比如:使用 woocommerce_cart_item_thumbnail 钩子来修改购物车的缩略图,很方便。

一、woocommerce_cart_item_thumbnail 的简介

WordPress 核心代码 WooCommerce 购物车项目缩略图钩子。

1、描述


apply_filters( 'woocommerce_cart_item_thumbnail', $product_get_image, $cart_item, $cart_item_key );

2、参数

a$product_get_image,获取产品图片

b$cart_item,购物车项目/商品

c$cart_item_key,购物车商品密钥

3、用法

a、运行钩子


$product_get_image = apply_filters( 'woocommerce_cart_item_thumbnail', $product_get_image, $cart_item, $cart_item_key ); 
if ( !empty( $product_get_image ) ) { 
   // 代码
}

b、添加钩子回调


// 定义 woocommerce_cart_item_thumbnail 回调 
function filter_woocommerce_cart_item_thumbnail( $product_get_image, $cart_item, $cart_item_key ) { 
    // 过滤代码
    return $product_get_image; 
}; 
// 添加过滤器
add_filter( 'woocommerce_cart_item_thumbnail', 'filter_woocommerce_cart_item_thumbnail', 10, 3 );

c、删除钩子


// 删除过滤器
remove_filter( 'woocommerce_cart_item_thumbnail', 'filter_woocommerce_cart_item_thumbnail', 10, 3 );

二、woocommerce_cart_item_thumbnail 实例

WooCommerce 缩略图是获取产品特色图像,没有设置则显示一张默认的图片,而在 WordPress 主题的开发中,会添加一张自定义字段图片来作为缩略图,将这张自定义字段的缩略图添加到购物车项目中:


/**
 * 修改购物车页面缩略图显示
 */
function salong_filter_woocommerce_cart_item_thumbnail( $product_get_image, $cart_item, $cart_item_key ) {

    /*产品项目 ID*/
    $post_id = $cart_item['product_id'];
    /*自定义缩略图字段*/
    $thumb   = get_post_meta($post_id, "thumb", true);

    if($thumb) {
        /*自定义缩略图*/
        $product_get_image = '<img class="thumb" src="'.$thumb.'" alt="'.get_the_title($post_id).'" />';
    }

    return $product_get_image;

}
add_filter( 'woocommerce_cart_item_thumbnail', 'salong_filter_woocommerce_cart_item_thumbnail', 10, 3 );

这样就完美实现了将自定义字段图片添加到购物车项目中。