如何获取WordPress自定义加购功能中选中的Variation ID

方法一：前端JavaScript实时匹配 #

1. 修正前端属性选择代码 #

先确保单选框的name属性和可用变体数组中的属性键格式一致（即attribute_pa_xxx），调整后代码如下：

<?php 
$variations = $product->get_variation_attributes();
$available_variations = $product->get_available_variations();
?>
<!-- 新增隐藏字段存储匹配到的variation_id -->
<input type="hidden" id="selected_variation_id" name="variation_id" value="">

<?php foreach ($variations as $key => $value): ?>
    <div class="d-flex">
        <div class="ms-2">
            <span><?php echo wc_attribute_label($key); // 显示友好的属性名称 ?></span>
        </div>
        <div class="d-flex">
            <?php foreach ($value as $var): ?>
                <div class="button-group">
                    <!-- 修正name为attribute_pa_xxx格式 -->
                    <input type="radio" name="attribute_<?php echo $key ?>" value="<?php echo $var; ?>" id="<?php echo $var; ?>">
                    <label class="artheme_var_id" id="<?php echo $var; ?>" for="<?php echo $var; ?>"><?php echo $var; ?></label>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
    <br>
<?php endforeach; ?>

2. 添加JavaScript匹配逻辑 #

把可用变体数组转为JSON传给JS，监听属性选择事件实时匹配variation_id：

<script>
// 将PHP的可用变体数组转为JS对象
const availableVariations = <?php echo json_encode($available_variations); ?>;
const attributeInputs = document.querySelectorAll('input[name^="attribute_"]');
const variationIdField = document.getElementById('selected_variation_id');

// 定义匹配函数
function matchVariationId() {
    const selectedAttributes = {};
    // 收集所有选中的属性
    attributeInputs.forEach(input => {
        if (input.checked) {
            selectedAttributes[input.name] = input.value;
        }
    });

    // 遍历可用变体，找到属性完全匹配的项
    let matchedId = '';
    availableVariations.forEach(variation => {
        let isMatch = true;
        for (const attrKey in selectedAttributes) {
            if (variation.attributes[attrKey] !== selectedAttributes[attrKey]) {
                isMatch = false;
                break;
            }
        }
        if (isMatch) {
            matchedId = variation.variation_id;
        }
    });

    // 更新隐藏字段的值
    variationIdField.value = matchedId;
}

// 给所有属性单选框添加事件监听
attributeInputs.forEach(input => {
    input.addEventListener('change', matchVariationId);
});

// 页面加载时如果有默认选中项，执行一次匹配
matchVariationId();
</script>

用户选择属性后，selected_variation_id隐藏字段会自动填入对应variation_id，提交表单时直接获取该字段值即可。

方法二：后端PHP提交时匹配 #

若无需实时获取，可在表单提交到后端后，通过选中属性匹配variation_id：

// 获取表单提交的选中属性
$selected_attributes = [];
foreach ($product->get_variation_attributes() as $key => $values) {
    $attr_name = 'attribute_' . $key;
    if (isset($_POST[$attr_name])) {
        $selected_attributes[$attr_name] = sanitize_text_field($_POST[$attr_name]);
    }
}

// 遍历可用变体，找到匹配的variation_id
$matched_variation_id = 0;
$available_variations = $product->get_available_variations();
foreach ($available_variations as $variation) {
    $is_match = true;
    foreach ($selected_attributes as $attr_key => $attr_value) {
        if ($variation['attributes'][$attr_key] !== $attr_value) {
            $is_match = false;
            break;
        }
    }
    if ($is_match) {
        $matched_variation_id = $variation['variation_id'];
        break;
    }
}

// 示例：使用匹配到的ID加入购物车
if ($matched_variation_id) {
    WC()->cart->add_to_cart($product->get_id(), 1, $matched_variation_id);
}

注意事项 #

• 必须选全所有属性才能匹配到唯一的variation_id，可添加逻辑在未选全时禁用加入购物车按钮
• 确保属性值的大小写、格式和可用变体数组中的完全一致，避免匹配失败

内容的提问来源于stack exchange，提问作者Ahmad Reza Hajizadeh