导读:本期聚焦于小伙伴创作的《WooCommerce购物车显示产品品牌名称:自定义代码与插件实现教程》,敬请观看详情,探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《WooCommerce购物车显示产品品牌名称:自定义代码与插件实现教程》有用,将其分享出去将是对创作者最好的鼓励。

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购物车页面显示产品的品牌名称。这不仅有助于提升用户体验,减少购买疑虑,还能加强顾客对你网站所售品牌的印象。选择自定义代码方式可以获得最大的灵活性,而使用插件自带功能则适合不想修改代码的站长。无论选择哪种方式,都能为你的电商网站带来更专业的展示效果。

WooCommerce购物车页面产品品牌自定义分类法钩子函数

免责声明:已尽一切努力确保本网站所含信息的准确性。网站部分内容来源于网络或由用户自行发表,内容观点不代表本站立场。本站是个人网站免费分享,内容仅供个人学习、研究或参考使用,如内容中引用了第三方作品,其版权归原作者所有。若内容触犯了您的权益,请联系我们进行处理。
内容垂直聚焦
专注技术核心技术栏目,确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计,为用户提供无干扰的纯技术知识沉淀,精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。前端、网络、数据库、服务器、建站、系统层层递进,构建清晰学习路径,帮助用户系统化掌握网站开发与运维所需的核心技术栈。
深度技术解析
拒绝泛泛而谈,深入技术细节与实践难点。无论是数据库优化还是服务器配置,均结合真实场景与代码示例进行剖析,致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端逻辑,从数据库操作到服务器运维,形成完整闭环,一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性,步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目,显著缩短从学习到实践的距离,快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代,紧跟主流技术发展趋势,为用户提供经久不衰的学习价值。