Cornerstone主题下Bigcommerce Stencil如何将选项价格显示在选项旁？

嘿，这个需求太实用了——谁愿意翻产品描述里的表格算价格啊！针对Cornerstone主题的产品附加项价格显示问题，我给你几个靠谱的解决方案：

很多时候主题本身就藏着这个功能，你先去后台确认下：

• 打开产品编辑页，找到你设置附加项的板块（一般叫「产品附加项」或者「Custom Options」）
• 逐个查看每个附加项的设置，应该有类似「显示价格」「价格后缀」的勾选框，选上之后，价格就会自动跟在选项旁边（比如变成「蓝色 (+$3)」这种直观的格式）
• 如果是下拉选框类型的附加项，有些版本的Cornerstone还会直接在下拉选项里内嵌价格，不用额外操作

要是主题自带设置没这个功能，也不用慌，简单几行代码就能实现：

新手友好：用JS脚本动态插入 #

不想碰后台代码的话，直接用Cornerstone自带的自定义JS功能就行：

1. 进入WordPress后台的「外观」->「自定义」->「Custom JS」
2. 粘贴下面这段代码，保存即可：

document.addEventListener('DOMContentLoaded', function() {
    // 定位所有附加项选项标签
    const addonLabels = document.querySelectorAll('.wc-pao-addon-option label');
    addonLabels.forEach(label => {
        // 从对应输入框提取价格数据
        const input = label.querySelector('input, select');
        if (input && input.dataset.price) {
            const price = parseFloat(input.dataset.price);
            if (price > 0) {
                // 把价格追加到选项文字后面
                label.innerHTML += ` (+$${price})`;
            }
        }
    });
});

这段代码会自动读取附加项里的价格数据，然后把「(+$X)」加到选项旁边，不用你手动改任何内容。

进阶版：用PHP钩子更稳定 #

如果懂点PHP，用主题钩子的方式更稳定，不会因为页面加载顺序出问题：

1. 打开子主题的functions.php文件（千万不要改父主题，不然更新主题会丢代码）
2. 粘贴下面这段代码：

add_filter('woocommerce_form_field_option', 'append_price_to_cornerstone_addons', 10, 4);
function append_price_to_cornerstone_addons($option_html, $option_key, $args, $current_value) {
    // 只针对产品附加项的字段
    if (isset($args['class']) && in_array('wc-pao-addon', $args['class'])) {
        // 提取选项价格（适配WooCommerce官方附加项插件的格式）
        if (isset($args['options'][$option_key]['price']) && $args['options'][$option_key]['price'] > 0) {
            $price_symbol = $args['options'][$option_key]['price_type'] === 'percentage' ? '%' : '$';
            $price_text = " (+" . $price_symbol . $args['options'][$option_key]['price'] . ")";
            // 把价格追加到标签末尾
            $option_html = str_replace('</label>', $price_text . '</label>', $option_html);
        }
    }
    return $option_html;
}

注意：如果你用的不是官方的WooCommerce Product Add-ons，可能需要调整代码里的价格变量名，比如有些插件会把价格存在data-price或者其他属性里，稍微改一下就行。

要是上面的方法都不顺利，直接换个官方插件就行——WooCommerce Product Add-ons（WordPress官方出品），它默认就支持在选项旁边显示价格，和Cornerstone兼容性拉满：

• 安装插件后，在产品编辑页找到「Product Add-ons」板块添加选项
• 设置每个选项的价格后，勾选「显示价格」，价格就会自动出现在选项旁边，完全不用折腾代码

内容的提问来源于stack exchange，提问作者Sally