WooCommerce: How to add a custom field to a product | Hard working nerd (2023)

The problem

Adding a custom field to a product in WooCoomerce is a very popular request, and while it might seem a little daunting to add a field and then get the data entered into the field, it will be processed throughout the cart, order, and purchase process Back-end ordering process displayed We can actually complete the task with only afew actionsand filters.

Let's see what we need.

To become somethingWooCommerceencodingJedi
Click here to enroll in our free WooCommerce coding course

The solution

For the purposes of this solution, let's say we want to add a gift notes box to all the products in our shop. When users fill in the gift notes field, we display it in the cart screens and the order confirmation screens on the front-end and then it is also available to backend users.

Adding the field to the product screen

We add our field with thewoocommerce_before_add_to_cart_buttonaction hook

Function hwn_add_custom_option(){ $value = filter_input( INPUT_POST, 'gift_note' ); ?> <p> <label for="gift_note"><?php _e( 'Gift Note:', 'hwn' ); ?> </label><input type="text" id="gift_note" name="gift_note" placeholder="<?php _e( 'Enter your gift card here', 'hwn' ); ?>" value= " <?php $value ?>"/> </p><?php}add_action( 'woocommerce_before_add_to_cart_button', 'hwn_add_custom_option');

Restrict the custom field to specific products

We can make a change to restrict the gift note field to only appear for specific products using the$Productglobal variable that WooCommerce provides us with

Function hwn_add_custom_option(){ global $product; if ( $product->get_id() !== 21 ) { return; } $value = filter_input( INPUT_POST, 'iconic engraving' ); ?><p> <label for="gift_note"><?php _e( 'Gift Note:', 'hwn' ); ?> </label><input type="text" id="gift_note" name="gift_note" placeholder="<?php _e( 'Enter your gift card here', 'hwn' ); ?>" value= " <?php $value ?>"/> </p><?php}add_action( 'woocommerce_before_add_to_cart_button', 'hwn_add_custom_option');

Here we check the product id and if it is not 21 (which is the product id of the polo shirt in our example) then we return from the function and no labels or input fields are printed on the screen.

(Video) 0309 Using Custom Fields Part 1

You could obviously use othersIfLogic to display the field for different products or product groups.

Show different inputs

If we didn't want to show text input, we could update the HTML to show a different type of input, provided the input we added writes a value called "gift_note" on the pagesPOSTcollection, then it would work with the rest of the code in this article.

Here is an example with a selection box

function hwn_add_custom_option(){global $product;if ( $product->get_id() !== 21 ) {return;}$value = filter_input( INPUT_POST, 'iconic-engraving' );?> <p> <label for= "gift_note"><?php _e( 'Geschenknotiz:', 'hwn' ); ?> </label> <select id="gift_note" name="gift_note"> <option value="love_you"<?=$value == 'love_you' ? ' selected="s selected"' : '';?>><?php _e( 'Ich liebe dich', 'hwn' ); ?></option> <option value="thanks"<?=$value == 'thanks' ? ' selected="s selected"' : '';?>><?php _e( 'Danke!', 'hwn' ); ?></option> <option value="sorry_its_late"<?=$value == 'sorry_its_late' ? ' selected="s selected"' : '';?>><?php _e( 'Sorry, es ist spät', 'hwn' ); ?></option> </select> </p><?php}add_action( 'woocommerce_before_add_to_cart_button', 'hwn_add_custom_option');

and this is what it looks like

WooCommerce: How to add a custom field to a product | Hard working nerd (1)

Just as a side note, you may have noticed the logic here

<option value="love_you"<?=$value == 'love_you' ? ' selected="s selected"' : '';?>><?php _e( 'Ich liebe dich', 'hwn' ); ?></option>

This logic selects the option that the user previously selected prior to page refresh. So if the user says "Thank you!" and then adds the product to the cart, the "Thank you!" option will still be selected after the item is added to the cart.

The code also uses the short PHP tag for echo, which may look a bit strange if you've never seen it before, you can read more about itHere.

(Video) WooCommerce One-Click Upsells: How to Create Profitable Post Purchase Offers (2021 MASTERCLASS)

Custom field validation

This step isn't required for everything to work consistently, but if we want to add validation to our gift note field, we can do so by hooking into thiswoocommerce_add_to_cart_validationFilter

function hwn_gift_note_add_to_cart_validation( $passed, $product_id, $qty ){$value = filter_input( INPUT_POST, 'gift_note' );if( !$value ){$product = wc_get_product( $product_id );wc_add_notice( sprintf( __( '%s cannot be added to cart until you enter a gift card.', 'hwn' ), $product->get_title() ), 'error' );return false;}return $passed;}add_filter( 'woocommerce_add_to_cart_validation', ' hwn_gift_note_add_to_cart_validation', 10, 3 );

Let's go through the code step by step

  • First, we use WordPressfilter_inputFunction to see if we have a value with the key "gift-note" in the POST variables
  • We then check if the value is empty (with the wrong logic of PHP), if you want to use more complicated validation logic, you can just change thatIfstatement according to your wishes.
  • If the value is empty, we retrieve the product details withwc_get_productWooCommerce feature, note that we cannot use that$Productglobal variable as it is not available to this function. We know the product ID that we need to use because WooCommerce will pass it to the filter function in the$product_idVariable
  • We then use the product title to display a message telling the user to add a gift note

WooCommerce: How to add a custom field to a product | Hard working nerd (2)

  • and return an incorrect value to the caller to indicate that validation failed
  • If the user passed a valid value, then we do nothing and return that$files-Value passed from the code calling the filter

Note that this feature would also prevent users from adding products to the cart directly from the shop screen

WooCommerce: How to add a custom field to a product | Hard working nerd (3)

If you want to allow users to continue adding products directly to the cart without having to add a gift card, we could add a conditional check to the if within the validation function to ensure the user is on the single product page

Function hwn_gift_note_add_to_cart_validation( $passed, $product_id, $qty ){$value = filter_input( INPUT_POST, 'gift_note' );if( !$value && is_product() ){$product = wc_get_product( $product_id );wc_add_notice( sprintf( __ ( '%s cannot be added to cart until you enter a gift card.', 'hwn' ), $product->get_title() ), 'error' );return false;}return $passed;}add_filter( ' woocommerce_add_to_cart_validation', 'hwn_gift_note_add_to_cart_validation', 10, 3 );

Adding the gift voucher to the item data of the shopping cart

Now we've added the gift note field to the product page, which we need to intercept the user's value input and include it in the cart's item data.

We can do this by hooking into thewoocommerce_add_cart_item_dataFilter.

(Video) Use case: Composite components and assemble your computer - YITH WooCommerce Product Add-ons

Funktion hwn_add_gift_note_to_cart( $cart_item_data, $product_id, $variation_id ) { $gift_note = filter_input( INPUT_POST, 'gift_note' ); if (leer ($gift_note)) {return $cart_item_data; } $cart_item_data['gift-note'] = $gift_note; return $cart_item_data;}add_filter( 'woocommerce_add_cart_item_data', 'hwn_add_gift_note_to_cart', 10, 3 );

Here's what we're doing in the function

  • First we use PHP'sfilter_inputFunction to get value key “Gift Certificate” from POST collection, this should be the value entered by user when adding product to cart
  • If we can't find a "Gift Card" value, we'll do nothing and return the card$cart_item_datavariable unchanged
  • When we find a value, we add a key-value pair$cart_item_datawith the key "Coupon" and the value that was entered in the "Coupon" field
  • We now return the modified one$cart_item_dataand the WooCommerce core adds it to the shopping cart

Display of the voucher data in the shopping cart

Our gift card details have now been added to the shopping cart but they are not showing anywhere. In order for them to show up in the pre-checkout screen, we need to hook into the "woocommerce_get_item_data" filter

function hwn_get_gift_note_item_data( $item_data, $cart_item ) {if ( isset( $cart_item['gift-note'] ) ){$item_data[] = array('key' => __( 'Gift Note', 'hwn' ), 'display' => wc_clean($cart_item['gift-note']));}return $item_data;}add_filter( 'woocommerce_get_item_data', 'hwn_get_gift_note_item_data', 10, 2 );

The first thing we do in this code is to check if the "gift-note" key we added via thewoocommerce_add_cart_item_dataexists, we add a new key-value pair to it$item_dataArray with the following values

  • Key - this is the name of our item, so in this case we'll use the text "Gift Voucher"
  • Advertisement - this is the value of our item, so we pass on the 'Gift Ticket' value from the$cart_itemRow

The value of the gift card should now be displayed on the main shopping cart page

WooCommerce: How to add a custom field to a product | Hard working nerd (4)

and the mini cart

WooCommerce: How to add a custom field to a product | Hard working nerd (5)

Adding the gift card details to an order line

Now the data is shown in the shopping cart, which we need to display in the backorder screenwoocommerce_checkout_create_order_line_itemaction

(Video) 0313 Creating A Product Template Part 3

function hwn_add_gift_note_to_order_line_item( $order_item, $cart_item_key, $cart_item_values ​​) {if ( ! empty( $cart_item_values['gift-note'] ) ) {$order_item->add_meta_data( __( 'Gift Note', 'hwn' ), $cart_item_values [ 'gift-note' ]);}}add_action( 'woocommerce_checkout_create_order_line_item', 'hwn_add_gift_note_to_order_line_item', 10, 3 );

In this function we check if there is a "Gift Certificate" value in the$cart_item_valuesArray, if there is a value, we add the data about that to the order item metadataadd_meta_dataFunction. We pass the following values ​​to the function

  • The name of the item, in this case we pass "gift certificate"
  • The value of the article, for this we pass the "gift voucher" value that we wrote in the article data of the shopping cart in the previous steps

The value of the gift card should now appear in all backorder screens and emails

WooCommerce: How to add a custom field to a product | Hard working nerd (6)

Here it is in the order email

WooCommerce: How to add a custom field to a product | Hard working nerd (7)

and also in the Order admin screens.

WooCommerce: How to add a custom field to a product | Hard working nerd (8)

Diploma

Often customers ask for custom fields and logic to add products in WooCommerce stores. Hopefully the snippets above can help you add any custom logic you need.

(Video) 0310 Using Custom Fields Part 2

If you have any questions or suggestions, please do not hesitate to let us know in the comments.

FAQs

How do I add an advanced custom field in WooCommerce? ›

How to Add Custom Fields to WooCommerce Product Pages (Step-by-step Guide)
  1. Create a new field group.
  2. Add your desired custom field(s)
  3. Configure additional field group settings.
  4. Add required information to products.
  5. Display custom field information on the frontend.
Jan 19, 2023

How do I add a custom field in WooCommerce cart page without plugin? ›

How to Add Custom Fields to WooCommerce Checkout Page
  1. Step 1: Define an Array of Fields on Checkout Page. ...
  2. Step 2: Add Custom Fields to WooCommerce Checkout Page. ...
  3. Step 3: Concatenate Fields as per Requirement. ...
  4. Step 4: Display Custom Fields on Order Page. ...
  5. Step 5: Display Fields on Account Page.
Jan 12, 2018

How do I add custom section and field in WooCommerce settings? ›

Log into your WordPress site and go to the WooCommerce->Settings page. Select the “Custom Fields” tab and click on the “Add Custom Field” button. Input the name of your custom field and select the type of field you want to add (e.g. text, select, checkbox, etc.).

How do I customize a field in WooCommerce? ›

Customize checkout fields with plugins
  1. Text – standard text input.
  2. Password – password text input.
  3. Textarea – a larger text field.
  4. Select – a dropdown box with options customers can choose from.
  5. Multi-select – a box that allows shoppers to select multiple options.
  6. Radio – a set of radio inputs that customers can choose from.
Jan 9, 2020

How do I add a custom field to my product? ›

Go to the product where you'd like to add a custom field. In the Product Data section, click the Product Add-Ons. Click 'Add Group' then click 'Add Field' Choose the type of field you'd like to add from the 'Field Type' option.

How do I create an advanced custom field? ›

Once you've installed and activated the free version of Advanced Custom Fields from WordPress.org, go to Custom Fields > Add New to create your first Field Group. As the name suggests, a “Field Group” is a group of one or more custom fields that are displayed together in your WordPress dashboard.

How do I add advanced custom fields? ›

Link to heading#Method 1: Auto
  1. Log in to your WP install.
  2. From the Administration Panels, click on the Plugin Menu.
  3. Under Plugins, click the “Add New” sub menu.
  4. Search for “Advanced Custom Fields”
  5. Click the “Install Now” button on the ACF plugin (should be the first one)

How do I add a custom field in WordPress without plugin? ›

Adding Custom Fields in WordPress

First, you need to edit the post or page where you want to add the custom field and go to the custom fields meta box. Next, you need to provide a name for your custom field and then enter its value. Click on the Add Custom Field button to save it.

What are custom fields for product? ›

Custom product fields are additional data points that can be added to products in an online store. These fields allow store owners to collect and display more information about their products beyond the basic details typically included (such as name, price, color, and description).

How do I create a custom meta field in WordPress? ›

In order to add a WordPress custom meta box to your website, you first need to install and activate the plugin. You can do this by going to the Plugins page of your WordPress admin dashboard and searching for the plugin name there.

How do I get custom field value in WooCommerce checkout page? ›

To add a custom field to the WooCommerce checkout, select the field type in the Add New Field section, enter a label name and click on Add Field. WooCommerce checkout fields - Add a new field. Step 2. 🎉And it's done!

How do I add a custom input field to my WooCommerce cart page? ›

Adding a custom field to a WooCommerce cart page plugin is a simple process. First, you'll need to create a new field in the plugin's settings. To do this, click on the “Fields” tab and then click on the “Add Field” button.

How do I add a custom field to a template? ›

Adding Custom Fields to the Post
  1. Go to the post editor screen and check “Custom Fields.”
  2. Find the Custom Fields box as part of your post editing. ...
  3. Add the key, which in this case is “Type of exercise.” We will use this box to add specific details to the post. ...
  4. Add the value. ...
  5. Save the post.
Feb 23, 2023

How do I add a custom field to a field catalog? ›

Go to 'Sales and Distribution > Basic Functions > Pricing > Pricing Control' and execute 'Define Condition Tables'. Select 'Conditions: Allowed fields' and enter 'ZZPSTYV' as a new entry. 5. Note: When you create the condition table Annn, you can now use the field ZZPSTYV as a key field.

How do I add a custom field in standard infotype? ›

For this use T-code SE51. Give the Program name and search for the screen number, click Change Button. Then, in the module pool program - Click the Layout button and include your field inside manually and provide the properties for that field.

How do I edit a custom field? ›

To edit a custom field:
  1. Select Settings ( ) > Issues.
  2. Under FIELDS, select Custom fields.
  3. Find the custom field you want to edit and select More ( ) > Edit details to update the following: The custom field name, which appears on issues. ...
  4. Modify the fields as needed and select Update.

How do I display custom fields? ›

Show Custom Fields Using Code
  1. Open the single. php file or page. ...
  2. Find the_content function so you can list your custom field data after the actual content of the post or page.
  3. Use the get_post_meta function to fetch custom field values using their meta key then list them using PHP echo.
Dec 7, 2022

How do you add custom fields to WooCommerce products and subsequently through the order cycle? ›

  1. Step 1: Add Data in a Custom Session, on 'Add to Cart' Button Click. ...
  2. Step 2: Add Custom Data in WooCommerce Session. ...
  3. Step 3: Extract Custom Data from WooCommerce Session and Insert it into Cart Object. ...
  4. Step 4: Display User Custom Data on Cart and Checkout page. ...
  5. Step 5: Add Custom Data as Metadata to the Order Items.
Mar 1, 2022

How do I add a custom field to a user? ›

Creating custom user fields
  1. In Admin Center, click People in the sidebar, then select Configuration > User fields.
  2. Click Add field.
  3. Select a field type, then enter a Display name.
  4. Verify that the field key is the value you want it to be. ...
  5. (Optional) Add a Description for the custom field.
Jan 3, 2023

Which function is used to add advanced custom field? ›

At the core of the Advanced Custom Fields plugin is the simple and intuitive API. Use functions like get_field() and the_field() to quickly build powerful templates.

Why use advanced custom fields? ›

ACF allows you, the developer, to take full control of the WordPress edit screen and tailor the content editing experience around your website's needs! Using ACF, you can add fields in addition to the WordPress visual editor or choose to hide it completely.

How do I get advanced custom field value in WordPress? ›

To retrieve a field value as a variable, use the get_field() function. This is the most versatile function which will always return a value for any type of field. To display a field, use the the_field() in a similar fashion.

What is advanced custom field? ›

Advanced Custom Fields Plugin

The free version allows users to quickly and easily add 30+ fields all over your WordPress dashboard — including to posts, users, taxonomy terms, media, comments and custom options pages — and display the custom field values in any theme template file.

How do I add a custom field without plugins? ›

Step 1: Go to add a new post or edit a post, then click on Screen Options.
  1. The Edit Post screen in WordPress.
  2. Check the box "Custom Fields"
  3. The Custom Fields area.
  4. An example of saving the information about a product in custom fields.
  5. Add extra data into a custom field.
  6. Homepage after adding custom fields.
Jul 12, 2018

Can you install plugins on a WordPress com without business plan? ›

WordPress.com users cannot install plugins unless they upgrade to the business plan which costs about $299 per year. If you are on a free, personal, or premium plan, then you cannot install third-party plugins. If you don't want to pay the $299 per year, then you can move your blog from WordPress.com to WordPress.org.

How do I display custom fields in custom post type in WordPress? ›

How To Add Custom Fields to a Custom Post Type in WordPress
  1. Start by creating a custom post type. ...
  2. Download, install and activate Advanced Custom Fields. ...
  3. Create your field group. ...
  4. Assign your field group to the custom post type. ...
  5. Choose your display options. ...
  6. Publish. ...
  7. Using Your Custom Fields. ...
  8. Conclusion.
Nov 25, 2022

What is an example of custom field? ›

Examples of custom fields include data such as title, URL, name, timestamp, or any piece of data you want to define on a model.

How do custom fields work? ›

Custom fields are a type of metadata that allows you to add custom data to your posts and pages. The information isn't contained in the post but provides information about the post.

What is the difference between The_field and Get_field? ›

the_field() automatically displays the field value on your page, where get_field() does not. Use get_field() when assigning field values to variables, or when manipulating the returned content in your code.

What are custom meta fields? ›

Custom Meta Fields display additional information about the custom or default post. In the default state of the post, that metadata isn't visible to the website visitors. You can display it only with the help of dynamic widgets. However, the information you type into the meta fields can be used in various places.

How do I customize a product in WooCommerce? ›

How to Customize the WooCommerce Product Page
  1. Step 1: Create the Single Product Template. ...
  2. Step 2: Choose a Pre-Designed Product Page Template, or build one from scratch. ...
  3. Step 3: Add the Product Widgets that will make up your page. ...
  4. Step 4: Preview the Product Page With Another Product. ...
  5. Step 5: Set the Conditions.
Apr 27, 2021

What are custom fields for products? ›

Custom product fields are additional data points that can be added to products in an online store. These fields allow store owners to collect and display more information about their products beyond the basic details typically included (such as name, price, color, and description).

Where can you add custom fields to the sales agreement product object? ›

Create Custom Fields for Sales Agreement Products and Schedules
  • In Object Manager, select Sales Agreement Product or Sales Agreement Product Schedule.
  • In Fields & Relationships, click New.
  • Select the data type for the new custom field, and then click Next.
  • Enter the field label, and click Next.

How do I activate custom fields? ›

Go to the custom fields meta box and select your custom field from the drop-down menu and enter its value. Click on the 'Add Custom Field' button to save your changes and then publish or update your post.

How do I add variations to WooCommerce products? ›

With attributes created and saved to add a variation, go to the Variations section in the Product data meta box.
...
Manually Add a Variation
  1. Select Add variation from the dropdown menu, and select Go.
  2. Select attributes for your variation. ...
  3. Edit any available data. ...
  4. Select Save changes.

How do I style a product in WooCommerce? ›

To create a new product page for WooCommerce, navigate to Templates–> Add New–> Landing page. Now select the Single Product Page option and create a new template. You will find a set of templates that are made for the WooCommerce product page. Select one and use the widgets in the list to design your product page.

What is the purpose of custom fields? ›

Custom fields are metadata categories that allow to fully describe the type of assets a business manager is storing in a digital library.

How do I add a custom field to a purchase requisition? ›

Select Customize Purchase Order Form

Select the relevant tab at the top of the screen: Custom Fields, Disclaimer/Labels, Shipping Terms, Shipping Methods, PO PDF Labels and/or PO PDF Custom Fields. Select the + button located at the right-hand side of the screen.

Can custom fields be added to standard objects? ›

Each standard object also comes with a set of prebuilt, standard fields. You can customize standard objects by adding custom fields, and you can add custom fields to your custom objects.

Videos

1. How To Make a WordPress Online Shop Website like Amazon - 2023 Guide
(Greg Narayan)
2. 0311 Creating A Product Template Part 1
(mohammed qadheer)
3. How to Create a Document Library in WordPress with Katie Keith from Barn2 Plugins - Ep. 336 LMScast
(LifterLMS)
4. How to use CartFlows to make WordPress eCommerce easy
(WP Builds)
5. Woocommerce Single Product Page Customizer Wordpress Plugin Version 1.0
(Rajanikant Kakadiya)
6. 0306 Issues With Displaying Products In WordPress
(mohammed qadheer)

References

Top Articles
Latest Posts
Article information

Author: Cheryll Lueilwitz

Last Updated: 10/16/2023

Views: 5591

Rating: 4.3 / 5 (54 voted)

Reviews: 85% of readers found this page helpful

Author information

Name: Cheryll Lueilwitz

Birthday: 1997-12-23

Address: 4653 O'Kon Hill, Lake Juanstad, AR 65469

Phone: +494124489301

Job: Marketing Representative

Hobby: Reading, Ice skating, Foraging, BASE jumping, Hiking, Skateboarding, Kayaking

Introduction: My name is Cheryll Lueilwitz, I am a sparkling, clean, super, lucky, joyous, outstanding, lucky person who loves writing and wants to share my knowledge and understanding with you.