Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Add WooCommerce Advanced Custom Fields Guide for Product Variations

March 28, 2019

4 Min Read
WooCommerce product variations
Reading Time: 4 minutes

In many instances, there is additional product data that is entered in the variation description field. However, WooCommerce offers Custom Fields for Variation for this purpose. Once you have enabled these areas, the fields could be easily added to the form in the native WooCommerce store format. These fields are invaluable for entering additional data for products.

In my previous article, I discussed how to add a custom text field, product number and product text area. In this tutorial, I will discuss how you could add dropdown options, checkbox fields, and custom field types as well as an addition of variable product data.

Product variations

As apparent from the above screenshot, I will discuss how to add custom fields to the Edit Product page. To achieve this objective, I will highlight how to add and edit code in functions.php (located in the theme folder).

The two-step process comprises of:

  • Addition of hook to woocommerce_product_options_general_product_data. This hook contains code for displaying the newly added fields.
  • The addition of hook for woocommerce_process_product_meta, This hook will save the values in the custom fields.

The following code contains code for the above two actions:

 // The code for displaying WooCommerce Product Custom Fields
add_action( 'woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields' ); 
// Following code Saves  WooCommerce Product Custom Fields
add_action( 'woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save' );

Custom Fields

function woocommerce_product_custom_fields () {
global $woocommerce, $post;
echo '<div class=" product_custom_field ">';
// This function has the logic of creating custom field
//  This function includes input text field, Text area and number field
echo '</div>';
}

Field Structure

// WooCommerce custom dropdown Select
woocommerce_wp_select(
    array(
    	'id'      => '_select',
    	'label'   => __( 'WooCommerce Custom Select Field', 'woocommerce' ),
    	'options' => array(
    		'one'   => __( 'First Dropdown', 'woocommerce' ),
    		'two'   => __( 'Second Dropdown', 'woocommerce' ),
    		'three' => __( 'Third Dropdown', 'woocommerce' )
    		)
    	)
    );
The following code creates Checkbox:
//WooCommerce Custom Checkbox
    woocommerce_wp_checkbox(
    array(
    	'id'            => '_checkbox',
    	'wrapper_class' => 'show_if_simple',
    	'label'         => __('WooCommerce Custom Checkbox Field', 'woocommerce' )
    	 	)
    );

The following code creates WooCommerce custom field type
// WooCommerce Custom field Type
    ?>
    <p class="form-field custom_field_type">
    	<label for="custom_field_type"><?php echo __( 'WooCommmerce Custom Field Type', 'woocommerce' ); ?></label>
    	<span class="wrap">
    		<?php $custom_product_field_type = get_post_meta( $post->ID, '_custom_field_type', true ); ?>
    		<input placeholder="<?php _e( 'Field One', 'woocommerce' ); ?>" class="" type="number" name="_field_one" value="<?php echo $custom_product_field_type[0]; ?>" step="any" min="0" style="width: 80px;" />
    		<input placeholder="<?php _e( 'Field Two', 'woocommerce' ); ?>" type="number" name="_field_two" value="<?php echo $custom_product_field_type[1]; ?>" step="any" min="0" style="width: 80px;" />
    	</span>
    </p>

The following code demonstrates how the above snippets combine together for custom input fields. This code must be added to functions.php (located in the theme folder).

function woocommerce_product_custom_fields()
{
    global $woocommerce, $post;
    echo '<div class="product_custom_field">';
    // WooCommerce cusotm dropdown Select
    woocommerce_wp_select(
    array(
    	'id'      => '_select',
    	'label'   => __( 'WooCommerce Custom Select Field', 'woocommerce' ),
    	'options' => array(
    		'one'   => __( 'First Dropdown', 'woocommerce' ),
    		'two'   => __( 'Second Dropdown', 'woocommerce' ),
    		'three' => __( 'Third Dropdown', 'woocommerce' )
    		)
    	)
    );
    //WooCommerce Custom Checkbox
    woocommerce_wp_checkbox(
    array(
    	'id'            => '_checkbox',
    	'wrapper_class' => 'show_if_simple',
    	'label'         => __('WooCommerce Custom Checkbox Field', 'woocommerce' )
    	 	)
    );
    // WooCommerce Custom field Type
    ?>
    <p class="form-field custom_field_type">
    	<label for="custom_field_type"><?php echo __( 'WooCommmerce Custom Field Type', 'woocommerce' ); ?></label>
    	<span class="wrap">
    		<?php $custom_product_field_type = get_post_meta( $post->ID, '_custom_field_type', true ); ?>
    		<input placeholder="<?php _e( 'Field One', 'woocommerce' ); ?>" class="" type="number" name="_field_one" value="<?php echo $custom_product_field_type[0]; ?>" step="any" min="0" style="width: 80px;" />
    		<input placeholder="<?php _e( 'Field Two', 'woocommerce' ); ?>" type="number" name="_field_two" value="<?php echo $custom_product_field_type[1]; ?>" step="any" min="0" style="width: 80px;" />
    	</span>
    </p>
<?php

?>
<?php
    echo '</div>';

}

Save Data

Once you have created the custom product fields, another function is required to save the values, once a user hits either the update or the publish button.

function woocommerce_product_custom_fields_save($post_id)
{

    // WooCommerce custom dropdown Select
    $woocommerce_custom_product_select = $_POST['_select'];
    if (!empty($woocommerce_custom_product_select))
        update_post_meta($post_id, '_select', esc_attr($woocommerce_custom_product_select));

    //WooCommerce Custom Checkbox
    $woocommerce_custom_product_checkbox = isset($_POST['_checkbox']) ? 'yes' : 'no';
    update_post_meta($post_id, '_checkbox', $woocommerce_custom_product_checkbox);

    // WooCommerce Custom field Type
    $custom_product_field_type = array(esc_attr($_POST['_field_one']), esc_attr($_POST['_field_two']));
    update_post_meta($post_id, '_custom_field_type', $custom_product_field_type);
}

Here is the complete code of custom input fields which you must paste in the functions.php, located in the theme folder.

add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');

// Save Fields
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');


function woocommerce_product_custom_fields()
{
    global $woocommerce, $post;
    echo '<div class="product_custom_field">';
    // WooCommerce custom dropdown Select
    woocommerce_wp_select(
    array(
    	'id'      => '_select',
    	'label'   => __( 'WooCommerce Custom Select Field', 'woocommerce' ),
    	'options' => array(
    		'one'   => __( 'First Dropdown', 'woocommerce' ),
    		'two'   => __( 'Second Dropdown', 'woocommerce' ),
    		'three' => __( 'Third Dropdown', 'woocommerce' )
    		)
    	)
    );
    //WooCommerce Custom Checkbox
    woocommerce_wp_checkbox(
    array(
    	'id'            => '_checkbox',
    	'wrapper_class' => 'show_if_simple',
    	'label'         => __('WooCommerce Custom Checkbox Field', 'woocommerce' )
    	 	)
    );
    // WooCommerce Custom field Type
    ?>
    <p class="form-field custom_field_type">
    	<label for="custom_field_type"><?php echo __( 'WooCommerce Custom Field Type', 'woocommerce' ); ?></label>
    	<span class="wrap">
    		<?php $custom_product_field_type = get_post_meta( $post->ID, '_custom_field_type', true ); ?>
    		<input placeholder="<?php _e( 'Field One', 'woocommerce' ); ?>" class="" type="number" name="_field_one" value="<?php echo $custom_product_field_type[0]; ?>" step="any" min="0" style="width: 80px;" />
    		<input placeholder="<?php _e( 'Field Two', 'woocommerce' ); ?>" type="number" name="_field_two" value="<?php echo $custom_product_field_type[1]; ?>" step="any" min="0" style="width: 80px;" />
    	</span>
    </p>
<?php

?>
<?php
    echo '</div>';

}
function woocommerce_product_custom_fields_save($post_id)
{

    // WooCommerce custom dropdown Select
    $woocommerce_custom_product_select = $_POST['_select'];
    if (!empty($woocommerce_custom_product_select))
        update_post_meta($post_id, '_select', esc_attr($woocommerce_custom_product_select));

    //WooCommerce Custom Checkbox
    $woocommerce_custom_product_checkbox = isset($_POST['_checkbox']) ? 'yes' : 'no';
    update_post_meta($post_id, '_checkbox', $woocommerce_custom_product_checkbox);

    // WooCommerce Custom field Type
    $custom_product_field_type = array(esc_attr($_POST['_field_one']), esc_attr($_POST['_field_two']));
    update_post_meta($post_id, '_custom_field_type', $custom_product_field_type);
}

Display Field Value

WooCommerce introduced wp.template. After this, it is now easy to display variations custom fields value based on the selection of the attributes selected in the dropdown menu. For this action, add the following code to the functions.php:

// Custom Product  Variation Settings
add_filter( 'woocommerce_available_variation', 'custom_load_variation_settings_products_fields' );
function custom_load_variation_settings_products_fields( $variations ) {
	
	// duplicate the line for each field
	$variations['_select'] = get_post_meta( $variations[ 'variation_id' ], '_select', true );
	
	return $variations;
}

Next, you need to make changes to a custom template that displays the variation fields. The file is named variation.php (located in wp-plugins/plugins/woocommerce/templates/single-product/add-to-cart/).

Note: Do not edit this file directly. Instead, create a copy in the folder woocommerce/templates/single-product/add-to-cart/ in the theme folder. Next, add this code:

<div class="woocommerce-variation-custom-select">
        {{{ data.variation.select }}}
    </div>

Conclusion

In this tutorial, I discussed the addition of custom fields (dropdown, checkbox, WooCommerce custom field type) with WooCommerce product variations.

If you find an issue in the code or would like to contribute to the discussion, please leave a comment below.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Your WooCommerce Store Needs A Reliable Host

With no compromise on Performance, Security & Support.

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at owais.alam@cloudways.com

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!