Add a Custom Field to a Product Variation

In this post you will learn how you can add a custom field to the settings of Woocommerce product variations. In our example, we will add a simple text field with a label.

 

This is how the Variations look like before changing the code:

Add a Custom Field to a Product Variation

 

You can add the field by adding the following code to your functions.php file:

//Display Fields
add_action( 'woocommerce_product_after_variable_attributes', 'arrow_design_variable_fields', 10, 2 );
//JS to add fields for new variations
add_action( 'woocommerce_product_after_variable_attributes_js', 'variable_fields_js' );
//Save variation fields
add_action( 'woocommerce_process_product_meta_variable', 'arrow_design_variable_fields_process', 10, 1 );

function arrow_design_variable_fields( $loop, $variation_data ) { ?> 
<tr>
<td>
<div>
<label>My custom field</label><br>
<input type="text" style="width:100%;" name="my_custom_field[]" value=""/>
</div>
</td>
</tr>

<tr>
<td>
<div>
<label></label>

</div>
</td>
</tr>
<?php }

function arrow_design_variable_fields_process( $post_id ) {
if (isset( $_POST['variable_sku'] ) ) :
$variable_sku = $_POST['variable_sku'];
$variable_post_id = $_POST['variable_post_id'];
$variable_custom_field = $_POST['my_custom_field'];
for ( $i = 0; $i < sizeof( $variable_sku ); $i++ ) :
$variation_id = (int) $variable_post_id[$i];
if ( isset( $variable_custom_field[$i] ) ) {
update_post_meta( $variation_id, '_my_custom_field', stripslashes( $variable_custom_field[$i] ) );
}
endfor;
endif;
}

This is how the Variations look like after changing the code:

Add a Custom Field to a Product Variation

Conclusion

We hope this Add a Custom Field to a Product Variation post was helpful and you are now able to integrate this also on your website! You can find more articles here:

 

Read another Woocommerce post : ‘Check if a User Has Already Paid for a Product in Woocommerce

 

Arrow Design, based in Dublin, Ireland, provides quality website design services in Dublin and beyond at affordable prices. If you would like help with implementing the above code, or any wordpress website development project, contact us. We love website design and it shows! We provide custom wordpress plugin development, website design training and lots more.

We do it all, so you don’t have to!

Related Posts

Woocommerce Account Page Hook Guide

In this article you will find a visual hook guide for the Woocommerce Account Pages, like the Login/Register page, the Downloads page or the Orders page.

Woocommerce PHP – Product Categories by Product ID

Woocommerce Single Product Page Hook Guide

In this article you will find a visual hook guide for the Woocommerce Single Product Page. This should help you to quickly and easily find the hook positions on the page.

Woocommerce PHP – Product Categories by Product ID

Woocommerce PHP – Product Categories by Product ID

In this tutorial you will learn how to check if a product is assigned to a tag, a category or a custom taxonomy. You can check if a product is is on the shop page, in the cart, in an order & more.

…We do more, so you can do less 🙂

 

Leave a message and we will be straight back to you!

Pin It on Pinterest

Share This