WooCommerce guide: add an input field to a product page

Person typing on a keyboard

Do you want to use WooCommerce to add an input field to your product page? If you want to add input fields (like text input, checkboxes, radio buttons, and swatches) to your WooCommerce product pages, you’ll need a little help from a plugin.

Luckily, the Advanced Product Fields for WooCommerce plugin allows you to add extra input fields so your customers can personalize their product before adding it to cart. Furthermore, these input fields can show conditionally and influence the final product price.

Once you are finished with this tutorial, you’ll be able to use WooCommerce to add an input field to yur product page in just 2 steps.

Advanced Product Fields WooCommerce
Advanced Product Fields for WooCommerce

The easiest way to add input fields to product pages in WooCommerce

Check out the plugin

Which input fields can you add?

Advanced Product Fields for WooCommerce allows you to add a wide variety of input fields to your WooCommerce products:

How to add an input field to a WooCommerce product

In this section, we will walk you through the steps to add your first input field to a WooCommerce product. You’ll need to follow 2 main steps:

  1. Install the product fields plugin, Advanced Product Fields for WooCommerce.
  2. Create an input field on your product.

Step 1: install Advanced Product Fields for WooCommerce

To get started, purchase Advanced Product Fields for WooCommerce from the Studio Wombat store: studiowombat.com/advanced-product-fields-for-woocommerce

Then follow these steps: 

  1. Go to Plugins → Add New → Upload Plugin.
  2. Choose the zip file you downloaded, upload it, and then click Activate.
  3. Enter your license key to activate the plugin.

Now that you have Advanced Product Fields installed, you can move onto using WooCommerce to add an input field to a product.

Step 2: create your first input field

In this example, we’re going to add a custom text field to an existing WooCommerce product. Navigate to Products → All Products and edit a product of your choosing.

Find the Custom fields section inside the Product Data box:

The Custom fields tab in the WooCommerce product backend

Click Add your first field and you’ll see a section appear with all the options for your new input field.

We’ll go through the most important settings here:

  • Type: this is the type of field you want to create. You can pick anything from checkboxes to color swatches. In this case, we’re going to select Text as our field of choice.
  • Label: the label is the text you want to show above or below the text field. This way, you let your customers know what this field is for.
  • The next few options allow you to further refine the input field.  You can limit the character count, add additional pricing to the field, and much more.

Once done, simply Update your product by scrolling back up to the Publish section of the product. Check out your product page to see the input field:

How does it work for the customer?

In normal circumstances, when your visitor browser your shop page, they will see an “add to cart” button. But when your product has extra input fields attached to it, visitors will see a “select options” button instead.

Clicking this button takes customers to the product page where they can personalize their product before adding to cart.

All data the customer enters will be visible by the store admin in the order admin screen.

Using WooCommerce to add an input field to your product is simple

That’s it, your WooCommerce store now has the ability to add custom input fields to products. Once you have this up and running, you’ll be able to offer product customizations and attach prices to those customizations.

Make these changes quickly and easily with Advanced Product Fields for WooCommerce.

Advanced Product Fields WooCommerce
Advanced Product Fields for WooCommerce

The easiest way to add input fields to product pages in WooCommerce

Check out the plugin
Share