Ecommerce Shopify WordPress Discussion

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. 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?
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''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:

January 23, 2024

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:

January 23, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.