You Are Here
PHPStackoverflow

How to enable WooCommerce Add Custom Fields to Products?

PHP

WooCommerce Custom fields improve the user experience. Also, it’s quite easy to enable this functionality on a single product. You can integrate the “RRP/MSRP” field. Or else, you can even utilize ACF to display value on a single product page. However, how to enable WooCommerce add custom fields to products? Let’s decode how!

So, you can implement this simple coding & add, save, & display custom fields. 

Image showing WooCommerce add custom fields to products variations function

Part 1 – PHP Snippet: WooCommerce Add custom field to Products Variations

// 1. Add custom field input @ Product Data > Variations > Single Variation
 
add_action( 'woocommerce_variation_options_pricing', 'phpsof_add_custom_field_to_variations', 10, 3 );
 
function phpsof_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
   woocommerce_wp_text_input( array(
'id' => 'custom_field[' . $loop . ']',
'class' => 'short',
'label' => __( 'Custom Field', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, 'custom_field', true )
   ) );
}
 
// -----------------------------------------
// 2. Save custom field on product variation save
 
add_action( 'woocommerce_save_product_variation', 'phpsof_save_custom_field_variations', 10, 2 );
 
function phpsof_save_custom_field_variations( $variation_id, $i ) {
   $custom_field = $_POST['custom_field'][$i];
   if ( isset( $custom_field ) ) update_post_meta( $variation_id, 'custom_field', esc_attr( $custom_field ) );
}
 
// -----------------------------------------
// 3. Store custom field value into variation data
 
add_filter( 'woocommerce_available_variation', 'phpsof_add_custom_field_variation_data' );
 
function phpsof_add_custom_field_variation_data( $variations ) {
   $variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '</span></div>';
   return $variations;
}

Part 2 – WooCommerce Template Override: Show Custom Field on Product Variation Select

You can use JavaScript to retrieve product variation data. So, we need to override the variation.php WooCommerce template file. It is available under woocommerce/templates/single-product/add-to-cart. It is first step to enable WooCommerce add custom fields to Products function.

However, we will not prefer to modify core files. If we do so, then the code will disappear in the next WooCommerce update. To override such coding, you need to create variation.php file & keep it in child theme. Speaking in detail, it is placed in the child theme’s woocommerce/single-product/add-to-cart folder. You should follow these steps to enable WooCommerce add custom fields to Products function.

Finally, woocommerce/single-product/add-to-cart/variation.php file script will look alike below. Keep in mind that you need to change “custom_field” occurrences if you have renamed it in Part 1. 

<script type="text/template" id="tmpl-variation-template">
<div class="woocommerce-variation-description">
{{{ data.variation.variation_description }}}
</div>
 
<div class="woocommerce-variation-price">
{{{ data.variation.price_html }}}
</div>
 
<div class="woocommerce-variation-custom_field">
{{{ data.variation.custom_field}}}
</div>
 
<div class="woocommerce-variation-availability">
{{{ data.variation.availability_html }}}
</div>
</script>

Where do you add this snippet?

So, this is how you activate this snippet named WooCommerce add custom fields to products variations. Also, it is easier to activate this function with this code. So, to apply this code, just add this PHP snippet at your child theme function.php file’s bottom. It should be placed before “?>”, if you have it there. Apart from this, CSS goes in your child theme style.css file.

Is this snippet still valid?

So, this way, you can learn about WooCommerce add custom fields to products variations. I have applied this code on the Storefront theme and WordPress friendly hosting PHP 7.3. Let me know if everything works as expected. Share it further if you find this snippet useful for you and it had saved your time.

Also Read, How to Upload File in PHP? A Definitive Guide for Every Beginner

How to enable WooCommerce Display Shipping Date at Product Page?

Important link: WooCommerce – https://woocommerce.com/

Related Posts