According to recent analytics, WooCommerce is the leading e-commerce platform, having a market share of more than 25,9%. It does not only helps users to quickly create online stores but also easily extends core features. Actually, it’s one of the reasons why developers like contributing to WooCommerce plugins and made it become more popular.
While developing the new extensions PPWP WooCommerce Integration, we want to add extra information to client WooCommerce products data. In the following post, we will show you how to achieve these missions:
- Add a new tab and its content to “Product data”
- Save the new tab content data to product metadata
Show the custom tab and its content in Product Data
Our secret “weapon” is woocommerce_product_data_tabs to add the “PPWP Access Link” tab. We can see that WooCommerce fire a hook in the static function get_product_data_tabs. The hook parameter is an array with the key is the tab’s key and value is the collection of tab attributes label, target, class, and priority.
We can define the show and hide rules by defining classes hide_if_downloadable, hide_if_virtual, show_if_downloadable and show_if_virtual. In the above snippet, we only allow showing our tab if the product type is virtual.
After adding the custom tab, namely PPWP Access Link, we need to provide the corresponding tab content by hooking into the woocommerce_product_data_panels action.
We can use the build-in WooCommerce functions woocommerce_wp_text_input, woocommerce_wp_textarea_input, woocommerce_wp_select to render the text boxes, select boxes, etc. As a result of the above snippet, our tab content added new fields following their labels and tooltips.
We succeed to create a handsome man, however, behind every good man, there’s a good woman to save their assets.
Saving the custom tab data
Thanks to woocommerce_process_product_meta hook pass us the post’s id following the metadata. In this situation, we will use woocommerce_process_product_meta_simple because our solution currently supports the simple product type.
The save_options function updates the product metadata receiving from our defined form data. After we change the tab fields value and click update, the updated data still remains.
What’s do you think? Are you ready to create your own awesome WooCommerce product settings?