如何识别并显示WooCommerce购物车页面的产品品牌信息
在WooCommerce电商网站中,购物车页面是用户结账前的最后关键步骤。默认情况下,WooCommerce购物车仅显示产品名称、图片、价格和数量。然而,对于拥有多个品牌的商店来说,在购物车中显示产品品牌信息能够极大地增强用户的购买信心,减少结账犹豫。本文将详细指导您如何识别产品的品牌数据,并通过自定义代码将其显示在WooCommerce购物车页面中。
一、识别产品品牌的存储方式
在编写代码之前,首先需要明确您的WooCommerce网站是如何存储产品品牌信息的。不同的插件或主题可能使用不同的方式来记录品牌:
自定义分类法:这是最常见的方式。例如,流行的WooCommerce品牌插件通常会创建一个名为
product_brand的自定义分类法。某些主题可能使用pa_brand(产品属性)或yith_product_brand。自定义字段:部分网站可能通过高级自定义字段或自带的
<meta>框来存储品牌名称,例如字段键名为_brand。
您可以通过查看产品编辑页面,或者使用浏览器开发者工具检查数据库,来确定品牌分类法的确切名称。在接下来的示例中,我们将假设品牌存储在 product_brand 分类法中。
二、获取并显示品牌信息到购物车
WooCommerce提供了丰富的钩子来修改购物车页面的内容。要在产品名称下方显示品牌,我们可以使用 woocommerce_cart_item_name 过滤器钩子。
1. 编写自定义函数(基于自定义分类法)
我们需要创建一个函数,该函数接收购物车项目的产品对象,获取其关联的品牌术语,并将其格式化输出。
add_filter( 'woocommerce_cart_item_name', 'display_product_brand_in_cart', 10, 3 );
function display_product_brand_in_cart( $product_name, $cart_item, $cart_item_key ) {
// 确保在购物车页面执行
if ( ! is_cart() ) {
return $product_name;
}
// 获取产品对象
$product = $cart_item['data'];
// 检查产品对象是否存在且为有效实例
if ( ! is_a( $product, 'WC_Product' ) ) {
return $product_name;
}
// 获取产品的品牌分类法名称(请根据实际情况替换 'product_brand')
$taxonomy = 'product_brand';
$terms = get_the_terms( $product->get_id(), $taxonomy );
// 如果存在品牌信息,则进行输出
if ( $terms && ! is_wp_error( $terms ) ) {
$brand_names = array();
foreach ( $terms as $term ) {
$brand_names[] = $term->name;
}
$brand_string = implode( ', ', $brand_names );
// 将品牌信息附加到产品名称后面
$product_name .= '<br><span class="cart-product-brand">品牌: ' . esc_html( $brand_string ) . '</span>';
}
return $product_name;
}在上述代码中,我们首先检查当前是否为购物车页面。然后获取产品ID,并使用WordPress原生的 get_the_terms 函数获取关联的品牌分类。如果获取成功,我们将品牌名称拼接并附加到产品名称变量中,使用 <br> 标签换行,并包裹在一个 <span> 标签中以便自定义样式。
2. 处理自定义字段存储的品牌
如果您的品牌信息是通过自定义字段存储的,获取方式会有所不同。您需要使用 get_post_meta 函数来获取品牌数据。
add_filter( 'woocommerce_cart_item_name', 'display_custom_field_brand_in_cart', 10, 3 );
function display_custom_field_brand_in_cart( $product_name, $cart_item, $cart_item_key ) {
if ( ! is_cart() ) {
return $product_name;
}
$product = $cart_item['data'];
if ( ! is_a( $product, 'WC_Product' ) ) {
return $product_name;
}
// 获取自定义字段品牌(请根据实际情况替换 '_brand')
$brand = get_post_meta( $product->get_id(), '_brand', true );
if ( ! empty( $brand ) ) {
$product_name .= '<br><span class="cart-product-brand">品牌: ' . esc_html( $brand ) . '</span>';
}
return $product_name;
}三、代码部署与样式美化
将上述适合您网站情况的代码片段添加到您当前激活主题的 functions.php 文件中,或者使用代码片段插件进行添加。请勿直接修改核心文件,以免更新时丢失修改。
添加代码后,您可能会发现品牌文字的样式不够美观。可以通过CSS来优化显示效果。在主题的自定义CSS区域添加以下样式代码:
.cart-product-brand {
display: inline-block;
font-size: 0.85em;
color: #666;
margin-top: 4px;
font-weight: normal;
}此样式将品牌信息设置为较小的字号,颜色略浅于产品名称,并增加上边距,使其视觉层次更加清晰。
四、注意事项
分类法名称确认:务必确认您的网站存储品牌所使用的分类法名称。如果名称错误,代码将无法获取到品牌数据。
可变产品处理:对于可变产品,上述代码获取的是父产品的品牌。如果您将品牌设置在具体的变化版本上,需要额外获取变体ID的品牌信息。
缓存影响:某些购物车插件或缓存插件可能会影响动态内容的输出。如果添加代码后没有变化,请尝试清理缓存。
结账页面延伸:如果您希望在结账页面也显示品牌,只需移除代码中的
if ( ! is_cart() )判断条件即可。
五、总结
通过合理利用WooCommerce的钩子系统,我们可以轻松地将产品品牌信息展示在购物车页面。这不仅丰富了页面的信息维度,也为消费者提供了更透明的购物体验。只需准确识别品牌的存储方式,并插入相应的代码片段,即可完成功能的扩展。