WooCommerce实现左右眼产品属性双列选择功能求助

1. 产品属性基础配置 #

• 进入WooCommerce产品编辑页，创建两个独立产品属性：比如左眼参数和右眼参数，添加度数、基弧等所需参数作为属性值，务必勾选「用于可变产品」选项。
• 生成可变产品变体，确保每个参数组合都正确关联对应库存、价格与SKU。

2. 添加同步复选框及交互逻辑 #

在主题的functions.php文件或自定义插件中插入以下代码：

输出同步复选框 #

add_action('woocommerce_before_add_to_cart_form', 'add_eye_sync_checkbox');
function add_eye_sync_checkbox() {
    echo '<div class="eye-sync">
        <label><input type="checkbox" id="sync_eyes"> 统一设置双眼参数</label>
    </div>';
}

实现参数同步的JS代码 #

jQuery(document).ready(function($) {
    // 监听同步复选框状态切换
    $('#sync_eyes').on('change', function() {
        if($(this).is(':checked')) {
            // 勾选时，左眼参数变动同步到右眼
            $('.attribute_pa_left-eye').on('change', function() {
                $('.attribute_pa_right-eye').val($(this).val()).trigger('change');
            });
        } else {
            // 取消勾选时，解除同步绑定
            $('.attribute_pa_left-eye').off('change');
        }
    });

    // 页面加载时若复选框默认勾选，先同步一次参数
    if($('#sync_eyes').is(':checked')) {
        $('.attribute_pa_right-eye').val($('.attribute_pa_left-eye').val()).trigger('change');
    }
});

⚠️ 注意：代码中的pa_left-eye和pa_right-eye需替换为你实际创建的属性别名，可在产品属性编辑页查看该别名。

3. 可选：样式优化 #

将以下CSS添加到主题自定义CSS区域，美化同步复选框的显示效果：

.eye-sync {
    margin: 15px 0;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.eye-sync label {
    font-weight: 500;
    cursor: pointer;
}

4. 功能验证 #

• 勾选「统一设置双眼参数」后，修改左眼参数，确认右眼参数自动同步更新；取消勾选后，双眼参数可独立选择。
• 检查产品变体的SKU、库存、价格是否随参数选择正确切换。

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