You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

WooCommerce添加自定义按钮,添加购物车前切换产品bestprice

嘿,我来帮你搞定这个需求!下面分前端交互和后端价格处理两部分,代码直接加到主题的functions.php或者自定义插件里就能用:

第一步:添加「点击获取更优价格」按钮及前端交互

这段代码会在产品页面的价格区域下方添加自定义按钮,同时处理价格切换的逻辑,还会加一个隐藏字段标记当前是否启用更优价格:

add_action('woocommerce_single_product_summary', 'add_bestprice_toggle_button', 15);
function add_bestprice_toggle_button() {
    global $product;
    
    // 获取自定义字段bestprice的值
    $best_price = get_post_meta($product->get_id(), 'bestprice', true);
    
    // 只有当bestprice存在且小于常规价时才显示按钮
    if ($best_price && $best_price < $product->get_regular_price()) {
        // 输出隐藏字段,标记是否使用bestprice
        echo '<input type="hidden" id="use_bestprice" value="0">';
        
        // 输出切换按钮
        echo '<button id="toggle_bestprice" class="button alt">点击获取更优价格</button>';
        
        // 输出隐藏的bestprice显示区域(默认隐藏)
        echo '<p id="bestprice_display" class="price" style="display:none;">' . wc_price($best_price) . '</p>';
    }
}

// 添加前端JS脚本
add_action('wp_footer', 'bestprice_toggle_script');
function bestprice_toggle_script() {
    // 只在产品页面加载脚本
    if (!is_product()) return;
    ?>
    <script>
        jQuery(document).ready(function($) {
            const toggleBtn = $('#toggle_bestprice');
            const useBestPriceInput = $('#use_bestprice');
            const regularPriceDisplay = $('.price').not('#bestprice_display');
            const bestPriceDisplay = $('#bestprice_display');
            
            toggleBtn.on('click', function() {
                if (useBestPriceInput.val() === '0') {
                    // 切换到更优价格
                    regularPriceDisplay.hide();
                    bestPriceDisplay.show();
                    useBestPriceInput.val('1');
                    toggleBtn.text('恢复常规价格');
                } else {
                    // 切换回常规价格
                    regularPriceDisplay.show();
                    bestPriceDisplay.hide();
                    useBestPriceInput.val('0');
                    toggleBtn.text('点击获取更优价格');
                }
            });
        });
    </script>
    <?php
}
第二步:后端处理加购时的价格替换

这段代码会在用户加购时,根据隐藏字段的标记,把购物车中的商品价格替换成bestprice:

// 保存是否使用bestprice的标记到购物车项
add_filter('woocommerce_add_cart_item_data', 'save_bestprice_flag_to_cart', 10, 3);
function save_bestprice_flag_to_cart($cart_item_data, $product_id, $variation_id) {
    if (isset($_POST['use_bestprice']) && $_POST['use_bestprice'] === '1') {
        $best_price = get_post_meta($product_id, 'bestprice', true);
        if ($best_price) {
            $cart_item_data['use_bestprice'] = '1';
            $cart_item_data['bestprice'] = $best_price;
            // 确保购物车项唯一,避免同产品不同价格混在一起
            $cart_item_data['unique_key'] = md5(microtime().rand());
        }
    }
    return $cart_item_data;
}

// 替换购物车中的商品价格
add_action('woocommerce_before_calculate_totals', 'apply_bestprice_to_cart');
function apply_bestprice_to_cart($cart) {
    if (is_admin() && !defined('DOING_AJAX')) return;
    
    foreach ($cart->get_cart() as $cart_item) {
        if (isset($cart_item['use_bestprice']) && $cart_item['use_bestprice'] === '1') {
            // 设置商品价格为bestprice
            $cart_item['data']->set_price($cart_item['bestprice']);
        }
    }
}
额外说明
  • 如果你的自定义字段键不是bestprice,记得把代码里所有的bestprice替换成你实际的字段名
  • 按钮样式可以通过修改CSS类或者直接加内联样式调整,比如给#toggle_bestprice加自定义样式
  • 代码已经做了判断:只有当bestprice存在且小于常规价时才显示按钮,避免无效展示

内容的提问来源于stack exchange,提问作者iMMuNiTy

火山引擎 最新活动