Add custom input field next to WooCommerce product variation SKU field

Question

I have created a custom field for variations of a variant product

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'),
        )
    );
}

Hook woocommerce_variation_options outputs before prices, but I would like to output it next to SCU. Whether it is before or after is not important.

Could you please suggest a hook that will help me to do this?

If there is no such hook, how else can it be done?

Answer 1

To add a custom input field near to the existing SKU field in product WooCommerce Admin Variation(s), as there are no available hooks for that, you can display that custom field anywhere else, and move it to the desired location using JavaScript and some little changes to your existing code.

Try the following code replacement (to display the field in the right location and save its value):

// Add the field
add_action('woocommerce_variation_options', 'add_variation_custom_sku_input_field', 300, 3);
function add_variation_custom_sku_input_field($loop, $variation_data, $post){
    $variation = wc_get_product($post->ID);
    $field_key = 'custom_sku';

    echo '<div class="'.$field_key.'-wrapper" data-loop="'.$loop.'">';

    woocommerce_wp_text_input(
        array(
            'id'            => "{$field_key}-{$loop}",
            'name'          => "{$field_key}[{$loop}]",
            'value'         => $variation->get_meta('_'.$field_key),
            'label'         => esc_html__('Custom SKU', 'woocommerce'),
            'desc_tip'      => true,
            'description'   => esc_html__('Enter the custom SKU', 'woocommerce'),
            'wrapper_class' => 'form-row form-row-last',
        )
    );
    echo '</div>';
}

// Display the field in the desired location
add_action( 'admin_footer', 'change_variation_custom_sku_input_field_location' );
function change_variation_custom_sku_input_field_location() {
    global $pagenow, $typenow;

    if( in_array( $pagenow, array('post.php', 'post-new.php') ) && $typenow === 'product' ) :
    
    $field_key = 'custom_sku';
    ?>
    <script>
    jQuery(function($) {
        $('#variable_product_options').on( 'change', function() {
            $('.woocommerce_variable_attributes').each(function(){
                const wrapper = $(this).find('.<?php echo $field_key; ?>-wrapper');
                if ( wrapper.length ) {
                    wrapper.remove();
                    $(this).find('p.variable_sku'+wrapper.data('loop')+'_field').after(wrapper.html());
                }
            });
        });
    });
    </script>
    <?php
    endif;
}

// Save the field inputted value
add_action( 'woocommerce_admin_process_variation_object', 'save_variation_custom_sku_input_field_value', 10, 2 );
function save_variation_custom_sku_input_field_value( $variation, $i ) {
    $field_key = 'custom_sku';

    if( isset($_POST[$field_key][$i]) ) {
        $variation->update_meta_data( '_'.$field_key, sanitize_text_field($_POST[$field_key][$i]) );
    }
}

Code goes in functions.php file of your child theme (or in a plugin). Tested and works.

To align horizontally the fields, add also the code provided here by the OP to get:

Answer 2

Additional CSS code for fields horizontal alignment:

To align horizontally SKU and Custom SKU fields, you add the following code:

add_action( 'admin_head', 'add_variations_custom_inline_css' );
function add_variations_custom_inline_css() {
    global $pagenow, $typenow;

    if( in_array( $pagenow, array('post.php', 'post-new.php') ) && $typenow === 'product' ) : 
?>
<style>
[class*="variable_sku"].form-field.form-row,
[class*="custom_sku"].form-field.form-row {
    width: 23%;
}
[class*="custom_sku"].form-field.form-row {
    padding-right: 1em;
}
</style>
<?php endif;
}

You will Get: