How to Add custom fields to Product variations in WooCommerce

How-to-Add-custom-fields-to-Product-variations-in-WooCommerce
637 Views
0
(0)

When you run a WooCommerce business, you owe it to your consumers to offer them additional alternatives and information about each option.

Store owners may give more thorough and precise information about their items to their consumers by adding WooCommerce custom product fields, which can assist to enhance the customer experience and increase sales.

how to add custom field to variations in woocomerce

Step 1: Add a 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 the 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;

}
?>

Also Read:

How to add content after or before the ‘add to cart’ button on single product page woocommerce

How useful was this blog?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this blog.

  • CodexCoach

    - Web Development Expert

    CodexCoach is a skilled tech educator known for easy-to-follow tutorials in coding, digital design, and software development. With practical tips and interactive examples, CodexCoach helps people learn new tech skills and advance their careers.

Leave a comment

Your email address will not be published. Required fields are marked *