在WooCommerce单品页自动显示所有变体商品价格列表

---

本教程旨在指导WooCommerce用户如何在产品详情页自动展示所有变体商品的详细价格列表，从而取代手动输入，并确保价格信息随商品更新而同步。通过集成自定义PHP代码和WooCommerce动作钩子，我们将实现一个动态生成价格列表的功能，提升用户体验和管理效率。

一、问题背景与解决方案概述

在WooCommerce中，对于拥有多种变体（如不同尺寸、颜色）的产品，其价格可能因变体而异。许多商家为了方便顾客了解所有价格选项，会在产品描述中手动列出每个变体的价格。然而，这种做法效率低下，且在价格变动时需要反复手动更新，极易出错。

本教程将提供一个自动化解决方案，通过在主题的 functions.php 文件中添加一段自定义PHP代码，利用WooCommerce的动作钩子（Action Hook）在产品详情页动态抓取并展示所有变体的价格列表。这意味着一旦变体价格在后台更新，前台显示的价格列表也会自动同步，无需任何手动干预。

二、实现步骤

要实现变体价格的自动列表显示，您需要将提供的PHP代码片段添加到您的WordPress主题（推荐使用子主题）的 functions.php 文件中。

1. 访问主题的 functions.php 文件

您可以通过以下两种方式访问并编辑 functions.php 文件：

• 通过WordPress后台： 登录WordPress后台，导航至“外观” > “主题文件编辑器”。在右侧文件列表中找到并选择 functions.php 文件。
• 通过FTP/文件管理器： 使用FTP客户端或您的主机控制面板中的文件管理器，导航到 /wp-content/themes/您的主题名称/ 目录，然后打开 functions.php 文件进行编辑。

重要提示： 在修改 functions.php 文件之前，请务必备份您的网站或该文件。错误的修改可能导致网站无法访问。强烈建议使用子主题进行任何代码修改，以避免主题更新时代码被覆盖。

2. 添加自定义PHP代码

将以下代码复制并粘贴到 functions.php 文件的末尾（在 ?> 标签之前，如果存在的话）。

/**
 * 在WooCommerce单品页列出所有变体商品的价格
 */
function list_variation_prices_on_single_product() {
    global $product; // 获取当前全局产品对象

    // 检查当前产品是否为可变产品
    if ($product->get_type() === 'variable') {
        // 获取所有子变体ID
        $variations_ids = $product->get_children();

        // 如果存在变体
        if ($variations_ids) {
            echo '<div class="woocommerce-variation-price-list">'; // 添加一个容器以便于CSS样式控制
            echo '<h4>' . esc_html__('所有变体价格', 'your-text-domain') . '</h4>'; // 可选标题
            echo '<ul>'; // 使用无序列表显示价格

            // 遍历每个变体ID
            foreach ($variations_ids as $variation_id) {
                // 获取变体产品对象
                $variation_product = wc_get_product($variation_id);

                // 确保变体产品对象有效且可见
                if ($variation_product && $variation_product->is_purchasable() && $variation_product->is_in_stock()) {
                    // 获取并显示变体的HTML格式价格
                    echo '<li>' . $variation_product->get_price_html() . '</li>';
                }
            }
            echo '</ul>';
            echo '</div>';
        }
    }
}

/**
 * 将上述函数挂载到WooCommerce的单品页摘要区域
 * 优先级 25 将使其显示在价格和简短描述之后，添加到购物车按钮之前。
 * 您可以调整优先级以改变显示位置。
 */
add_action('woocommerce_single_product_summary', 'list_variation_prices_on_single_product', 25);

代码说明：

三顾购物系统化妆品版

本版本采用三顾购物平台，适合应用于化妆品销售。一、商品管理 商品发布：支持4种自定义价格，自定义商品字段完美支持多种行业应用，商品显示属性控制，不限上传商品图片，每个商品均有5帧幻灯片支持，拥有新品、特价、推荐等属性，可自定义随意编写商品介绍。商品管理：按各种属性查看商品列表、库存及价格，管理具体商品。商品评论：管理审核删除回复网友对商品的评级及评论。另支持品牌管理、单位管理、赠品管理等。二、订单

0 查看详情

• list_variation_prices_on_single_product() 函数：
  • global $product;：获取当前产品页面的全局 $product 对象。
  • if ($product->get_type() === 'variable')：判断当前产品是否为可变产品。只有可变产品才需要列出变体价格。
  • $variations_ids = $product->get_children();：获取当前可变产品所有子变体的ID数组。
  • foreach ($variations_ids as $variation_id)：循环遍历每个变体ID。
  • $variation_product = wc_get_product($variation_id);：根据变体ID获取对应的 WC_Product_Variation 对象，以便访问其属性。
  • if ($variation_product && $variation_product->is_purchasable() && $variation_product->is_in_stock())：这是一个额外的检查，确保我们只显示可购买且有库存的变体价格，您可以根据需要调整此条件。
  • echo '
  • ' . $variation_product->get_price_html() . '
  ';：输出每个变体的价格。get_price_html() 方法会自动处理价格的格式化，包括显示销售价和原价（如果适用）。

add_action('woocommerce_single_product_summary', 'list_variation_prices_on_single_product', 25);：

• 这是一个WooCommerce动作钩子，用于将我们的自定义函数挂载到产品详情页的特定位置。
• woocommerce_single_product_summary 是一个常用的钩子，它位于产品标题、评分、价格和简短描述之后，添加到购物车按钮之前。
• 25 是函数的执行优先级。数值越小，执行越早。默认的优先级如下（供参考）：
  • woocommerce_template_single_title - 5
  • woocommerce_template_single_rating - 10
  • woocommerce_template_single_price - 10
  • woocommerce_template_single_excerpt - 20
  • woocommerce_template_single_add_to_cart - 30
  • woocommerce_template_single_meta - 40
  • woocommerce_template_single_sharing - 50

三、自定义与优化

1. 调整价格显示方式

在 list_variation_prices_on_single_product 函数内部，$variation_product->get_price_html() 用于显示格式化的价格（可能包含原价和销售价）。如果您需要更具体的控制，可以替换为以下方法：

• $variation_product->get_price();：获取当前（销售或常规）价格。
• $variation_product->get_regular_price();：获取常规价格。
• $variation_product->get_sale_price();：获取销售价格。

例如，如果您只想显示常规价格，可以将代码改为：

echo '<li>' . wc_price($variation_product->get_regular_price()) . '</li>';

请注意，get_price() 等方法返回的是数字，通常需要使用 wc_price() 函数进行格式化，以确保货币符号和千位分隔符正确显示。

2. 改变显示位置

通过调整 add_action 函数中的优先级数值，您可以改变价格列表在产品详情页上的显示位置。参考上面列出的默认优先级，您可以尝试不同的数值，例如：

• add_action('woocommerce_single_product_summary', 'list_variation_prices_on_single_product', 15);：将列表显示在简短描述之前。
• add_action('woocommerce_single_product_summary', 'list_variation_prices_on_single_product', 35);：将列表显示在添加到购物车按钮之后。

您也可以将钩子更改为其他位置，例如：

• woocommerce_before_single_product_summary：在产品摘要区域上方。
• woocommerce_after_single_product_summary：在产品摘要区域下方。

3. 样式定制

我们为价格列表添加了一个 div 容器，类名为 woocommerce-variation-price-list。您可以使用CSS来自定义这个列表的样式，使其与您的网站设计更好地融合。例如，在您的主题的 style.css 文件中添加：

.woocommerce-variation-price-list {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.woocommerce-variation-price-list h4 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.woocommerce-variation-price-list ul {
    list-style: none; /* 移除默认列表点 */
    padding: 0;
    margin: 0;
}

.woocommerce-variation-price-list li {
    padding: 5px 0;
    border-bottom: 1px dotted #f0f0f0;
    display: flex;
    justify-content: space-between; /* 示例：如果价格和变体名称分开显示 */
    align-items: center;
}

.woocommerce-variation-price-list li:last-child {
    border-bottom: none;
}

四、注意事项

• 备份是关键： 在对 functions.php 文件进行任何修改之前，请务必进行网站备份。
• 使用子主题： 强烈建议在子主题的 functions.php 中添加代码。这样，当您的父主题更新时，您的自定义代码不会被覆盖。
• 测试： 添加代码后，务必访问您的可变产品页面，检查价格列表是否正确显示，并确保网站功能正常。
• 性能： 对于拥有大量变体（例如数百个）的产品，循环遍历并获取每个变体信息可能会对页面加载速度产生轻微影响。在大多数情况下，这不会是问题，但如果遇到性能瓶颈，可能需要考虑更高级的缓存策略。
• 国际化： 代码中使用了 esc_html__('所有变体价格', 'your-text-domain')，请将 your-text-domain 替换为您主题或插件的文本域，以确保字符串可以被翻译。

五、总结

通过本教程提供的代码和详细说明，您已经成功地为WooCommerce产品详情页实现了变体价格的自动化列表显示。这不仅大大提高了管理效率，减少了手动更新的繁琐，还为顾客提供了更清晰、更全面的价格信息，从而提升了整体购物体验。记住，灵活运用WooCommerce的钩子机制，是实现高度定制化和自动化功能的强大工具。

以上就是在WooCommerce单品页自动显示所有变体商品价格列表的详细内容，更多请关注php中文网其它相关文章！

# php  # css  # 移除  # 下划线  # 您可以  # 您的  # 自定义  # 币  # css样式  # 性能瓶颈  # ai  # 工具  # wordpress  # html  # word  # 工厂关键词排名  # seo系统基础知识  # 盐池网络推广营销  # 长春seo教程哪个便宜  # seo网站好用吗  # 微信外卖营销推广怎么做  # 美团订房网站怎么做推广  # 网站推广优化哪个平台好  # SEO学习网名格式小众  # 衢州网站优化推广  # 购物车  # 购物系统  # 详情页  # 遍历  # 单品 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： 《健康大兴》注册方法介绍  蜻蜓FM如何设置移动流量播放  实时数据流中高效查找最小值与最大值  《顺丰同城骑士》查看我的技能方法  HTML中多图片上传与预览：解决ID冲突的专业指南  顺丰快递怎么查物流_顺丰快递物流信息实时查询操作指南  OPPO A3 WiFi频繁断开怎么办 OPPO A3网络优化技巧  《饿了么》拼好饭点外卖教程2025  使用AI在VS Code中将代码从一种语言翻译成另一种  NumPy 高性能技巧：基于多列条件查找最近邻行索引的向量化实现  PHP中获取HTTP响应状态消息：方法与限制  冬季去寒冷地区旅游，以下哪种做法有助于缓解冻伤  CSS过渡与滚动滚动事件结合应用_scroll与transition动画  漫蛙官网(首页入口)_漫蛙漫画稳定访问教程分享  济南公交卡手机充值指南  CSS绝对定位与溢出控制：实现背景元素局部显示不触发滚动条  悟空浏览器网页版链接 悟空浏览器网页版最新有效地址  铁路12306座位怎么选_12306官方选座操作方法  风神瞳获取全攻略  J*aScript深度克隆：实现高效、健壮与安全的复杂对象复制  德邦快递查询入口登录官网 德邦快递单号查询系统入口  WooCommerce 购物车：始终显示所有交叉销售商品  感染了幽门螺杆菌一定会导致胃癌吗？蚂蚁庄园今日答案最新11.30  解决Pandas DataFrame高度碎片化警告：高效创建多列的策略  OpenWeatherMap API：通过城市名称获取天气预报数据指南  海棠阅读网页版_进入海棠网页版在线阅读中心  win11如何诊断DirectX问题 Win11运行dxdiag工具排查显卡故障【排错】  申通快递查询 申通物流快递单实时查询入口  使用Python和GBGB API高效抓取指定日期范围和赛道比赛结果教程  海棠书屋官方在线书籍入口 海棠书屋文学作品浏览官网链接  search中maxlength属性用法解析  快递查询，一键速查  win11讲述人怎么关闭 Win11屏幕朗读辅助功能禁用方法【技巧】  cad加载的线型看不见怎么办_cad线型不可见问题解决方法  魔法祈幻界兑换码礼包大全  PHP页面重载时变量值不重置的实现方法  《腾讯相册管家》注销账号方法  BunnyStream TUS视频上传指南：解决401认证错误与参数配置  暴风影音官网正式版_暴风影音手机版官网下载安卓  《海底捞》点外卖方法  Yandex世界探索 最新官方免登录入口全知道  百度网盘如何设置上传限额  易车网官网直达入口 易车网在线登录入口  小米civi如何设置锁屏时间  Windows自带的便笺数据如何备份_防止数据丢失的便利贴迁移教程【干货】  作业帮网页版不用下载入口 在线问老师快速答疑  Go Goroutine调度与并发执行深度解析  J*aScript对象中深度嵌套URL键的查找与更新策略  OPPO手机参数配置如何开启护眼模式_OPPO手机参数配置护眼模式开启指南  嘴唇干裂起皮怎么办 唇部护理与预防干裂的方法【详解】 

 2025-12-13