如何在 WooCommerce 中为产品标签添加链接列表，提升客户体验？

2024-03-03 19:57:47

使用 WooCommerce 为产品标签添加链接列表，提升客户体验

在电子商务网站中，产品标签是一个关键元素，它使客户能够轻松浏览和查找相关产品。通过在 WooCommerce 中显示带有链接的产品标签列表，你可以增强客户体验，简化导航，并提高销售额。本文将提供一个循序渐进的指南，介绍如何使用两种方法在 WooCommerce 中实现此功能。

方法 1：使用函数

添加代码： 将以下代码复制并粘贴到你的主题的 functions.php 文件中：

function product_tags_list() {
    $args = array(
        'taxonomy' => 'product_tag',
    );
    $tags = get_terms( $args );
    if ( $tags ) {
        echo '<ul class="product-tags">';
        foreach ( $tags as $tag ) {
            echo '<li><a href="' . get_term_link( $tag ) . '" rel="tag">' . $tag->name . '</a></li>';
        }
        echo '</ul>';
    }
}
add_action( 'woocommerce_after_shop_loop_item_title', 'product_tags_list' );

自定义样式： 根据你的主题需要，添加 CSS 样式来调整标签列表的外观。

方法 2：使用模板

创建模板： 创建名为 product-tags-list.php 的新模板文件，并添加以下代码：

<?php
/**
 * Template Name: Product Tags List
 */

global $product;

$tags = get_the_terms( $product->get_id(), 'product_tag' );

if ( $tags ) {
    echo '<ul class="product-tags">';
    foreach ( $tags as $tag ) {
        echo '<li><a href="' . get_term_link( $tag ) . '" rel="tag">' . $tag->name . '</a></li>';
    }
    echo '</ul>';
}

分配模板： 将此模板分配给 WooCommerce 产品页面。

自定义样式

无论使用哪种方法，你都可以使用以下 CSS 自定义标签列表的样式：

.product-tags {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}

.product-tags li {
    margin: 0 5px 5px 0;
}

.product-tags a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ccc;
    text-decoration: none;
}

.product-tags a:hover {
    background-color: #ccc;
}