如何在WooCommerce产品变体SKU字段旁添加自定义输入字段

问题描述 #

我已为变体产品的变体创建了一个自定义字段，代码如下：

add_action('woocommerce_variation_options', 'my_field_variable', 300, 3);

function my_field_variable($loop, $variation_data, $variation){
    woocommerce_wp_text_input(
        array(
            'id' => "_customscu",
            'value' => get_post_meta($variation->ID, '_customscu', true),
            'label' => esc_html__('CustomSCU', 'my_field'),
            'desc_tip' => true,
            'description' => __('Enter the CustomSCU', 'my_field'),
        )
    );
}

当前使用的woocommerce_variation_options钩子会将字段输出在价格区域之前，但我希望将其放置在SKU字段旁边（前后均可）。请问有什么合适的钩子可以实现该需求？如果没有此类钩子，还有其他实现方法吗？

解决方案 #

方法1：使用SKU专属钩子 #

WooCommerce自带woocommerce_variation_options_sku钩子，这个钩子就是在变体SKU字段的区域触发的，完美匹配需求。直接替换原有钩子即可：

// 替换原有的add_action，改用woocommerce_variation_options_sku钩子
add_action('woocommerce_variation_options_sku', 'my_field_variable', 10, 3);

function my_field_variable($loop, $variation_data, $variation){
    woocommerce_wp_text_input(
        array(
            'id' => "_customscu_{$loop}", // 必须加$loop变量，避免多变体时ID重复
            'value' => get_post_meta($variation->ID, '_customscu', true),
            'label' => esc_html__('CustomSCU', 'my_field'),
            'desc_tip' => true,
            'description' => __('Enter the CustomSCU', 'my_field'),
        )
    );
}

注意：一定要给输入框ID加上{$loop}变量，多变体场景下每个字段的ID必须唯一，否则会出现数据保存异常的问题。

另外，如果你之前没写保存字段数据的代码，需要补充以下代码：

add_action('woocommerce_save_product_variation', 'save_my_custom_field', 10, 2);

function save_my_custom_field($variation_id, $i){
    if(isset($_POST["_customscu_{$i}"])){
        update_post_meta($variation_id, '_customscu', sanitize_text_field($_POST["_customscu_{$i}"]));
    }
}

方法2：jQuery调整DOM位置（备用） #

如果因为WooCommerce版本兼容等问题无法使用上述钩子，可以保留原有的woocommerce_variation_options钩子，再通过前端脚本把字段移到SKU旁边：

add_action('admin_footer', 'move_custom_field_to_sku');

function move_custom_field_to_sku(){
    if(get_post_type() != 'product') return;
    ?>
    <script>
        jQuery(document).ready(function($){
            // 监听变体加载事件，确保动态新增的变体也能生效
            $(document).on('woocommerce_variations_loaded', function(){
                $('.woocommerce_variation').each(function(){
                    // 获取自定义字段的容器
                    var customField = $(this).find('#_customscu_field');
                    // 获取SKU字段的容器
                    var skuField = $(this).find('.form-row.form-row-first:has(#_sku)');
                    // 把自定义字段插到SKU字段后面
                    customField.insertAfter(skuField);
                    // 可选：调整为并排布局
                    customField.addClass('form-row form-row-last');
                    skuField.addClass('form-row form-row-first');
                });
            });
        });
    </script>
    <?php
}

这种方法通过操作DOM结构实现需求，适合无法使用专用钩子的场景。

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