WooCommerce购物车页面显示产品品牌名称教程
在WooCommerce电子商务网站中,产品品牌是影响消费者购买决策的重要因素之一。默认情况下,WooCommerce的购物车页面只显示产品名称、缩略图、价格和数量,并不会显示产品的品牌名称。为了让顾客在结账前再次确认品牌,增强品牌认知度与信任感,本文将详细介绍如何在WooCommerce购物车页面中添加产品品牌名称。
前提条件
在开始本教程之前,请确保你的网站已经具备品牌功能。WooCommerce核心本身不包含品牌分类,通常你需要使用第三方品牌插件(如YITH WooCommerce Brands Add-On)或通过自定义分类法来注册品牌。本文假设你的产品品牌存储在名为 product_brand 的自定义分类法中。如果你的品牌分类法名称不同,请在后续代码中进行相应替换。
方法一:通过自定义代码添加品牌名称
这是最推荐的方法,无需安装额外的扩展插件,只需将一段PHP代码添加到你的主题或子主题的 functions.php 文件中即可。我们将使用WooCommerce提供的 woocommerce_cart_item_name 钩子来实现此功能。
请将以下代码添加到你的 functions.php 文件末尾:
add_filter( 'woocommerce_cart_item_name', 'display_brand_in_cart', 10, 3 );
function display_brand_in_cart( $product_name, $cart_item, $cart_item_key ) {
// 获取产品对象
$product = $cart_item['data'];
// 确保仅在购物车页面执行,避免影响结账等其他页面
if ( is_cart() ) {
// 获取产品的品牌分类法术语
$brands = wp_get_post_terms( $product->get_id(), 'product_brand' );
if ( ! is_wp_error( $brands ) && ! empty( $brands ) ) {
$brand_name = $brands[0]->name;
// 将品牌名称附加到产品名称下方
$product_name .= '<br><span class="cart-item-brand">品牌: ' . esc_html( $brand_name ) . '</span>';
}
}
return $product_name;
}代码解析
woocommerce_cart_item_name:这是WooCommerce用于过滤购物车中产品名称的钩子。is_cart():条件判断函数,确保此逻辑仅在购物车页面生效,避免影响结账页面或小工具中的产品名称展示。wp_get_post_terms():WordPress函数,用于获取指定分类法下的术语,这里获取的是product_brand。输出格式:使用
<br>标签换行,并用<span class="cart-item-brand">包裹品牌名称,方便后续通过CSS添加样式。
美化品牌名称样式
默认插入的品牌名称可能看起来比较普通,你可以通过添加一些CSS代码来美化它,使其更加醒目并与你的主题风格保持一致。你可以将以下CSS代码添加到WordPress自定义器的额外CSS区域或你的主题样式表中:
.cart-item-brand {
display: inline-block;
margin-top: 5px;
font-size: 0.85em;
color: #666666;
background-color: #f5f5f5;
padding: 2px 8px;
border-radius: 3px;
font-weight: normal;
}此样式将为品牌名称添加一个浅灰色的背景和圆角效果,字体略小于产品名称,使其在视觉上形成层次感。
扩展:在结账页面也显示品牌
如果你希望在结账页面也同步显示产品的品牌名称,只需将上述PHP代码中的 is_cart() 条件判断去掉即可。修改后的代码如下:
add_filter( 'woocommerce_cart_item_name', 'display_brand_in_cart_and_checkout', 10, 3 );
function display_brand_in_cart_and_checkout( $product_name, $cart_item, $cart_item_key ) {
$product = $cart_item['data'];
$brands = wp_get_post_terms( $product->get_id(), 'product_brand' );
if ( ! is_wp_error( $brands ) && ! empty( $brands ) ) {
$brand_name = $brands[0]->name;
$product_name .= '<br><span class="cart-item-brand">品牌: ' . esc_html( $brand_name ) . '</span>';
}
return $product_name;
}方法二:使用品牌插件自带功能
如果你使用的是知名的品牌管理插件,它们通常自带在购物车和结账页面显示品牌的选项。以YITH WooCommerce Brands Add-On为例:
进入WordPress后台,找到YITH插件的品牌设置页面。
寻找与显示选项相关的设置选项卡。
勾选在购物车页面显示品牌的选项,并保存设置。
这种方法更为简单,但灵活性受限于插件提供的功能。如果你需要完全控制显示位置和样式,方法一仍然是首选。
总结
通过上述方法,你可以轻松地在WooCommerce购物车页面显示产品的品牌名称。这不仅有助于提升用户体验,减少购买疑虑,还能加强顾客对你网站所售品牌的印象。选择自定义代码方式可以获得最大的灵活性,而使用插件自带功能则适合不想修改代码的站长。无论选择哪种方式,都能为你的电商网站带来更专业的展示效果。