How to add custom field to product in WooCommerce - Phppot (2023)

vonVincy. Last modified on August 25, 2022.

WooCommerce is the best free ecommerce software. It is based on the WordPress platform. Setting up a shopping cart is easy with the WooCommerce platform.

In previous articles we have seen WooCommerce based code for the following utilities.

• Stripe Payment Gateway-Integrationinto a shopping cart.
• Contact form componentto send a product inquiry.

WooCommerce Product Showcase displays the information that matches customer demand. Sometimes preliminary details cannot convey everything and let the customer decide his fate.

This is something that needs to add additional information using custom field integration. WooCommerce plugins support adding custom fields to products from admin interface.

We will see these options below and their methods of use.

Why a WooCommerce store admin needs custom fields

Before adding custom fields to a product, learn why a WooCommerce store needs it.

Because some of the shops have oneroutine product gallerywith the usual data such as title, image and price. In this case, the custom fields are not required.

The list below shows the benefits of this custom field feature on aWooCommerceBusiness.

• To add product metadata used to display additional information about products.
• To allow customers to provide more specifications about the products to be purchased.
• To add user-friendly interactive fields to save yourself the hassle of customization.
• For adding promotions, offers, discounts and everything.
• Assist end user to specify delivery date, time and place.
• Apply taxes and shipping by toggling the custom toggle.

Types of custom field creation supported by WooCommerce plugins

The available onesWooCommerce-Pluginscan add two types of custom fields for products.

1. Data Fields - The field accepts information to be displayed on the user interface.
2. Add-on Fields - Fields that collect data from the user on the storefront.

1. Data Fields - The field accepts information to be displayed on the user interface

This custom field is for displaying more information besides the regular title, price and all. This helps show product metadata about features, version, rating and everything else.

For example a monitor to display additional information such as

2. Add-on Fields - Fields that collect data from the user on the storefront

This type of custom fields is all about creating options that the customer can interact with. It is intended to allow the addition of further specifications or customization to the targeted product.

It is for adding personalized information by customers when purchasing products. Example,

• A box with multiple options to choose the size or color of a t-shirt.
• A text box for collecting a brand name to be engraved on a purchased pen.

Methods to add custom fields are shown in WooCommerce

1. Using WooCommerce plugins.
2. Adding code to display custom fields for products.

Method 1: Using the plugin

We used three plugins to support adding custom fields to a product in a WooCommerce store. These come with advanced features and are also easy to set up.

1. Advanced product fields for WooCommerce
2. Product addons for WooCommerce
3. Advanced custom fields

1. Advanced product fields for WooCommerce

This plugin is used to add additional fields to WooCommerce product page. It helps to embed product additional fields so customers can personalize the order.

Check out the plugin details and requirements below.

characteristics

• The custom product field selected on the product page can be carried over to the cart and checkout pages. It is retained throughout the entire process until the order is received.
• Frictionless backend product field builder with a seamless experience.
• Possibility to add multiple prices to manipulate the base price of the products when choosing.
• It supports all kinds of interactive fields with theShow option to hide.
• It allows products and custom field mapping interfaces to control visibility.
• Customization of WooCommerce tax number is possible.
• Multilingual intranslatable topics.

steps to use

Download this pluginfrom the official WordPress repository. Then install and activate for the WooCommerce shop. If you are new to WordPress then see herehow to set up a plugin.

1. From the WooCommerce admin menu, go to Product -> Add New.
2. In the Product Data section, click Custom Fields.
3. Configure the Field Group Layout settings. The position of the label or a field note, if any, should be specified. It also helps to mark a field as mandatory.
4. Choose Add First Field or Add Field and specify field type, label and everything.
5. Add conditional rules to add dependencies between fields to display.

This is the WooCommerce admin interface to add the custom fields for products. I added thoseSizeOption for the product as a ratio group.

This will show the added custom field as a radio button in the product frontend.

2. Product Addons for WooCommerce

This plugin clearly says the purpose by its name itself. Yes, it's about adding more additional fields so that the customer can interact with the shop to personalize the purchase.

A simple custom form builder allows creating a field group for the WooCommerce store pages. Check out the version and other details below.

Download this pluginfrom the linked WordPress repository. The plugin provides aDrag and drop interfaceto create custom field groups for products.

characteristics

• Can personalize the order.
• It stores customer's personalized data via custom field added for products in backend.
• Because builder helps to design a group of custom fields.
• Allows more types of fields like text, number and email fields, combo boxes and all.
• In the basic version it allows adding <p> and <h*> tags to show product meta in frontend.

steps to use

There are a few steps to add and display a custom field on a WooCommerce theme product page.

1. Go toProdukte->Custom Product Addonsvia the WordPress admin menu.
2. Add a new form to a custom product array and publish it.
3. Go toProductsand open a new or edit the product field.
4. Choose"Custom Product Options"of theproduct dataGroup.
5. Review the form to add a mapping between custom fields and products.

See the following two screenshots to add custom fields and map them to the product.

Then the WooCommerce store will display the custom fields on the single product page.

3. Advanced Custom Fields

It supports full control over WordPress edit screen and custom form data.

The simple and intuitive plugin has powerful features and 30+ field types

characteristics

• It offers powerful features to customize and add custom fields for the product
• Good and simple backend interface to add custom field groups as needed.
• Supports 30+ field types to differentiate more data from the standard custom product fields.

Steps to customize

Downloador install it via admin to enable this plugin before reading below steps.

1. Add and customize the field group.
2. Add form fields to the group.
3. Add data for the custom fields on the product page.
4. Display the product information in the frontend.

Step 1: Add and customize field group

Go toCustom Fieldsvia the admin menu. Add a new field group and specify the UI location and other settings.

It helps to set statuses and styles to add and display the custom fields on a product page. It manages the relative position and alignment of the field on the UI.

Fields can also be mapped to posts, products, pages, and more.

Step 2: Add form fields to the group

The Add Interface field allows the following data to be entered. For combo boxes, you will be prompted to enter multiple options for the loaded ones.

• designation, name, type.
• Field notes or help text.
• Whether the field is required or not.
• Placeholder and default value.
• Content to be prepended or appended.
• Character limit, rules.
• Field wrapper classes or IDs.

Step 3 Add data for the custom fields based on products

If the custom fieldset is mapped to the Product Pages location, it will appear on the Add/Edit page.

Add the data for the custom fields that will be displayed on the WooCommerce product in the shop.

##Bild

Step 4: View the product information on the frontend

Then display the custom fields data on the product detail page on the frontend.

In this plugin we need to add a simple shortcode to display the custom fields on the product page.

The [acf field="<field ID or slug>"]speed dialused to display the custom field group.

There are a few features in WordPress to display the fields for a WooCommerce product.

<phpthe_field("<field ID or slug>");?>

or

<php$customFieldGroup = get_field("<Feld-ID oder Slug>");echo $customFieldGroup;?>

Method 2: Add custom fields programmatically

This is how we saw how to add custom product fields in a WooCommerce platform using plugins. If you want to implement the same without plugins, it's very easy with few steps.

These steps will render the custom fields on the WooCommerce product page. After collecting the user input on the product page, the custom code displays it on the cart page.

Steps to implement this method by adding custom code are given below.

1. Add a custom field in the Product Data section of the WooCommerce admin.
2. Save added custom field data to cart metadata.
3. Display an input field on a product single page.
4. Passing the values ​​on the cart and checkout pages.

Add this custom code in the function.php file of the active WordPress theme.

1. Adding custom fields in product data section

Create code to display custom fields in WooCommerce Product Data section. The woocommerce_product_options_general_product_data hook is used to call this code.

/* Produkt-Metafeld für den WooCommerce-Admin hinzufügen */Funktion 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');

This example adds a dropdown menu as a custom field for products. So it uses woocommerce_wp_select function to set the following parameters.

• ID
• label
• Description
• desc_type
• options

There are similar functions to add other types of form fields. For example,

• woocommerce_wp_textarea_input
• woocommerce_wp_checkbox
• woocommerce_wp_hidden_input

2. Save the user input in the custom fields in the cart metadata.

Then another action hook is added to save the custom field value in the product meta. This is called when saving the product details. It calls the woocommerce_process_product_meta action and hooks up the handler.

/* Benutzerdefinierte Felddaten für das Produkt speichern */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');

3. Display an input field on a product single page

In this section, an additional HTML field is prepared if the product meta is not empty.

First, the admin selects and saves the product color option. Then this code adds a dropdown box on the single product page.

It reads the current product meta with the reference of the global post object. Then it retrieves the product meta by the custom field id.

On the WooCommerce product page, this custom field is added before the cart button. This is because the woocommerce_before_add_to_cart_button action has been hooked up to call this handler.

/* Add-on-Feld basierend auf dem gespeicherten benutzerdefinierten Feld anzeigen */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">Standardfarbe</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');

4. Display the selected option on the cart and checkout pages

The following filter hooks handle the functionality to display the selected custom option. It targets the cart and checkout pages to render the UI component.

This code is triggered when loading the cart item data. It calls the woocommerce_add_cart_item_data filter hook and displays the selected custom field value.

It inserts the data into the cart items array which will later be used in the checkout page UI.

/* Ausgewählte Option im Warenkorb anzeigen */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);

This is to parse the cart items array and display the custom field value on the checkout page.

It uses woocommerce_cart_item_name hook to make this change in checkout UI.

/* Ausgewählte Option im Checkout anzeigen */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);

Diploma

So we've seen both methods to add custom fields to products. It is possible with or without plugins to enable custom WooCommerce product fields.

I hope this article provides a basic knowledge in this area. Also, it can help you understand and repeat the steps to customize your store.

↑ Back to top