WooCommerce可变产品自定义价格设置及相关功能调整问询

Hey there! I’ve worked with WooCommerce variable products quite a bit, so let’s break down your two requirements clearly:

1. 在可变产品中添加自定义价格 #

要给可变产品的变体设置自定义价格，最靠谱的方式是利用WooCommerce的钩子来覆盖默认价格逻辑。你可以把下面的代码添加到主题的functions.php文件里（或者用自定义代码插件，避免主题更新丢失代码）：

// 为可变产品变体设置自定义价格
add_filter('woocommerce_product_variation_get_price', 'custom_variation_price', 10, 2);
add_filter('woocommerce_product_variation_get_regular_price', 'custom_variation_price', 10, 2);
add_filter('woocommerce_variation_prices_price', 'custom_variation_price', 10, 3);
add_filter('woocommerce_variation_prices_regular_price', 'custom_variation_price', 10, 3);

function custom_variation_price($price, $product, $variation = null) {
    // 示例1：针对ID为123的可变产品，统一设置所有变体价格为99.99
    if ($product->get_parent_id() == 123) {
        $price = 99.99;
    }
    // 示例2：根据变体属性设置，比如属性为"Size: Large"的变体价格为119.99
    if ($variation && $variation->get_attribute('pa_size') == 'large') {
        $price = 119.99;
    }
    return $price;
}

你可以根据自己的需求调整代码里的条件（比如产品ID、属性值、用户角色等），灵活控制不同场景下的自定义价格。

2. 修改价格范围为自定义文本 + 强制选择选项后才能加购 #

替换价格范围为自定义价格 #

默认的可变产品价格范围（比如“¥99 - ¥199”）可以通过钩子替换成你想要的自定义内容。添加下面的代码到functions.php：

// 替换可变产品的价格范围显示为自定义文本
add_filter('woocommerce_variable_price_html', 'custom_variable_price_range', 10, 2);

function custom_variable_price_range($price_html, $product) {
    // 替换成你需要的自定义文本，比如固定价格或引导语
    $custom_price_text = "自定义价格：¥129";
    return $custom_price_text;
}

修改后，产品页面的价格区域会显示你设置的自定义内容，效果如下：

强制用户选择产品选项后才能加购 #

要实现“必须选完选项才能加购”，我们需要从前端交互和后端验证两方面入手，避免用户绕过限制：

前端交互：禁用加购按钮直到选完选项

把这段JS代码添加到主题的footer.php（标签前）或者自定义JS插件中：

jQuery(document).ready(function($) {
    // 初始状态禁用加购按钮
    $('button.single_add_to_cart_button').prop('disabled', true).addClass('disabled');
    
    // 监听属性选择框的变化
    $('.variations select').change(function() {
        var allOptionsSelected = true;
        $('.variations select').each(function() {
            if ($(this).val() === '') {
                allOptionsSelected = false;
            }
        });
        
        // 根据是否选完选项切换按钮状态
        if (allOptionsSelected) {
            $('button.single_add_to_cart_button').prop('disabled', false).removeClass('disabled');
        } else {
            $('button.single_add_to_cart_button').prop('disabled', true).addClass('disabled');
        }
    });
});

后端验证：防止绕过前端直接加购

添加这段PHP代码到functions.php，确保后端也会验证选项是否选全：

// 后端验证必须选择所有变体选项才能加购
add_filter('woocommerce_add_to_cart_validation', 'validate_variation_selected', 10, 3);

function validate_variation_selected($passed, $product_id, $quantity) {
    $product = wc_get_product($product_id);
    if ($product->is_type('variable')) {
        // 遍历所有必填属性，检查是否都已选择
        $required_attributes = $product->get_variation_attributes();
        foreach ($required_attributes as $attribute => $options) {
            $attribute_key = str_replace('pa_', '', $attribute);
            if (!isset($_POST['attribute_' . $attribute_key]) || $_POST['attribute_' . $attribute_key] === '') {
                wc_add_notice('请选择所有产品选项后再加入购物车！', 'error');
                $passed = false;
                break;
            }
        }
    }
    return $passed;
}

这样不管用户是通过前端按钮还是直接请求加购，都会被限制必须选完选项才能成功。

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