06-30-2022, 05:29 PM
How to Add Custom Field to Product in WooCommerce
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/06/how-to-add-custom-field-to-product-in-woocommerce.jpg" width="550" height="200" title="" alt="" /></div><div><div class="modified-on" readability="7.0697674418605"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on June 29th, 2022.</div>
<p>WooCommerce is the best among the top eCommerce software which is free. It is based on WordPress platform. Setting up a shopping cart is quite easy with WooCommerce.</p>
<p>In previous articles, we have seen some WooCommerce-based code for the following utilities.</p>
<p>The WooCommerce product showcase displays the information that meets the customer demand. Sometimes preliminary details cannot convey all and let the customer identify their destiny.</p>
<p>This is something that needs adding additional information using custom-field integration. WooCommerce plugins support adding custom fields to products via the admin interface.</p>
<p>We will see those options below and their usage methodologies of them.</p>
<h2>Why a WooCommerce shop admin needs Custom Fields</h2>
<p>Before adding custom fields to a product, learn why a WooCommerce shop needs this.</p>
<p>Because, some of the shops have a <a href="https://phppot.com/php/top-10-factors-in-ecommerce-shopping-cart-software-gallery-design/">routine product gallery</a> with usual data like title, image and price. In that case, the custom fields are not required.</p>
<p>The below list shows the advantages of this custom fields feature on a <a href="https://woocommerce.com/" target="_blank" rel="noopener">WooCommerce</a> shop.</p>
<ul>
<li>To add product metadata that is for displaying additional information about products.</li>
<li>To allow customers to provide more specifications on the products to purchase.</li>
<li>To add user-friendly interactive fields to save their effort on giving customizations.</li>
<li>To add promotions, offers, discounts and all.</li>
<li>To support end-user to specify a delivery date, time and place.</li>
<li>To apply tax, and shipping by toggling the custom switch.</li>
</ul>
<h2>Types of custom fields creation supported by WooCommerce plugins</h2>
<p>The available <a href="https://wordpress.org/download/" target="_blank" rel="noopener">WooCommerce plugins</a> can add two types of custom fields for products.</p>
<ol>
<li>Data fields – The field accepts information to be displayed on the UI.</li>
<li>Add-on fields – Fields that collect data from the user on the storefront.</li>
</ol>
<h3>1. Data fields – The field accepts information to be displayed on the UI</h3>
<p>This custom field is for showing more information apart from the regular title, price and all. This will help to show product metadata about features, version, rating and all.</p>
<p>For example, a monitor, to show extra information like,</p>
<table class="tutorial-table">
<tbody>
<tr>
<td>Brand</td>
<td>Dell</td>
</tr>
<tr>
<td>Model</td>
<td>Dell 20H</td>
</tr>
<tr>
<td>Screen Size</td>
<td>23</td>
</tr>
<tr>
<td>Features</td>
<td>HDMI, Anti-glare</td>
</tr>
</tbody>
</table>
<h3>2. Add-on fields – Fields that collect data from the user on the storefront</h3>
<p>This type of custom field is about creating options for the customer to interact with. It is to allow adding more specifications or customization on the pursued product.</p>
<p>It is for adding personalized information by the customers on the product purchase. Example,</p>
<ul>
<li>A multi-option field to select the size or color of a T-shirt.</li>
<li>A text field to collect a brand name to be engraved on a purchased pen.</li>
</ul>
<h2>Methods of adding custom fields display in WooCommerce</h2>
<ol>
<li>Using WooCommerce plugins.</li>
<li>Adding code to display custom fields for products.</li>
</ol>
<h2>Method 1: Using the plugin</h2>
<p>We have taken three plugins to support adding custom fields to a product in a WooCommerce shop. Those are having advanced features and are also easy to set up.</p>
<ol>
<li>Advanced Product Fields for WooCommerce</li>
<li>Product Addons for WooCommerce</li>
<li>Advanced Custom Fields</li>
</ol>
<h3>1. Advanced Product Fields for WooCommerce</h3>
<p>This plugin is used for adding additional fields to the WooCommerce product page. It helps to embed product add-on fields to allow customers to personalize the order.</p>
<p>Look into the plugin details and prerequisites below.</p>
<table class="tutorial-table">
<tbody>
<tr>
<td>Version</td>
<td>4.5 or higher</td>
</tr>
<tr>
<td>Active installations</td>
<td>20,000+</td>
</tr>
<tr>
<td>PHP version</td>
<td>5.6 or higher</td>
</tr>
<tr>
<td>Last updated</td>
<td>2 weeks ago</td>
</tr>
</tbody>
</table>
<p><strong>Features</strong></p>
<ul>
<li>The custom product field selected on the product page can be carried over to the cart and checkout pages. It is persistent on the entire flow until the order receipt.</li>
<li>Smooth product field builder in the backend with a seamless experience.</li>
<li>It has the option to add multiple prices to manipulate the base price of the products on selection.</li>
<li>It supports all possible interactive fields with the <a href="https://phppot.com/jquery/jquery-show-hide/">show hide option</a>.</li>
<li>It allows products and custom-field mapping interfaces to control the visibility.</li>
<li>WooCommerce tax figure customization is possible.</li>
<li>Multi-lingual in <a href="https://phppot.com/wordpress/how-to-translate-wordpress-translation-ready-themes/">translation-ready themes</a>.</li>
</ul>
<p><strong>Steps to use</strong></p>
<p><a href="https://wordpress.org/plugins/advanced-product-fields-for-woocommerce/" target="_blank" rel="noopener">Download this plugin</a> from the official WordPress repository. Then install and activate it for the WooCommerce shop. If you are new to WordPress, then see here <a href="https://phppot.com/wordpress/how-to-install-a-wordpress-plugin-for-beginners/">how to set up a plugin</a>.</p>
<ol>
<li>Go to Product -> Add New via the WooCommerce admin menu.</li>
<li>Click “Custom fields” under the “Product data” panel.</li>
<li>Configure “Field group layout” settings. It is to specify the position of the label or a field note if any. Also, it helps to mark a field as mandatory.</li>
<li>Select “Add the first field” or “Add field” and specify field type, label, and all.</li>
<li>Add conditional rules to add dependencies between fields to be displayed.</li>
</ol>
<p>This is the WooCommerce admin interface to add the custom fields for products. I have added the <em>Size</em> option for the product as a ratio group.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17696" src="https://phppot.com/wp-content/uploads/2022/06/advanced-product-field-setting-550x200.jpg" alt="advanced product field setting" width="550" height="200" srcset="https://phppot.com/wp-content/uploads/2022/06/advanced-product-field-setting-550x200.jpg 550w, https://phppot.com/wp-content/uploads/20...00x109.jpg 300w, https://phppot.com/wp-content/uploads/20...68x279.jpg 768w, https://phppot.com/wp-content/uploads/20...etting.jpg 800w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p>This will show the added custom field on the product front end as a radio option.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17700" src="https://phppot.com/wp-content/uploads/2022/06/advanced-product-field-output-550x349.jpg" alt="advanced product field output" width="550" height="349" srcset="https://phppot.com/wp-content/uploads/2022/06/advanced-product-field-output-550x349.jpg 550w, https://phppot.com/wp-content/uploads/20...00x191.jpg 300w, https://phppot.com/wp-content/uploads/20...output.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h3>2. Product Addons for WooCommerce</h3>
<p>This plugin says the purpose clearly by its name itself. Yes, it is to add more add-on fields to let the customer interact with the shop to personalize the purchase.</p>
<p>An easy custom form builder allows for building a field group for the WooCommerce shop pages. Have a look at the version and other details below.</p>
<table class="tutorial-table">
<tbody>
<tr>
<td>WordPress Version</td>
<td>4.0 or higher</td>
</tr>
<tr>
<td>Active installations</td>
<td>30,000+</td>
</tr>
<tr>
<td>PHP version</td>
<td>5.6 or higher</td>
</tr>
<tr>
<td>Last updated at</td>
<td>3 weeks ago</td>
</tr>
</tbody>
</table>
<p><a href="https://wordpress.org/plugins/woo-custom-product-addons/" target="_blank" rel="noopener">Download this plugin</a> from the WordPress repository linked. The plugin provides a <a href="https://phppot.com/jquery/jquery-drag-and-drop/">drag-and-drop interface</a> to build custom field groups for products.</p>
<p><strong>Features</strong></p>
<ul>
<li>Capable of personalizing the purchase order.</li>
<li>It saves the customer’s personalized data via a custom field added for products in the backend.</li>
<li>For builder helps to design a group of the custom fields.</li>
<li>Allows more types of fields like text, number and email fields, combo fields and all.</li>
<li>In the base version, it allows adding <p> and <h*> tags to display product meta in the front end.</li>
</ul>
<p><strong>Steps to use</strong></p>
<p>There are a few steps to add and display a custom field on a product page of a WooCommerce theme.</p>
<ol>
<li>Go to <em>Products->Custom Product Addons</em> via the WordPress admin menu.</li>
<li>Add a new form of product custom fields group and publish it.</li>
<li>Go to <em>Products</em> and open a new or edit product panel.</li>
<li>Choose <em>“Custom Product Options”</em> from the <em>Product data</em> group.</li>
<li>Check the form to add a mapping between custom fields and products.</li>
</ol>
<p>See the following two screenshots to add custom fields and map them for the product.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17737" src="https://phppot.com/wp-content/uploads/2022/06/product-addons-settings-550x582.jpg" alt="product addons settings" width="550" height="582" srcset="https://phppot.com/wp-content/uploads/2022/06/product-addons-settings-550x582.jpg 550w, https://phppot.com/wp-content/uploads/20...83x300.jpg 283w, https://phppot.com/wp-content/uploads/20...ttings.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p><img loading="lazy" class="alignnone size-large wp-image-17738" src="https://phppot.com/wp-content/uploads/2022/06/product-addons-mapping-550x365.jpg" alt="product addons mapping" width="550" height="365" srcset="https://phppot.com/wp-content/uploads/2022/06/product-addons-mapping-550x365.jpg 550w, https://phppot.com/wp-content/uploads/20...00x199.jpg 300w, https://phppot.com/wp-content/uploads/20...apping.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p>Then, the WooCommerce shop will show the custom fields on the single product page.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17739" src="https://phppot.com/wp-content/uploads/2022/06/product-addons-output-550x566.jpg" alt="product addons output" width="550" height="566" srcset="https://phppot.com/wp-content/uploads/2022/06/product-addons-output-550x566.jpg 550w, https://phppot.com/wp-content/uploads/20...92x300.jpg 292w, https://phppot.com/wp-content/uploads/20...output.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h3>3. Advanced Custom Fields</h3>
<p>It supports full control of the WordPress edit screen and custom form data.</p>
<table class="tutorial-table">
<tbody>
<tr>
<td>WordPress Version</td>
<td>4.7 or higher</td>
</tr>
<tr>
<td>Active Installations</td>
<td>2+ million</td>
</tr>
<tr>
<td>PHP Version</td>
<td>5.6 or higher</td>
</tr>
<tr>
<td>Last updated</td>
<td>6 days ago</td>
</tr>
</tbody>
</table>
<p>The simple and intuitive plugin has powerful functions and over 30 field types</p>
<p><strong>Features</strong></p>
<ul>
<li>It provides powerful functions to customize and add custom fields for the product</li>
<li>Good and simple backend interface to add custom field group on a need basis.</li>
<li>Supports 30+ field types to set more data apart from the standard custom product fields.</li>
</ul>
<p><strong>Steps to customize</strong></p>
<p><a href="https://wordpress.org/plugins/advanced-custom-fields/" target="_blank" rel="noopener">Download</a> or install via admin to enable this plugin before going to read the below steps.</p>
<ol>
<li>Add and customize the field group.</li>
<li>Add form fields into the group.</li>
<li>Add data for the custom fields on the product page.</li>
<li>Display the product information on the front end.</li>
</ol>
<p><strong>Step 1: Add and customize field group</strong></p>
<p>Go to <em>Custom Fields</em> via the admin menu. Add a new field group and specify the UI location and other settings.</p>
<p>It helps to set states and styles to add and show the custom fields on a product page. It manages the relative position and alignment of the field on the UI.</p>
<p>Fields can also be mapped for posts, products, pages and more.</p>
<p><strong>Step 2: Add form fields into the group</strong></p>
<p>The field add interface allows the following data to enter. For combo fields, it asks to enter multiple options to the loaded.</p>
<ul>
<li>label, name, type.</li>
<li>Field notes or helps text.</li>
<li>If the field is required or not.</li>
<li>Place holder and default value.</li>
<li>Content to prepend or append.</li>
<li>Character restriction, Rules.</li>
<li>Field wrapper classes or ids.</li>
</ul>
<p><strong>Step 3: Add data for the custom fields based on products</strong></p>
<p>If the custom field group is mapped for the location of product pages, then the add/edit page will show it.</p>
<p>Add the data for the custom fields which will be displayed on the WooCommerce product at the shop.</p>
<p>##image</p>
<p><strong>Step 4: Display the product information on the front-end</strong></p>
<p>Then display the custom fields data on the product single page at the front-end.</p>
<p>In this plugin, we need to add a simple shortcode to display the custom fields on the product page.</p>
<p>The [acf field=”<field-id or slug>”] <a href="https://phppot.com/wordpress/how-to-create-shortcode-in-wordpress/">shortcode</a> is used for displaying the custom field group.</p>
<p>There are a couple of functions in WordPress to display the fields for a WooCommerce product.</p>
<pre class="prettyprint"><code class="language-php"><php
the_field("<field-id or slug>");
?>
</code></pre>
<p>or</p>
<pre class="prettyprint"><code class="language-php"><php
$customFieldGroup = get_field("<field-id or slug>");
echo $customFieldGroup;
?>
</code></pre>
<h2>Method 2: Adding custom fields via the program</h2>
<p>Thus, we have seen how to add product custom fields in a WooCommerce platform using plugins. If you want to implement the same without using plugins, it’s very simple with a few steps.</p>
<p>These steps render the custom fields on the WooCommerce product page. After collecting the user inputs in the product page, the custom code will display them on the cart page.</p>
<p>Steps to implement this method by adding custom code are listed below.</p>
<ol>
<li>Add a custom field in the product data panel on the WooCommerce admin.</li>
<li>Save added custom field data into cart metadata.</li>
<li>Display an input field in a product single page.</li>
<li>Passing the values on the cart and checkout pages.</li>
</ol>
<p>Add this custom code in the WordPress active theme’s function.php file.</p>
<h3>1. Adding custom fields in the product data panel</h3>
<p>Create code for displaying custom fields in the WooCommerce product data panel. The woocommerce_product_options_general_product_data hook is used to call this code.</p>
<pre class="prettyprint"><code class="language-php">/* Add product meta field for the WooCommerce admin */
function woocommerce_custom_select_dropdown(){ $select = woocommerce_wp_select(array( 'id' => '_select_color', 'label' =>__('Select color', 'woocommerce'), 'options' => array( 'Black' => __('Black','woocommerce'), 'Blue' => __('Blue','wooocommerce'), 'Pink'=> __('Pink','woocommerce') ), ));
}
add_action('woocommerce_product_options_general_product_data', 'woocommerce_custom_select_dropdown');
</code></pre>
<p>This example adds a dropdown as a custom field for products. So, it uses the woocommerce_wp_select function to set the following parameters.</p>
<ul>
<li>id</li>
<li>label</li>
<li>description</li>
<li>desc_tip</li>
<li>options</li>
</ul>
<p>There are similar functions to add other types of form fields. For example,</p>
<ul>
<li>woocommerce_wp_textarea_input</li>
<li>woocommerce_wp_checkbox</li>
<li>woocommerce_wp_hidden_input</li>
</ul>
<h3>2. Save the user input in the custom fields to cart metadata.</h3>
<p>Then, another action hook is added to save the custom field value on the product meta. This will be called on saving the product details. It calls the woocommerce_process_product_meta action and hooks the handler.</p>
<pre class="prettyprint"><code class="language-php">/* Save custom field data for the product */
function woocommerce_product_custom_fields_save($post_id)
{ $woocommerce_select_color_field = $_POST['_select_color']; if (!empty($woocommerce_select_color_field)) { update_post_meta($post_id, '_select_color', esc_attr($woocommerce_select_color_field)); }
}
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');
</code></pre>
<h3>3. Display an input field in a product single page</h3>
<p>In this section, it prepares an add-on field HTML if the product meta is not empty.</p>
<p>First, the admin chooses and saves the product color option. Then this code will add a dropdown field on the product single page.</p>
<p>It reads the current product meta with the reference of the global post object. Then, it fetches the product meta by the custom field id.</p>
<p>In the WooCommerce product page, this custom field is added before the cart button. It is because of hooking the action woocommerce_before_add_to_cart_button to call this handler.</p>
<pre class="prettyprint"><code class="language-php">/* Show add-on field based on the saved custom field */
function woocommerce_display_select_option_value()
{ global $post; $product = wc_get_product($post->ID); $select_option_title_field = $product->get_meta('_select_color'); if ($select_option_title_field) { printf('
<div><select name="color_option" class="input-text text">
<option value="Default Color">Default Color</option>
<option value="' . $select_option_title_field . '">' . $select_option_title_field . '</option> </select></div>', esc_html($select_option_title_field)); }
}
add_action('woocommerce_before_add_to_cart_button', 'woocommerce_display_select_option_value');
</code></pre>
<h3>4. Display the selected option in the cart and checkout pages</h3>
<p>The following filter hooks handle the functions to display the selected custom option. It has the cart and checkout pages as its target to render the UI component.</p>
<p>This code is triggered on loading the cart item data. It calls the filter hook woocommerce_add_cart_item_data and displays the selected custom field value.</p>
<p>It adds the data into the cart item array which will be later used in the checkout page UI.</p>
<pre class="prettyprint"><code class="language-php">/* Display selected option in the cart */
function woocommerce_add_custom_field_item_data($cart_item_data, $product_id)
{ if (! empty($_POST['color_option'])) { $cart_item_data['select_field'] = $_POST['color_option']; } return $cart_item_data;
}
add_filter('woocommerce_add_cart_item_data', 'woocommerce_add_custom_field_item_data', 10, 2);
</code></pre>
<p>This is to parse the cart item array and display the custom field value on the checkout page.</p>
<p>It uses the woocommerce_cart_item_name hook to do this change in the checkout UI.</p>
<pre class="prettyprint"><code class="language-php">/* Display selected option in the checkout */
function woocommerce_cart_display($name, $cart_item, $cart_item_key)
{ if (isset($cart_item['select_field'])) { $name .= sprintf('<p>%s</p>', esc_html($cart_item['select_field'])); } return $name;
}
add_filter('woocommerce_cart_item_name', 'woocommerce_cart_display', 10, 3);
</code></pre>
<h2>Conclusion</h2>
<p>Thus, we have seen both methods to add custom fields to products. It is with or without plugins to enable WooCommerce product custom fields.</p>
<p>I hope, this article gives a basic knowledge in this area. Also, it might help you to understand and replicate the steps to customize your shop.</p>
<p> <!-- #comments --> </p>
<p> <a href="https://phppot.com/wordpress/woocommerce-add-custom-field-product/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/06/...ocommerce/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/06/how-to-add-custom-field-to-product-in-woocommerce.jpg" width="550" height="200" title="" alt="" /></div><div><div class="modified-on" readability="7.0697674418605"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on June 29th, 2022.</div>
<p>WooCommerce is the best among the top eCommerce software which is free. It is based on WordPress platform. Setting up a shopping cart is quite easy with WooCommerce.</p>
<p>In previous articles, we have seen some WooCommerce-based code for the following utilities.</p>
<p>The WooCommerce product showcase displays the information that meets the customer demand. Sometimes preliminary details cannot convey all and let the customer identify their destiny.</p>
<p>This is something that needs adding additional information using custom-field integration. WooCommerce plugins support adding custom fields to products via the admin interface.</p>
<p>We will see those options below and their usage methodologies of them.</p>
<h2>Why a WooCommerce shop admin needs Custom Fields</h2>
<p>Before adding custom fields to a product, learn why a WooCommerce shop needs this.</p>
<p>Because, some of the shops have a <a href="https://phppot.com/php/top-10-factors-in-ecommerce-shopping-cart-software-gallery-design/">routine product gallery</a> with usual data like title, image and price. In that case, the custom fields are not required.</p>
<p>The below list shows the advantages of this custom fields feature on a <a href="https://woocommerce.com/" target="_blank" rel="noopener">WooCommerce</a> shop.</p>
<ul>
<li>To add product metadata that is for displaying additional information about products.</li>
<li>To allow customers to provide more specifications on the products to purchase.</li>
<li>To add user-friendly interactive fields to save their effort on giving customizations.</li>
<li>To add promotions, offers, discounts and all.</li>
<li>To support end-user to specify a delivery date, time and place.</li>
<li>To apply tax, and shipping by toggling the custom switch.</li>
</ul>
<h2>Types of custom fields creation supported by WooCommerce plugins</h2>
<p>The available <a href="https://wordpress.org/download/" target="_blank" rel="noopener">WooCommerce plugins</a> can add two types of custom fields for products.</p>
<ol>
<li>Data fields – The field accepts information to be displayed on the UI.</li>
<li>Add-on fields – Fields that collect data from the user on the storefront.</li>
</ol>
<h3>1. Data fields – The field accepts information to be displayed on the UI</h3>
<p>This custom field is for showing more information apart from the regular title, price and all. This will help to show product metadata about features, version, rating and all.</p>
<p>For example, a monitor, to show extra information like,</p>
<table class="tutorial-table">
<tbody>
<tr>
<td>Brand</td>
<td>Dell</td>
</tr>
<tr>
<td>Model</td>
<td>Dell 20H</td>
</tr>
<tr>
<td>Screen Size</td>
<td>23</td>
</tr>
<tr>
<td>Features</td>
<td>HDMI, Anti-glare</td>
</tr>
</tbody>
</table>
<h3>2. Add-on fields – Fields that collect data from the user on the storefront</h3>
<p>This type of custom field is about creating options for the customer to interact with. It is to allow adding more specifications or customization on the pursued product.</p>
<p>It is for adding personalized information by the customers on the product purchase. Example,</p>
<ul>
<li>A multi-option field to select the size or color of a T-shirt.</li>
<li>A text field to collect a brand name to be engraved on a purchased pen.</li>
</ul>
<h2>Methods of adding custom fields display in WooCommerce</h2>
<ol>
<li>Using WooCommerce plugins.</li>
<li>Adding code to display custom fields for products.</li>
</ol>
<h2>Method 1: Using the plugin</h2>
<p>We have taken three plugins to support adding custom fields to a product in a WooCommerce shop. Those are having advanced features and are also easy to set up.</p>
<ol>
<li>Advanced Product Fields for WooCommerce</li>
<li>Product Addons for WooCommerce</li>
<li>Advanced Custom Fields</li>
</ol>
<h3>1. Advanced Product Fields for WooCommerce</h3>
<p>This plugin is used for adding additional fields to the WooCommerce product page. It helps to embed product add-on fields to allow customers to personalize the order.</p>
<p>Look into the plugin details and prerequisites below.</p>
<table class="tutorial-table">
<tbody>
<tr>
<td>Version</td>
<td>4.5 or higher</td>
</tr>
<tr>
<td>Active installations</td>
<td>20,000+</td>
</tr>
<tr>
<td>PHP version</td>
<td>5.6 or higher</td>
</tr>
<tr>
<td>Last updated</td>
<td>2 weeks ago</td>
</tr>
</tbody>
</table>
<p><strong>Features</strong></p>
<ul>
<li>The custom product field selected on the product page can be carried over to the cart and checkout pages. It is persistent on the entire flow until the order receipt.</li>
<li>Smooth product field builder in the backend with a seamless experience.</li>
<li>It has the option to add multiple prices to manipulate the base price of the products on selection.</li>
<li>It supports all possible interactive fields with the <a href="https://phppot.com/jquery/jquery-show-hide/">show hide option</a>.</li>
<li>It allows products and custom-field mapping interfaces to control the visibility.</li>
<li>WooCommerce tax figure customization is possible.</li>
<li>Multi-lingual in <a href="https://phppot.com/wordpress/how-to-translate-wordpress-translation-ready-themes/">translation-ready themes</a>.</li>
</ul>
<p><strong>Steps to use</strong></p>
<p><a href="https://wordpress.org/plugins/advanced-product-fields-for-woocommerce/" target="_blank" rel="noopener">Download this plugin</a> from the official WordPress repository. Then install and activate it for the WooCommerce shop. If you are new to WordPress, then see here <a href="https://phppot.com/wordpress/how-to-install-a-wordpress-plugin-for-beginners/">how to set up a plugin</a>.</p>
<ol>
<li>Go to Product -> Add New via the WooCommerce admin menu.</li>
<li>Click “Custom fields” under the “Product data” panel.</li>
<li>Configure “Field group layout” settings. It is to specify the position of the label or a field note if any. Also, it helps to mark a field as mandatory.</li>
<li>Select “Add the first field” or “Add field” and specify field type, label, and all.</li>
<li>Add conditional rules to add dependencies between fields to be displayed.</li>
</ol>
<p>This is the WooCommerce admin interface to add the custom fields for products. I have added the <em>Size</em> option for the product as a ratio group.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17696" src="https://phppot.com/wp-content/uploads/2022/06/advanced-product-field-setting-550x200.jpg" alt="advanced product field setting" width="550" height="200" srcset="https://phppot.com/wp-content/uploads/2022/06/advanced-product-field-setting-550x200.jpg 550w, https://phppot.com/wp-content/uploads/20...00x109.jpg 300w, https://phppot.com/wp-content/uploads/20...68x279.jpg 768w, https://phppot.com/wp-content/uploads/20...etting.jpg 800w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p>This will show the added custom field on the product front end as a radio option.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17700" src="https://phppot.com/wp-content/uploads/2022/06/advanced-product-field-output-550x349.jpg" alt="advanced product field output" width="550" height="349" srcset="https://phppot.com/wp-content/uploads/2022/06/advanced-product-field-output-550x349.jpg 550w, https://phppot.com/wp-content/uploads/20...00x191.jpg 300w, https://phppot.com/wp-content/uploads/20...output.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h3>2. Product Addons for WooCommerce</h3>
<p>This plugin says the purpose clearly by its name itself. Yes, it is to add more add-on fields to let the customer interact with the shop to personalize the purchase.</p>
<p>An easy custom form builder allows for building a field group for the WooCommerce shop pages. Have a look at the version and other details below.</p>
<table class="tutorial-table">
<tbody>
<tr>
<td>WordPress Version</td>
<td>4.0 or higher</td>
</tr>
<tr>
<td>Active installations</td>
<td>30,000+</td>
</tr>
<tr>
<td>PHP version</td>
<td>5.6 or higher</td>
</tr>
<tr>
<td>Last updated at</td>
<td>3 weeks ago</td>
</tr>
</tbody>
</table>
<p><a href="https://wordpress.org/plugins/woo-custom-product-addons/" target="_blank" rel="noopener">Download this plugin</a> from the WordPress repository linked. The plugin provides a <a href="https://phppot.com/jquery/jquery-drag-and-drop/">drag-and-drop interface</a> to build custom field groups for products.</p>
<p><strong>Features</strong></p>
<ul>
<li>Capable of personalizing the purchase order.</li>
<li>It saves the customer’s personalized data via a custom field added for products in the backend.</li>
<li>For builder helps to design a group of the custom fields.</li>
<li>Allows more types of fields like text, number and email fields, combo fields and all.</li>
<li>In the base version, it allows adding <p> and <h*> tags to display product meta in the front end.</li>
</ul>
<p><strong>Steps to use</strong></p>
<p>There are a few steps to add and display a custom field on a product page of a WooCommerce theme.</p>
<ol>
<li>Go to <em>Products->Custom Product Addons</em> via the WordPress admin menu.</li>
<li>Add a new form of product custom fields group and publish it.</li>
<li>Go to <em>Products</em> and open a new or edit product panel.</li>
<li>Choose <em>“Custom Product Options”</em> from the <em>Product data</em> group.</li>
<li>Check the form to add a mapping between custom fields and products.</li>
</ol>
<p>See the following two screenshots to add custom fields and map them for the product.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17737" src="https://phppot.com/wp-content/uploads/2022/06/product-addons-settings-550x582.jpg" alt="product addons settings" width="550" height="582" srcset="https://phppot.com/wp-content/uploads/2022/06/product-addons-settings-550x582.jpg 550w, https://phppot.com/wp-content/uploads/20...83x300.jpg 283w, https://phppot.com/wp-content/uploads/20...ttings.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p><img loading="lazy" class="alignnone size-large wp-image-17738" src="https://phppot.com/wp-content/uploads/2022/06/product-addons-mapping-550x365.jpg" alt="product addons mapping" width="550" height="365" srcset="https://phppot.com/wp-content/uploads/2022/06/product-addons-mapping-550x365.jpg 550w, https://phppot.com/wp-content/uploads/20...00x199.jpg 300w, https://phppot.com/wp-content/uploads/20...apping.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p>Then, the WooCommerce shop will show the custom fields on the single product page.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-17739" src="https://phppot.com/wp-content/uploads/2022/06/product-addons-output-550x566.jpg" alt="product addons output" width="550" height="566" srcset="https://phppot.com/wp-content/uploads/2022/06/product-addons-output-550x566.jpg 550w, https://phppot.com/wp-content/uploads/20...92x300.jpg 292w, https://phppot.com/wp-content/uploads/20...output.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h3>3. Advanced Custom Fields</h3>
<p>It supports full control of the WordPress edit screen and custom form data.</p>
<table class="tutorial-table">
<tbody>
<tr>
<td>WordPress Version</td>
<td>4.7 or higher</td>
</tr>
<tr>
<td>Active Installations</td>
<td>2+ million</td>
</tr>
<tr>
<td>PHP Version</td>
<td>5.6 or higher</td>
</tr>
<tr>
<td>Last updated</td>
<td>6 days ago</td>
</tr>
</tbody>
</table>
<p>The simple and intuitive plugin has powerful functions and over 30 field types</p>
<p><strong>Features</strong></p>
<ul>
<li>It provides powerful functions to customize and add custom fields for the product</li>
<li>Good and simple backend interface to add custom field group on a need basis.</li>
<li>Supports 30+ field types to set more data apart from the standard custom product fields.</li>
</ul>
<p><strong>Steps to customize</strong></p>
<p><a href="https://wordpress.org/plugins/advanced-custom-fields/" target="_blank" rel="noopener">Download</a> or install via admin to enable this plugin before going to read the below steps.</p>
<ol>
<li>Add and customize the field group.</li>
<li>Add form fields into the group.</li>
<li>Add data for the custom fields on the product page.</li>
<li>Display the product information on the front end.</li>
</ol>
<p><strong>Step 1: Add and customize field group</strong></p>
<p>Go to <em>Custom Fields</em> via the admin menu. Add a new field group and specify the UI location and other settings.</p>
<p>It helps to set states and styles to add and show the custom fields on a product page. It manages the relative position and alignment of the field on the UI.</p>
<p>Fields can also be mapped for posts, products, pages and more.</p>
<p><strong>Step 2: Add form fields into the group</strong></p>
<p>The field add interface allows the following data to enter. For combo fields, it asks to enter multiple options to the loaded.</p>
<ul>
<li>label, name, type.</li>
<li>Field notes or helps text.</li>
<li>If the field is required or not.</li>
<li>Place holder and default value.</li>
<li>Content to prepend or append.</li>
<li>Character restriction, Rules.</li>
<li>Field wrapper classes or ids.</li>
</ul>
<p><strong>Step 3: Add data for the custom fields based on products</strong></p>
<p>If the custom field group is mapped for the location of product pages, then the add/edit page will show it.</p>
<p>Add the data for the custom fields which will be displayed on the WooCommerce product at the shop.</p>
<p>##image</p>
<p><strong>Step 4: Display the product information on the front-end</strong></p>
<p>Then display the custom fields data on the product single page at the front-end.</p>
<p>In this plugin, we need to add a simple shortcode to display the custom fields on the product page.</p>
<p>The [acf field=”<field-id or slug>”] <a href="https://phppot.com/wordpress/how-to-create-shortcode-in-wordpress/">shortcode</a> is used for displaying the custom field group.</p>
<p>There are a couple of functions in WordPress to display the fields for a WooCommerce product.</p>
<pre class="prettyprint"><code class="language-php"><php
the_field("<field-id or slug>");
?>
</code></pre>
<p>or</p>
<pre class="prettyprint"><code class="language-php"><php
$customFieldGroup = get_field("<field-id or slug>");
echo $customFieldGroup;
?>
</code></pre>
<h2>Method 2: Adding custom fields via the program</h2>
<p>Thus, we have seen how to add product custom fields in a WooCommerce platform using plugins. If you want to implement the same without using plugins, it’s very simple with a few steps.</p>
<p>These steps render the custom fields on the WooCommerce product page. After collecting the user inputs in the product page, the custom code will display them on the cart page.</p>
<p>Steps to implement this method by adding custom code are listed below.</p>
<ol>
<li>Add a custom field in the product data panel on the WooCommerce admin.</li>
<li>Save added custom field data into cart metadata.</li>
<li>Display an input field in a product single page.</li>
<li>Passing the values on the cart and checkout pages.</li>
</ol>
<p>Add this custom code in the WordPress active theme’s function.php file.</p>
<h3>1. Adding custom fields in the product data panel</h3>
<p>Create code for displaying custom fields in the WooCommerce product data panel. The woocommerce_product_options_general_product_data hook is used to call this code.</p>
<pre class="prettyprint"><code class="language-php">/* Add product meta field for the WooCommerce admin */
function woocommerce_custom_select_dropdown(){ $select = woocommerce_wp_select(array( 'id' => '_select_color', 'label' =>__('Select color', 'woocommerce'), 'options' => array( 'Black' => __('Black','woocommerce'), 'Blue' => __('Blue','wooocommerce'), 'Pink'=> __('Pink','woocommerce') ), ));
}
add_action('woocommerce_product_options_general_product_data', 'woocommerce_custom_select_dropdown');
</code></pre>
<p>This example adds a dropdown as a custom field for products. So, it uses the woocommerce_wp_select function to set the following parameters.</p>
<ul>
<li>id</li>
<li>label</li>
<li>description</li>
<li>desc_tip</li>
<li>options</li>
</ul>
<p>There are similar functions to add other types of form fields. For example,</p>
<ul>
<li>woocommerce_wp_textarea_input</li>
<li>woocommerce_wp_checkbox</li>
<li>woocommerce_wp_hidden_input</li>
</ul>
<h3>2. Save the user input in the custom fields to cart metadata.</h3>
<p>Then, another action hook is added to save the custom field value on the product meta. This will be called on saving the product details. It calls the woocommerce_process_product_meta action and hooks the handler.</p>
<pre class="prettyprint"><code class="language-php">/* Save custom field data for the product */
function woocommerce_product_custom_fields_save($post_id)
{ $woocommerce_select_color_field = $_POST['_select_color']; if (!empty($woocommerce_select_color_field)) { update_post_meta($post_id, '_select_color', esc_attr($woocommerce_select_color_field)); }
}
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');
</code></pre>
<h3>3. Display an input field in a product single page</h3>
<p>In this section, it prepares an add-on field HTML if the product meta is not empty.</p>
<p>First, the admin chooses and saves the product color option. Then this code will add a dropdown field on the product single page.</p>
<p>It reads the current product meta with the reference of the global post object. Then, it fetches the product meta by the custom field id.</p>
<p>In the WooCommerce product page, this custom field is added before the cart button. It is because of hooking the action woocommerce_before_add_to_cart_button to call this handler.</p>
<pre class="prettyprint"><code class="language-php">/* Show add-on field based on the saved custom field */
function woocommerce_display_select_option_value()
{ global $post; $product = wc_get_product($post->ID); $select_option_title_field = $product->get_meta('_select_color'); if ($select_option_title_field) { printf('
<div><select name="color_option" class="input-text text">
<option value="Default Color">Default Color</option>
<option value="' . $select_option_title_field . '">' . $select_option_title_field . '</option> </select></div>', esc_html($select_option_title_field)); }
}
add_action('woocommerce_before_add_to_cart_button', 'woocommerce_display_select_option_value');
</code></pre>
<h3>4. Display the selected option in the cart and checkout pages</h3>
<p>The following filter hooks handle the functions to display the selected custom option. It has the cart and checkout pages as its target to render the UI component.</p>
<p>This code is triggered on loading the cart item data. It calls the filter hook woocommerce_add_cart_item_data and displays the selected custom field value.</p>
<p>It adds the data into the cart item array which will be later used in the checkout page UI.</p>
<pre class="prettyprint"><code class="language-php">/* Display selected option in the cart */
function woocommerce_add_custom_field_item_data($cart_item_data, $product_id)
{ if (! empty($_POST['color_option'])) { $cart_item_data['select_field'] = $_POST['color_option']; } return $cart_item_data;
}
add_filter('woocommerce_add_cart_item_data', 'woocommerce_add_custom_field_item_data', 10, 2);
</code></pre>
<p>This is to parse the cart item array and display the custom field value on the checkout page.</p>
<p>It uses the woocommerce_cart_item_name hook to do this change in the checkout UI.</p>
<pre class="prettyprint"><code class="language-php">/* Display selected option in the checkout */
function woocommerce_cart_display($name, $cart_item, $cart_item_key)
{ if (isset($cart_item['select_field'])) { $name .= sprintf('<p>%s</p>', esc_html($cart_item['select_field'])); } return $name;
}
add_filter('woocommerce_cart_item_name', 'woocommerce_cart_display', 10, 3);
</code></pre>
<h2>Conclusion</h2>
<p>Thus, we have seen both methods to add custom fields to products. It is with or without plugins to enable WooCommerce product custom fields.</p>
<p>I hope, this article gives a basic knowledge in this area. Also, it might help you to understand and replicate the steps to customize your shop.</p>
<p> <!-- #comments --> </p>
<p> <a href="https://phppot.com/wordpress/woocommerce-add-custom-field-product/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/06/...ocommerce/