在 WooCommerce 产品页面显示精选产品标签

本文将介绍如何在 WooCommerce 产品页面上，根据产品是否被设置为精选产品，动态显示一个“Featured”标签。我们将使用 wc_get_featured_product_ids() 函数来判断产品是否为精选产品，并在产品摘要之前显示相应的标签。本文提供了详细的代码示例和步骤，帮助你轻松实现这一功能。

实现步骤

以下步骤将指导你如何在 WooCommerce 产品页面上显示精选产品标签：

1. 打开你的主题或子主题的 functions.php 文件。 建议使用子主题，以避免在主题更新时丢失自定义代码。
2. 添加以下代码到 functions.php 文件中：

function action_woocommerce_before_single_product_summary() {
    global $product;

    // 检查是否为 WooCommerce 产品
    if ( is_a( $product, 'WC_Product' ) ) {
        // 获取产品 ID
        $product_id = $product->get_id();

        // 获取所有精选产品的 ID 数组
        $featured_product_ids = wc_get_featured_product_ids();

        // 检查当前产品 ID 是否在精选产品 ID 数组中
        if ( in_array( $product_id, $featured_product_ids ) ) {
            echo '<span class="property-contract-badge">Featured</span>';
        } else {
            //如果不需要非精选产品显示任何内容，可以注释掉或者删除该行
            //echo 'NOT featured';
        }
    }
}
add_action( 'woocommerce_before_single_product_summary', 'action_woocommerce_before_single_product_summary', 1 );

3. 保存 functions.php 文件。

代码解释

• action_woocommerce_before_single_product_summary() 函数： 这个函数会在 WooCommerce 单个产品摘要之前执行。
• global $product;： 获取全局 $product 对象，该对象包含了当前产品的信息。
• is_a( $product, 'WC_Product' )： 检查 $product 对象是否为 WooCommerce 产品对象。
• $product->get_id()： 获取当前产品的 ID。
• wc_get_featured_product_ids()： 获取所有精选产品的 ID 数组。
• in_array( $product_id, $featured_product_ids )： 检查当前产品 ID 是否存在于精选产品 ID 数组中。
• echo '<span class="property-contract-badge">Featured</span>';： 如果产品是精选产品，则输出带有 "Featured" 文本的 HTML 标签。 你可以根据需要自定义标签的样式和内容。
• add_action( 'woocommerce_before_single_product_summary', 'action_woocommerce_before_single_product_summary', 1 );： 将 action_woocommerce_before_single_product_summary() 函数添加到 woocommerce_before_single_product_summary 钩子上，并设置优先级为 1。

自定义样式

你可以通过 CSS 自定义 "Featured" 标签的样式。 在你的主题的 style.css 文件或者自定义 CSS 文件中添加以下代码：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

.property-contract-badge {
    background-color: #f00; /* 红色背景 */
    color: #fff; /* 白色文字 */
    padding: 5px 10px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    font-size: 14px; /* 字体大小 */
}

根据你的需求修改颜色、字体、边距等属性。

注意事项

• 确保你使用的是 WooCommerce 插件。
• 建议将代码添加到子主题的 functions.php 文件中，以避免在主题更新时丢失自定义代码。
• wc_get_featured_product_ids() 函数返回的是产品 ID 数组，因此需要使用 in_array() 函数来检查产品是否为精选产品。
• 你可以根据需要自定义 HTML 标签的样式和内容。

总结

通过使用 wc_get_featured_product_ids() 函数，我们可以轻松地在 WooCommerce 产品页面上显示精选产品标签。 这种方法简单有效，可以帮助你突出显示精选产品，提高用户体验。 记住要将代码添加到子主题的 functions.php 文件中，并根据需要自定义标签的样式。

以上就是在 WooCommerce 产品页面显示精选产品标签的详细内容，更多请关注php中文网其它相关文章！