How to Add WooCommerce Custom Fields to Products

WooCommerce Custom Fields on Product Page

As apparent from the above screenshot, we will add custom fields to the WooCommerce product edit screen under the General tab. We will be working on the file functions.php (default location to add custom function) of your theme folder.

Required WooCommerce Hook

The first step is to using the right hook. There are certain WooCommerce product options hook like below.

  • woocommerce_product_options_general_product_data – General Tab
  • woocommerce_product_options_inventory_product_data – Inventory Tab
  • woocommerce_product_options_shipping – Shipping Tab
  • woocommerce_product_options_advanced – Advanced Tab

In this tutorial, we will be using the woocommerce_product_options_general_product_data action hook. If you want to add your fields to any other tab than the general one, simply modify the hook name.

// Display Fields using WooCommerce Action Hook
add_action( ‘woocommerce_product_options_general_product_data’, ‘woocom_general_product_data_custom_field’ );

The callback function(below) linked to the above hook will be responsible for the newly created custom fields under the General tab. There are various functions available in WooCommerce to add different types of inputs fields.

WooCommerce Input Fields types

  • Text Field – woocommerce_wp_text_input()
  • Number Field – woocommerce_wp_text_input()
  • Radio – woocommerce_wp_radio()
  • Checkbox – woocommerce_wp_checkbox()
  • Dropdown Select – woocommerce_wp_select()
  • Textarea – woocommerce_wp_textarea_input()
  • Hidden Field – woocommerce_wp_hidden_input()

The callback function simply use any one of the input type function with respective argument values(id, type, label, description, desc_tip, laceholder) for registering fields.

There are many other supported input types such as tel, email, number and you can add those using woocommerce_wp_text_input() with mentioning the ‘type’ value.

Adding New WooCommerce Fields

[php]
function woocom_general_product_data_custom_field() {
// Create a custom text field

// Text Field
woocommerce_wp_text_input(
array(
‘id’ => ‘_text_field’,
‘label’ => __( ‘Custom Text Field’, ‘woocommerce’ ),
‘placeholder’ => ‘Custom text field’,
‘desc_tip’ => ‘true’,
‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
)
);

// Number Field
woocommerce_wp_text_input(
array(
‘id’ => ‘_number_field’,
‘label’ => __( ‘Custom Number Field’, ‘woocommerce’ ),
‘placeholder’ => ”,
‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ ),
‘type’ => ‘number’,
‘custom_attributes’ => array(
‘step’ => ‘any’,
‘min’ => ’15’
)
)
);

// Checkbox
woocommerce_wp_checkbox(
array(
‘id’ => ‘_checkbox’,
‘label’ => __(‘Custom Checkbox Field’, ‘woocommerce’ ),
‘description’ => __( ‘Check me!’, ‘woocommerce’ )
)
);

// Select
woocommerce_wp_select(
array(
‘id’ => ‘_select’,
‘label’ => __( ‘Custom Select Field’, ‘woocommerce’ ),
‘options’ => array(
‘one’ => __( ‘Custom Option 1’, ‘woocommerce’ ),
‘two’ => __( ‘Custom Option 2’, ‘woocommerce’ ),
‘three’ => __( ‘Custom Option 3’, ‘woocommerce’ )
)
)
);

// Textarea
woocommerce_wp_textarea_input(
array(
‘id’ => ‘_textarea’,
‘label’ => __( ‘Custom Textarea’, ‘woocommerce’ ),
‘placeholder’ => ”,
‘description’ => __( ‘Enter the custom value here.’, ‘woocommerce’ )
)
);

}
[/php]

Save or Update WooCommerce Meta Data

Once your WooCommerce product fields are created, next obvious step is to save the entered information. For saving the information we have to use another hook woocommerce_process_product_meta

// Hook to save the data value from the custom fields
add_action( ‘woocommerce_process_product_meta’, ‘woocom_save_general_proddata_custom_field’ );

Once again we will use this hook to call one callback function to save or update our meta information. So the next required code will look like below:

How to access WooCommerce fields Values

[php]
/** Hook callback function to save custom fields information */
function woocom_save_general_proddata_custom_field( $post_id ) {
// Save Text Field
$text_field = $_POST[‘_text_field’];
if( ! empty( $text_field ) ) {
update_post_meta( $post_id, ‘_text_field’, esc_attr( $text_field ) );
}

// Save Number Field
$number_field = $_POST[‘_number_field’];
if( ! empty( $number_field ) ) {
update_post_meta( $post_id, ‘_number_field’, esc_attr( $number_field ) );
}
// Save Textarea
$textarea = $_POST[‘_textarea’];
if( ! empty( $textarea ) ) {
update_post_meta( $post_id, ‘_textarea’, esc_html( $textarea ) );
}

// Save Select
$select = $_POST[‘_select’];
if( ! empty( $select ) ) {
update_post_meta( $post_id, ‘_select’, esc_attr( $select ) );
}

// Save Checkbox
$checkbox = isset( $_POST[‘_checkbox’] ) ? ‘yes’ : ‘no’;
update_post_meta( $post_id, ‘_checkbox’, $checkbox );

// Save Hidden field
$hidden = $_POST[‘_hidden_field’];
if( ! empty( $hidden ) ) {
update_post_meta( $post_id, ‘_hidden_field’, esc_attr( $hidden ) );
}
}
Please note that, esc_attr() and esc_html() are used to secure data.
[/php]

Ok, great, you are done with creating fields and saving their values.
Now if you want to retrieve and display the value of those custom fields on the front-end
you just need to use the WordPress function –  get_post_meta().

[php]
// Display Custom Field Value
echo get_post_meta( $post->ID, ‘custom-field-slug’, true );

// You can also use
echo get_post_meta( get_the_ID(), ‘custom-field-slug’, true );
[/php]

Finally, you’ve learned how to add WooCommerce custom fields to add more information to your products by editing the product page template. If you’re looking for a method to create and show WooCommerce custom fields without coding, check out this non-technical tutorial.

Thank you for reading, I hope you find this useful. Don’t forget to share this via social media, who knows someone else might be looking for this.

Leave a comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *