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.

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.

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

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.

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

• 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

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.

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

and the mini cart

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

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

Here it is in the order email

and also in the Order admin screens.

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.

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