How to add custom product fields in WooCommerce - WooCommerce is the most popular eCommerce solution for WordPress. According to BuildWith, as of January 2017, WooCommerce accounted for over 42% of the entire online website!
Are you looking for an online website that is easy to set up and manage? WooCommerce is a great option, both free and open source. In addition, WooCommerce has grown into a very competent e-commerce solution for WordPress-based websites.
In the previous article, I talked about how to add custom product fields at WooCommerce Payments Page and here, I want to talk about how you add custom product fields at WooCommerce.
Introduction to custom fields
As you can see from the screenshot, I will show you how to add custom fields to the Edit products page. To add this field, I will show you how to edit the file functions.php, found at the interface directory.
The first step is to hook into WooCommerce_product_options_general_product_data. The function associated with this hook is responsible for displaying the new field. The second hook, WooCommerce_ process_product_meta, will save the custom field value. Both of these actions are performed by the following code:
Add product custom fields
To create fields, I will usually use the integrated WooCommerce function, including:
WooCommerce_wp crush_input
Package: WooCommerce Admin Function
Located at: include / admin / wc-meta-box-tests.php
WooCommerce_wp laparea_input
Package: WooCommerce Admin Function
Located at include / admin / wc-meta-box-tests.php
Field structure is included
Note the use of desc_tip to display that small bubble to the right of the field instead of displaying the default field description. This property works for all types of fields.
In the above code, the default step value is 1 with the min value set to 0. Basically, this means I expect a positive value here (at least greater than 0).
The following code should be used to create the text area:
Next is the complete code for the custom input field that you must paste into the.php function, located in the interface directory.
See more: Instructions on how to install WordPress when using cPanel
Save data in the database
Once you have created a custom product field, another function is required to save the value, when the user presses the update or publish button.
Now I will create the WooCommerce_product_custom_fields_save function. This function is connected to WooCommerce_ process_product_meta. This function is quite simple; First, it checks to see if the field is empty. If not, the post meta is created with update_post_meta (). I used esc_attr () with esc_html () to secure the data. Here is the code to save the value of all fields:
Get the values from the database
Now that the fields have been created, their values are saved, I now display the values in the frontend. In this case, the best method would be to work with the WooCommerce custom template.
To get that value, I'll use the common get_post_meta () function.
Add a WooCommerce custom field on the product page
Many website owners don't realize they can add custom fields to product data areas. This is the only opportunity to display additional information that does not fit the official WooCommerce UX.
The good thing is that this custom field is easily added via backend. These changes are then reflected in the frontend as a custom field at the product page, shopping cart page or similar area. In fact, this custom field also appears on the order status page.
To express this idea of the WooCommerce product custom field, I will show you how to add a new custom field in the WooCommerce product product data section:
This is how the excerpt will appear on the frontend. As you can see, the custom field has the same label as mentioned in the $ args array.
Save custom WooCommerce fields
Use the following code to add custom fields to the product page. The important thing to note about the code snippet is that it uses the standard functions and actions of WooCommerce.
WooCommerce Displays custom fields on the product page
The following code snippet shows the custom field. The process I'm simple - it checks the custom field value, confirms it's valid. If true, it displays the value as a field title.
As you can see from the following image, the custom field is displayed on the product page. Note the field title is a WooCommerce product custom product, like the id value in the snippet.
Conclusion
In this article, I discussed how to add custom fields to WooCommerce product pages. I have also demonstrated how you display values at the frontend. If you have trouble using the code or want to contribute to the discussion, leave a comment!
0 Comments