如何修改代码让WooCommerce简单产品的加入购物车按钮显示价格

以下是调整后的代码，可同时支持简单产品和变体产品在加入购物车按钮中显示价格：

add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_button_text_with_price', 10, 2 );
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_add_to_cart_button_text_with_price', 10, 2 ); // 适配产品存档/列表页

function custom_add_to_cart_button_text_with_price( $text, $product ) {
    // 处理简单产品
    if ( $product->is_type('simple') ) {
        $formatted_price = wc_price( $product->get_price() );
        return sprintf( '%s - %s', $text, $formatted_price );
    }

    // 处理变体产品（保留动态更新逻辑）
    if ( $product->is_type('variable') ) {
        wc_enqueue_js( "
            jQuery(document).ready(function($){
                // 页面加载时若已选中变体，更新按钮文本
                var initialPrice = $('.woocommerce-variation-price .price').html();
                if (initialPrice) {
                    $('.single_add_to_cart_button').html('" . esc_js( $text ) . " - ' + initialPrice);
                }

                // 选择变体时更新价格
                $('form.variations_form').on('show_variation', function(event, variation){
                    $('.single_add_to_cart_button').html('" . esc_js( $text ) . " - ' + variation.price_html);
                });

                // 取消选择变体时重置按钮文本
                $('form.variations_form').on('hide_variation', function(){
                    $('.single_add_to_cart_button').html('" . esc_js( $text ) . "');
                });
            });
        " );
        return $text;
    }

    // 其他产品类型（如分组、外部产品）保持原按钮文本
    return $text;
}

代码说明 #

1. 简单产品处理：直接通过$product->get_price()获取价格，用WooCommerce内置的wc_price()格式化（自动适配站点货币设置），拼接到原按钮文本后。
2. 变体产品处理：保留原有的JavaScript逻辑，实现选择变体时动态更新按钮上的价格，未选择变体时恢复默认文本。
3. 多页面适配：同时挂钩了woocommerce_product_add_to_cart_text过滤器，确保产品列表/存档页的按钮也能生效。

可选样式调整 #

如果按钮内价格排版需要优化，可添加以下CSS到主题自定义样式中：

/* 调整按钮内价格的间距与权重 */
.single_add_to_cart_button .price,
.add_to_cart_button .price {
    margin-left: 0.5rem;
    font-weight: 600;
}

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