How to Add custom fields for WooCommerce Product variations

How to Add custom fields for WooCommerce Product variations
140 Views

Add custom field

<?php
add_action( 'woocommerce_product_after_variable_attributes', 'cxc_add_custom_field_to_variations', 10, 3 );

function cxc_add_custom_field_to_variations( $loop, $variation_data, $variation ) {

	// Radio Button
	woocommerce_wp_radio(
		array(
			'id'            => 'cxc_radio_field[' . $loop . ']',
			'label'         => 'Cxc Radio field',
			'wrapper_class' => 'form-row',
			'value'         => get_post_meta( $variation->ID, 'cxc_radio', true ),
			'options'       => array(
				'cxc_code'   => 'Cxc Code',
				'cxc_html'   => 'Cxc Html',
				'cxc_css'    => 'Cxc Css'
			)
		)
	);

	// Text Fileds
	woocommerce_wp_text_input(
		array(
			'id'            => 'cxc_text_field[' . $loop . ']',
			'label'         => 'Cxc Text field',
			'wrapper_class' => 'form-row',
			'placeholder'   => 'Type here...',
			'desc_tip'      => 'true',
			'description'   => 'We can add some description for a field.',
			'value'         => get_post_meta( $variation->ID, 'cxc_text', true )
		)
	);

	// Select
	woocommerce_wp_select(
		array(
			'id'            => 'cxc_select_field[' . $loop . ']',
			'label'         => 'Cxc Select field',
			'wrapper_class' => 'form-row',
			'description'   => 'We can add some description for a field.',
			'value'         => get_post_meta( $variation->ID, 'cxc_select', true ),
			'options'       => array(
				'cxc_code'   => 'Cxc Code',
				'cxc_html'   => 'Cxc Html',
				'cxc_css'    => 'Cxc Css'
			)
		)
	);

	// CheckBox Fileds
	woocommerce_wp_checkbox(
		array(
			'id'            => 'cxc_my_check[' . $loop . ']',
			'label'         => 'Cxc Checkbox field',
			'wrapper_class' => 'form-row',
			'value'         => get_post_meta( $variation->ID, 'cxc_check', true ),
		)
	);


	// Textarea
	woocommerce_wp_textarea_input(
		array(
			'id'            => 'cxc_textarea_field[' . $loop . ']',
			'label'         => 'Cxc Textarea field',
			'wrapper_class' => 'form-row',
			'value'         => get_post_meta( $variation->ID, 'rudr_textarea', true ),
		)
	);

	// CheckBox Fileds
	woocommerce_wp_hidden_input(
		array(
			'id'    => 'cxc_hidden_field[' . $loop . ']',
			'value' => 'hello_cxc'
		)
	);

}
?>

Save Custom fields

<?php
add_action( 'woocommerce_save_product_variation', 'cxc_save_custom_field_variations', 10, 2 );

function cxc_save_custom_field_variations( $variation_id, $loop ) {

	// Radio Field
	$cxc_radio_field = ! empty( $_POST[ 'cxc_radio_field' ][ $loop ] ) ? $_POST[ 'cxc_radio_field' ][ $loop ] : '';
	update_post_meta( $variation_id, 'cxc_radio', sanitize_text_field( $cxc_radio_field ) );

	// Text Field
	$cxc_text_field = ! empty( $_POST[ 'cxc_text_field' ][ $loop ] ) ? $_POST[ 'cxc_text_field' ][ $loop ] : '';
	update_post_meta( $variation_id, 'cxc_text', sanitize_text_field( $cxc_text_field ) );

	// Select Field
	$cxc_select_field = ! empty( $_POST[ 'cxc_select_field' ][ $loop ] ) ? $_POST[ 'cxc_select_field' ][ $loop ] : '';
	update_post_meta( $variation_id, 'cxc_select', sanitize_text_field( $cxc_select_field ) );

	// Checkbox field
	$checkbox_field = ! empty( $_POST[ 'cxc_my_check' ][ $loop ] ) ? 'yes' : 'no';
	update_post_meta( $variation_id, 'cxc_check', $checkbox_field );

	// Textarea Field
	$cxc_textarea_field = ! empty( $_POST[ 'cxc_textarea_field' ][ $loop ] ) ? $_POST[ 'cxc_textarea_field' ][ $loop ] : '';
	update_post_meta( $variation_id, 'rudr_textarea', sanitize_textarea_field( $cxc_textarea_field ) );

	// Hidden
	update_post_meta( $variation_id, '_hidden', $_POST[ 'cxc_hidden_field' ][ $loop ] );

}
?>

Displaying Field Values in front end

<?php
	$cxc_radio = get_post_meta( $variation_id, 'cxc_radio', true );
?>

<?php
add_filter( 'woocommerce_available_variation', 'cxc_woocommerce_available_variation' );
function cxc_woocommerce_available_variation( $variation ) {

	$variation[ 'cxc_radio_field_anything' ] = get_post_meta( $variation[ 'variation_id' ], 'cxc_radio', true );
	return $variation;

}
?>

Was this article helpful?
YesNo

Leave a comment

Your email address will not be published.