How to add custom product fields in WooCommerce


how-them-truong-san-products-in-woocommerce

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.


how-to-add-products-in-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:


how-to-add-products-in-woocommerce


Add product custom fields


how-to-add-products-in-woocommerce


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


how-to-add-products-in-woocommerce


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.


how-to-add-to-products-in-woocommerce


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:


how-to-add-products-in-woocommerce


Next is the complete code for the custom input field that you must paste into the.php function, located in the interface directory.


how-to-add-products-in-woocommerce


how-to-add-products-in-woocommerce


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:


how-to-add-products-in-woocommerce


how-to-add-products-in-woocommerce


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.


how-to-add-products-in-woocommerce


how-to-add-products-in-woocommerce


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:


how-to-add-products-in-woocommerce


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.


how-to-add-products-in-woocommerce



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.


how-to-add-products-in-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.


how-to-add-products-in-woocommerce


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.


how-to-add-products-in-woocommerce


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!