A Guide On Creating Custom Setting Panel In WooCommerce

By Mohit Surati WooCommerce 408 Views

With over 4 millions active downloads, WooCommerce is the leading e-commerce plugin for the WordPress platform. One of the main reasons behind the massive popularity of WooCommerce is its ability to extend elements with utmost ease and ease of customization.

Similar to WordPress, WooCommerce also comes with plenty of filters as well as the actions which help the developer to extend WooCommerce’s default functionality. One of the best examples of this is the ability to create a custom setting panel in WooCommerce.

In this blog, we’re going to provide you with a step-by-step guide on how to create a custom setting panel in WooCommerce. So, let’s get the things underway.

Before going into the technical details of creating a custom setting panel, let us define a roadmap of what we’re going to do right through this blog. We will basically focus on three major things:

  • Adding A Custom Panel In WooCommerce
  • Adding Custom Fields To Panel
  • Saving Custom Field Values

We will create a custom panel for a single product data and add some custom fields to that. After that, we will use these custom fields from the front-end & save their values in the product orders.

In order to understand this whole scenario in an effective manner, we will provide you with a real-time example where we will create & add a ‘Custom’ panel for displaying the effective pricing of the e-book in WooCommerce product data as shown in the screenshot below:

Custom-Setting-WooCommerce

As shown in the screenshot above, the ‘Custom’ panel consists of one custom field:

  • An input field for adding the effective price of the e-book

So far, we have laid down the roadmap of how we’re going to proceed right throughout this blog. Now, it’s time to take that into account and create something fruitful for your e-commerce store.

Let’s Create Something Fruitful.!

Before developing a custom panel in WooCommerce, you need to have a rough idea of what custom panel means. So, let’s understand that aspect first in detail, as only after knowing that you will be able to develop your own custom panel for the WooCommerce store.

What Is A WooCommerce Custom Setting Panel?

If you’re utilizing the WooCommerce Customization Services for a long time, then you must be knowing that when you create a new product for your online store, you need to enter critical information of product like name, price, etc. in the ‘Products Data’ section.

WooCommerce-Product-Data-Panel

As shown in the screenshot above that, the Product Section is divided into the different panels such as General, Inventory, Shipping, Linked Products, etc. which allows you to set up the all the things related to a particular product on your WooCommerce store.

Although WooCommerce provides you with plenty of default setting panels for products, there are many real-time scenarios where these settings are not good enough to provide the functionalities desired by the clients. For that purpose, you need to create a custom panel.

In our case, we’re going to create a custom setting panel and add an input field for the effective pricing of an e-book as discussed earlier. So, let’s dive deep into the technical side of things & analyze the development phase.

1. Creating A Custom Tab

Basically, you have two options for creating a custom panel in WooCommerce: either you directly add the coding for the custom panel to your existing theme or you can create a plugin which allows you to extend the functionality.

If you add the code directly into your existing theme’s functions.php file, then you won’t be able to retain this custom tab functionality on switching the WooCommerce theme. However, if you create a plugin for this purpose, you can retain the extra functionality created earlier.

In our case, we’re going with the first option – adding all the code in theme’s functions.php file. The reason behind that is, it a simple approach & it requires you to spend a less amount of time.

In order to create a custom tab, we utilize the woocommerce_product_data_tabs filter using the custom_tab_product function.

function custom_tab_product($tabs) {
$tabs['custom'] = array(
'label' => 'Custom',
'target' => 'custom_options', //This refers to the div ID, Shown is Step 2.
);
return $tabs;
}
add_filter('woocommerce_product_data_tabs', 'custom_tab_product');

This function will pass a WooCommerce object which can be modified using the following parameters:

  • label: use this to define the name of your tab
  • target: this is used to create an anchor link so needs to be unique
  • class: an array of classes that will be applied to your panel
  • priority: define where you want your tab to appear

In our case, we have selected a label named Custom and the target named custom_options for displaying the effective price of an e-book on the WooCommerce storefront.

2. Adding Custom Fields To The Tab

function custom_product_tab_content() {
global $post;
$val = get_post_meta($post->ID, '_custom_effective_price', true);
//This will get the value of field if alreay inserted.
?&gt;</strong></em>
<div id="custom_options" class="panel woocommerce_options_panel">
<p class="form-field _regular_price_field "><label for="_custom_effective_price">Effective price (?)</label>
<input id="_custom_effective_price" name="_custom_effective_price" type="number" value="&lt;?php echo $val; ?&gt;" /></p>

</div>
<!--?php &lt;br ?--> }

add_filter('woocommerce_product_data_panels', 'custom_product_tab_content');

For adding the custom fields to our custom tab, we utilize the woocommerce_product_data_panels filter. We have used the function custom_product_tab_content to create a div wrapper.

Inside that wrapper, we have created a custom field by utilizing woocommerce_product_data_panels filter which is used specifically for creating custom fields.

Always remember one thing that, the id attribute of your div should match the value that you’ve passed into the target parameter of your ‘Custom’ panel.

In our case, we have passed the value of the target parameter custom_options in the custom_tab_product function and assigned that same value as the id of the div tag in the custom_product_tab_content function.

By following this methodology, you’re telling the WooCommerce to display the panel when someone clicks on the ‘Custom’ tab.

WooCommerce Custom Field Functions

The WooCommerce provides you with some functions which are specifically used for creating the custom field. In our case, we have not utilized these functions for creating custom fields, as we have to display only one field. However, you can also use these functions to create custom values. Two of the most popular functions related to that are as follows:

  • woocommerce_wp_checkbox
  • woocommerce_wp_text_input

These functions take an array of arguments which includes:

  • id: This is the ID of your custom field and it needs to be unique.
  • label: This is the label of your custom field which the user will see.
  • desc_tip: An optional tooltip which appears when the user hovers over the question mark next to the label.

You should also remember that woocommerce_wp_text_input takes a type argument where you can specify the number for a number input field and text for the text input field.

3. Saving Value Of Custom Fields In Database

For saving the value of custom fields in your database, WooCommerce provides you with the woocommerce_process_product_meta filter. In our case, we have utilized this filter by creating the function called product_custom_fields_save as shown in the snippet below:

function product_custom_fields_save($post_id) {
update_post_meta($post_id, '_custom_effective_price', $_POST['_custom_effective_price']);
}

add_action('woocommerce_process_product_meta', 'product_custom_fields_save');

In order to standardize as well as optimize the way of storing & retrieving the data, WooCommerce 3.0 has adopted the CRUD (Create, Read, Update, Delete) method which allows you to set and get the product data with utmost ease.

Keeping this in mind, we have utilized the $post_id to create a WooCommerce $product object and then applied the update_post_data method to save the data.

However, developers generally tend to use get_post_meta and update_post_meta methods to store the data, as they are more familiar with this kind of approach.

Read also: Redesigning WordPress Website: An In-Depth Guide

4. Displaying The Custom Fields On WooCommerce Store

The last step is to display the custom fields on the WooCommerce store. To show custom field in on your WooCommerce website there are various actions that you need to utilize. For example, you can utilize the woocommerce_after_shop_loop_item filter as shown in the snippet below:

function fun_add_user_side() {
global $post;
echo "Custom added Effective Price : ".get_post_meta($post->ID, '_custom_effective_price', true);
}

add_action('woocommerce_after_shop_loop_item', 'fun_add_user_side', 1);

Once you execute this code, it will display the custom fields on your WooCommerce store

In our case, we have displayed the effective pricing of an-book bu utilizing the custom settings tab. By following this step-by-step guide, you can also create a custom settings panel which will help you to customize the WooCommerce store as per your business requirements.

Summing Up Things….

Nowadays when every e-commerce business is different from the other one, it is but natural each business will have its own requirements. As a developer, your biggest challenge is to satisfy such client requirement which is not an easy task at all.

However, WooCommerce is one such platform which allows you to customize the online storefront according to your needs. Here, we have tried to provide you with a step-by-step guide on how to create a custom panel in WooCommerce.

We hope that this solution will add a lot of value to your development routine. If you want to add anything on this subject, then feel free to mention it in our comment section. Thank You!

Wanna develop a customized E-Commerce website for your business on the WooCommerce platform? Then, feel free to avail the WooCommerce Development Services Of eSparkBiz where you will not only get a high-quality solution but also 24*7 online support & maintenance services.

Disclaimer: We at eSparkBiz Technologies have created this blog with all the consideration and utmost care. We always strive for excellence in each of our blog posts and for that purpose, we ensure that all the information written in the blog is complete, correct, comprehensible, accurate and up-to-date. However, we can’t always guarantee that the information written in the blog correct, accurate or up-to-date. Therefore, we always advise our valuable readers not to take any kind of decisions based on the information as well as the views shared by our authors. The readers should always conduct an in-depth research before making the final decision. In addition to these, all the logos, 3rd part trademarks and screenshots of websites & mobile apps are the property of the individual owners. We’re not associated with any of them.

Mohit Surati

Mohit Surati

A post-graduate in Computer Engineering. Passionate about innovative writing & Content Marketing. A rich vein of experience in writing articles related to WordPress right from plugins, themes, customization, security, WooCommerce & Gutenberg. Pens down his thoughts for eSparkBiz @Custom WordPress Development Company where you can Hire WordPress Developer as per your requirements.

Search

Follow us

Subscribe Newsletter

Call us Today

telephone

Got any Questions?
call us Today!

+1 408 850 1488 [email protected]

Related Post

4 Easy Hacks to Double Up Your E-commerce Sales without spending a penny

4 Easy Hacks to Double Up Your E-commerce Sales without spending a penny

The E-commerce market has been witnessing an unrelenting flight path. One of the best options for businesses is elongating your market by thrusting out the…

Wanna Increase Sales? Top 11 Designing Tips Will Increase Your Sales For eCommerce Mobile Application

Wanna Increase Sales? Top 11 Designing Tips Will Increase Your Sales For eCommerce Mobile Application

To disentangle life, there was an introduction of smartphones in the market which became a platform for the competitors in the form of mobile apps.…

Step-By-Step Guide To Create A Custom Shipping Method For WooCommerce

Step-By-Step Guide To Create A Custom Shipping Method For WooCommerce

Table Of Contents Introduction Shipping Rules For The Shipping Methods Introduction To WooCommerce Shipping API Creating A New Shipping Class Setting Country Availability Creating Settings…