Adding Custom Fields to Woocommerce Product Variation

This post is about how to add custom fields to woocommerce product variation. Woocommerce product variation has extended fields available to you by defaults. These fields can be seen the figure below

But sometimes you need to add additional fields to your product variation level. This could be number of stocks of different stores, some unique code other than SKU.  Here are the steps you need to do

Create a new field for user input

Add this code to you theme’s functions.php file.

/**
 * Create new fields for variations
 *
*/
function variation_settings_fields( $loop, $variation_data, $variation ) {

	// Text Field
	woocommerce_wp_text_input( 
		array( 
			'id'          => '_ean_code[' . $variation->ID . ']', 
			'label'       => __( 'EAN-CODE', 'woocommerce' ), 
			'placeholder' => 'EAN-CODE',
			'desc_tip'    => 'true',
			'description' => __( 'Enter your custom EAN code.', 'woocommerce' ),
			'value'       => get_post_meta( $variation->ID, '_ean_code', true )
		)
	);
	woocommerce_wp_text_input( 
		array( 
			'id'          => '_stock_amsterdam[' . $variation->ID . ']', 
			'label'       => __( 'Nr. of Stock in Amsterdam', 'woocommerce' ), 
			'desc_tip'    => 'true',
			'description' => __( 'Enter nr. of Stock in Amsterdam', 'woocommerce' ),
			'value'       => get_post_meta( $variation->ID, '_stock_amsterdam', true ),
			'custom_attributes' => array(
							'step' 	=> 'any',
							'min'	=> '0'
						) 
		)
	);
	woocommerce_wp_text_input( 
		array( 
			'id'          => '_stock_den_bosch[' . $variation->ID . ']', 
			'label'       => __( 'Nr. of Stock in Den Bosch', 'woocommerce' ), 
			'desc_tip'    => 'true',
			'description' => __( 'Enter nr. of Stock in Den Bosch', 'woocommerce' ),
			'value'       => get_post_meta( $variation->ID, '_stock_den_bosch', true ),
			'custom_attributes' => array(
							'step' 	=> 'any',
							'min'	=> '0'
						) 
		)
	);
	woocommerce_wp_text_input( 
		array( 
			'id'          => '_stock_alkmaar[' . $variation->ID . ']', 
			'label'       => __( 'Nr. of Stock in Alkmaar', 'woocommerce' ), 
			'desc_tip'    => 'true',
			'description' => __( 'Enter nr. of Stock in Alkmaar', 'woocommerce' ),
			'value'       => get_post_meta( $variation->ID, '_stock_alkmaar', true ),
			'custom_attributes' => array(
							'step' 	=> 'any',
							'min'	=> '0'
						) 
		)
	);
}


// Add Variation Settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );

The code above will add 4 extra fields to your product variation. One of them is text field and the other three are number fields. These are the complete array of fields you can add.

• Text Field
• Number Field
• Textarea
• Dropdown Select
• Checkbox
• Hidden field

After adding this code you can see them appear in the backend.

Save the data to the database

Pretty cool right! The next to do is to make sure that they are save to the database. For that you need to add another function to the theme’s functions.php.

/**
 * Save new fields for variations
 *
*/
function save_variation_settings_fields( $post_id ) {

	// Text Field
	$text_field = $_POST['_ean_code'][ $post_id ];
	if( ! empty( $text_field ) ) {
		update_post_meta( $post_id, '_ean_code', esc_attr( $text_field ) );
	}
	$number_field = $_POST['_stock_amsterdam'][ $post_id ];
	if( ! empty( $number_field ) ) {
		update_post_meta( $post_id, '_stock_amsterdam', esc_attr( $number_field ) );
	}
	$number_field = $_POST['_stock_den_bosch'][ $post_id ];
	if( ! empty( $number_field ) ) {
		update_post_meta( $post_id, '_stock_den_bosch', esc_attr( $number_field ) );
	}
	$number_field = $_POST['_stock_alkmaar'][ $post_id ];
	if( ! empty( $number_field ) ) {
		update_post_meta( $post_id, '_stock_alkmaar', esc_attr( $number_field ) );
	}
	
}

// Save Variation Settings
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );

The code above will make sure that you save them to the database. As you can see there, the value will be stored in the wp_postmeta table. Here you can specify what “meta_key” you want.

In order to show them to the front end. You can always call the function get_post_ meta(). I hope this post help you guys. See you on the next post!