Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Add custom input field next to WooCommerce product variation SKU field

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.

enter image description here

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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:

    enter image description here


  2. 0

    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.

    enter image description here

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

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search