How to add custom WooCommerce product fields (2023)

WooCommerce has multiple methods of storing product data. All standard product fields include name, price, categories, tags, and measurements. There is also the option to add product features. But what if you need to store more product fields? What if you need something more customizable than product variants like checkboxes or text boxes? This is where WooCommerce custom fields come in.

Today's tutorial will show youhow to add custom WooCommerce product fields. Whether you want to add rich properties to a WooCommerce product page or present alternative product variants at the click of a button, creating custom fields in WooCommerce only takes a few minutes. You can then customize every feature of your WooCommerce dashboard and quickly add site information that would normally require manual data entry.

Why do we need to add WooCommerce custom product fields?

So what are the main benefits of using custom product fields? Here is the short list:

• Product custom fields are used to add more product information to items such as PCs, where technical data such as RAM and processor power are displayed.
• Create messages that can be quickly changed into something else.
• For example, an additional video is an example of a unique media element that cannot be introduced using ordinary WooCommerce features.
• Specify dates and times for a product countdown, auction, or release date.
• Customers can browse other product alternatives in addition to variations.
• Diagrams detailing how a product is used.
• Add-on offers provide the consumer with multiple upsells that complement the existing purchase. Brush attachments for electric toothbrushes or various charms for a bracelet are two examples.
• You want to include unusual or additional data on a product page that isn't supported by WooCommerce or easier to fill out with custom fields.

Common types of custom product fields on WooCommerce

When individuals mention WooCommerce custom fields, they usually imply one of two things:

• Including further product information: This is the most common use of custom fields. Custom fields are used in WordPress to add additional fields to a post, page or item. These are used to store and display more information, e.g. B. additional text fields, data, photos, etc.

• Sell ​​more product possibilities instead of using variations: This includes additional elements such as drop-down lists, checkboxes, radio buttons, text boxes, etc. that the buyer must fill out before adding the goods to their shopping cart. Additional product options are not technically custom fields at all; They are better known as product add-ons! However, many people refer to these possibilities as custom fields.

How to add custom product fields on WooCommerce product pages

Method 1: Coding

As you can see in the example below, we will show you how to add custom fields to theedit productbook page. Additionally, we will show you how to modify the functions.php file in the theme folder to add these fields.

Set up custom product fields

The first step is to connect to the woocommerce_product_options_general_product_data variable. The function associated with this hook is responsible for displaying the new fields. The custom field values ​​are stored via a second hook, woocommerce_process_product_meta. Both activities are performed in the following code:

// The code to display the WooCommerce custom product fieldsadd_action( 'woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields' ); // The code below saves WooCommerce custom product fieldsadd_action( 'woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save' );

function woocommerce_product_custom_fields () { global $woocommerce, $post;echo '<div class=" product_custom_field ">';// this function has the logic to create custom fields// this function contains an input text field, a text area and a number field echo ' </div>';}

To add the fields, we often use WooCommerce's built-in functions, such as:

woocommerce_wp_text_input

Package: WooCommerce\Admin\Functions

Is located: include/admin/wc-meta-box-functions.php

woocommerce_wp_textarea_input

Package: WooCommerce\Admin\Functions

Is located: include/admin/wc-meta-box-functions.php

// Custom product text field woocommerce_wp_text_input( array( 'id' => '_custom_product_text_field', 'label' => __( 'My Text Field', 'woocommerce' ), 'placeholder' => 'Custom product text field', ' desc_tip' => 'true' ) );

Instead of displaying the usual field description, it uses desc_tip to display those awesome little bubbles to the right of the field. This property applies to all field types.

// Custom product number field woocommerce_wp_text_input( array( 'id' => '_custom_product_number_field', 'placeholder' => 'Custom product number field', 'label' => __('Custom product number field', 'woocommerce'), ' type' => ' number', 'custom_attributes' => array( 'step' => 'any', 'min' => '0' ) ));

The default value of the step in the above code is one with min set to zero. Essentially this means that we expect a good deal here (at least greater than zero). The text box should be created with the following code:

// Custom Product Textarea woocommerce_wp_textarea_input( array( 'id' => '_custom_product_textarea', 'placeholder' => 'Custom Product Textarea', 'label' => __('Custom Product Textarea', 'woocommerce') ) );

Here is the full code for custom input fields that you need to put in the theme folder's functions.php file:

// show fieldsadd_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');// save fieldsadd_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');function woocommerce_product_custom_fields(){ global $woocommerce, $post; echo '<div class="product_custom_field">'; // Custom product text field woocommerce_wp_text_input( array( 'id' => '_custom_product_text_field', 'placeholder' => 'Custom product text field', 'label' => __('Custom product text field', 'woocommerce'), 'desc_tip' => ' true' ) ); //Custom product number field woocommerce_wp_text_input( array( 'id' => '_custom_product_number_field', 'placeholder' => 'Custom product number field', 'label' => __('Custom product number field', 'woocommerce'), 'type' => ' number', 'custom_attributes' => array( 'step' => 'any', 'min' => '0' ) ) ); //Custom product text area woocommerce_wp_textarea_input( array( 'id' => '_custom_product_textarea', 'placeholder' => 'Custom product text area', 'label' => __('Custom product text area', 'woocommerce') ) ); echo '</div>';}

Save your fields in the database

After setting up the custom product fields, you need another feature to save the data when the user clicks the refresh or publish button. We call this function woocommerce_product_custom_fields_save. This function is linked to the woocommerce_process_product_meta hook. This method is pretty simple; it first determines whether the field is empty. If not, update_post_meta() is used to generate a post meta. To protect the data we used esc_attr() and esc_html(). Here is the code to store all the values ​​of the fields:

function woocommerce_product_custom_fields_save($post_id){ // Benutzerdefiniertes Produkttextfeld $woocommerce_custom_product_text_field = $_POST['_custom_product_text_field']; if (!empty($woocommerce_custom_product_text_field)) update_post_meta($post_id, '_custom_product_text_field', esc_attr($woocommerce_custom_product_text_field));// Benutzerdefiniertes Produktnummernfeld $woocommerce_custom_product_number_field = $_POST['_custom_product_number_field']; if (!empty($woocommerce_custom_product_number_field)) update_post_meta($post_id, '_custom_product_number_field', esc_attr($woocommerce_custom_product_number_field));// Custom Product Textarea Field $woocommerce_custom_procut_textarea = $_POST['_custom_product_textarea']; if (!empty($woocommerce_custom_procut_textarea)) update_post_meta($post_id, '_custom_product_textarea', esc_html($woocommerce_custom_procut_textarea));}

Get your data back from the database

We display the values ​​on the frontend after the fields are created and their values ​​are saved. In this case, working with custom WooCommerce templates would be the ideal option. We use the well-known get_post_meta() method to retrieve this information.

<?php while (have_posts()) : the_post(); ?><?php wc_get_template_part('content', 'single-product'); ?><?php// Display the value of the custom product text field echo get_post_meta($post->ID, '_custom_product_text_field', true);// Display the value of the custom product number field echo get_post_meta(get_the_ID(), '_custom_product_number_field ', true) ;// Display the value of the custom product textarea echo get_post_meta(get_the_ID(), '_custom_product_textarea', true); ?><?php endwhile; // end of loop. ?>

Add custom product fields on the product page

Some business owners don't know that they can add custom fields to the product data field. This provides a unique way to display information that doesn't fit into the standard WooCommerce UX. The good news is that these custom fields can be easily added from the backend. These changes are then reflected in the frontend as custom fields on product pages, cart pages, and other places. These custom fields can also appear on order status pages. To explain the concept of WooCommerce custom product fields, let's show you how to add a new custom field to the Product Data section of a WooCommerce product page:

function woocommerce_product_custom_fields(){ $args = array( 'id' => 'woocommerce_custom_fields', 'label' => __('Add WooCommerce Custom Fields', 'cwoa'), ); woocommerce_wp_text_input($args);} add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');

This is what the snippet would look like in the frontend. As you can see, the custom field has the same label as the $args array.

Save your changes

To add custom fields to product pages, use the following code snippet. The most important feature of the snippet is that it uses traditional WooCommerce methods and actions.

Funktion save_woocommerce_product_custom_fields($post_id){ $product = wc_get_product($post_id); $custom_fields_woocommerce_title = isset($_POST['woocommerce_custom_fields']) ? $_POST['woocommerce_custom_fields'] : ''; $product->update_meta_data('woocommerce_custom_fields', sanitize_text_field($custom_fields_woocommerce_title)); $product->save();}add_action('woocommerce_process_product_meta', 'save_woocommerce_product_custom_fields');

View your new custom fields

The custom fields are shown in the following excerpt. The procedure is simple: it validates the value of the custom field and confirms that it has a value. If the case is valid, the value is displayed as the title of the field.

Funktion woocommerce_custom_fields_display(){ global $post; $product = wc_get_product($post->ID); $custom_fields_woocommerce_title = $product->get_meta('woocommerce_custom_fields'); if ($custom_fields_woocommerce_title) { printf( '<div><label>%s</label><input type="text" id="woocommerce_product_custom_fields_title" name="woocommerce_product_custom_fields_title" value=""></div>', esc_html ($custom_fields_woocommerce_title) ); }}add_action('woocommerce_before_add_to_cart_button', 'woocommerce_custom_fields_display');

The custom field will appear on the product page as shown in the image below. The field title is “WooCommerce Custom Product Fields Title”, which is the ID value in the excerpt.

Method 2: Using a third-party plugin

For example, in this approach, we create a fictional computer store that sells laptops. Entering the computer specifications for each new notebook would take a long time. So we're adding fields to select these properties based on the laptops we offer.

Install the free one firstAdvanced custom fieldsPlugin on your WordPress site to add custom fields to WooCommerce goods. Then find out how here.

Step 1: Create a new field group

Navigate to the new oneCustom Fieldstab in your WordPress dashboard. Then nextfield groups, clickAdd new.

Give a field group a name. A field group is a set of fields for a single product or part of your website, e.g. B. A list of attributes to be displayed on all laptop product pages.

Step 2: Add your custom fields

To add a custom field to this group, select itadd fieldTaste.

In the next section you can add:

• field label– primarily for your use.
• Feldname– These are the sections you will use to create your custom code or shortcode in our instance. You can leave this as the default value of the plugin.
• Field type– the format you create for this field. Date pickers, checkboxes, dropdowns and radio buttons are among the options available. You may also need to add some guidance for yourself or the developer - as well as a statement of whether or not this field is required.

If you are dealing with a field that contains numerous choices (e.g. radio buttons), next add your Choices field. These are the choices you want to showcase in the backend of your product page, e.g. B. different core processors.

The other options, such as Items such as the default value, the layout, and whether or not to show the value or label are usually optional.

When you are finished with a field or group, clickPublishorTo updatebutton to save it.

press theadd fieldbutton again to add additional fields to your group.

Step 3: Customize additional field group settings

When you're done with the field group, move on to theLocationModule. This is where you tell WordPress where you want the field group to appear on your dashboard. The product should be set asPost-Typ. Alternatively, if you want to know more about it, you can select a product category.

Make sure thefield groupis available inIdeas. This way users can show it on these product pages and maybe show your customers the field options. Your personal choices determine the style. The same applies to the position, the placement of the labels and the arrangement of the instructions. It's entirely up to you and the way you organize your backend. If in doubt, leave them at the default settings. If you have numerous field groups that appear on product pages, use the order number. This determines the order in which certain field groupings are displayed. You can also add a description to your screen and hide certain features.

Step 4: Add more data to the products

Next, go to the editor for the product you want to add custom fields to. If all your settings are correct, you should see the custom fields belowproduct dataCrate. For example, if you were to create a new laptop product page, you would select some additional items as in the image below.

Step 5: Show custom field in frontend

You need to display the data from your custom fields on the front-end single product page to complete the process. You can put this information anywhere, but the long or short description of the product is an excellent place to start. Use the[acf-Feld=""]Shortcode to display field data in frontend. Add the between the quotation marksFeldname:

The field name for each field can be found in the field group editing interface:

To finish, select thePublishorTo updateButton. When customizing your product in the frontend you will see your custom fields with the shortcodes:

Diploma

The benefit of using Advanced Custom Fields over other field builder plugins is that you can insert your new fields anywhere on your site, including product pages, items, and cart modules, allowing you to customize your dashboard and speed up the content creation process. It's a fantastic alternative to boost your creativity and make the time-consuming task of creating product pages a little easier.

We hope this tutorial will help you understandhow to add custom WooCommerce product fieldsand save it to the WordPress backend without any special technical knowledge (plus a quick look at how to do it programmatically). Follow the instructions in this guide and implement them on your website. It's an excellent non-technical way of storing and displaying additional product information in WooCommerce.