WordPress-PHP：如何将Extra Product Options表单选中数据填入文本区域

核心逻辑说明 #

• 不需要从购物车读取数据，采用「短代码输出承载容器+前端JS实时监听单选按钮选中状态」的方案实现
• 直接监听Extra Product Options插件生成的单选按钮交互事件，选中后自动将值同步到你插入短代码的文本区域

// 注册自定义短代码
add_shortcode('echo_selected_radio_value', 'custom_get_epo_selected_value');
function custom_get_epo_selected_value($atts) {
    // 支持传入指定字段名参数，适配多个单选字段的场景
    $atts = shortcode_atts([
        'field' => '', // 填你要获取的EPO字段的name属性，留空则默认获取所有选中单选值
    ], $atts);
    
    ob_start();
    ?>
    <!-- 选中值展示容器，会自动插入到你放短代码的位置 -->
    <div class="epo-selected-value-output"></div>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const outputContainer = document.querySelector('.epo-selected-value-output');
        // 监听所有EPO单选按钮的变更事件
        document.addEventListener('change', function(e) {
            if (e.target.classList.contains('thwepof_radio_field')) {
                // 如果指定了字段名，只匹配对应字段
                const targetField = '<?php echo esc_js($atts['field']); ?>';
                if (targetField && e.target.name !== targetField) return;
                
                // 组合选中值的展示内容，可根据需要调整格式
                let selectedText = e.target.closest('.thwepo_field_wrap').querySelector('.thwepo_field_label').textContent + '：' + e.target.nextElementSibling.textContent;
                outputContainer.textContent = selectedText;
                
                // 如果是要填入textarea元素，把上面一行替换成下面的代码，填入对应的textarea选择器
                // document.querySelector('你要填入的文本区域的选择器').value = selectedText;
            }
        });
    });
    </script>
    <?php
    return ob_get_clean();
}

使用方法 #

• 单字段场景直接在Elementor文本区域插入短代码 [echo_selected_radio_value] 即可
• 多单选字段场景，指定要获取的字段名：[echo_selected_radio_value field="你的字段name属性"]
• 如果需要把值直接填入自带的textarea元素，替换代码中对应注释部分的选择器即可

适配说明 #

如果你的Extra Product Options插件生成的单选按钮类名不是thwepof_radio_field，可以右键点击页面上的单选按钮，检查元素替换代码中的对应类名即可。

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