How to Add Custom Fields to WooCommerce Product Pages

Chưa được phân loại

Looking for a way to add custom fields to WooCommerce product pages?

Whether you’d like to add detailed specifications on a WooCommerce product page or you’re interested in showing alternative product variants with the click of a button, adding custom fields in WooCommerce only takes a few moments of your time.

After that, you’re able to customize all parts of your WooCommerce dashboard and rapidly incorporate site information that would usually require manual data entry.

In this article, we’ll show you step-by-step how to add custom fields to WooCommerce products using the free Advanced Custom Fields plugin (ACF).

Examples of custom field usage for WooCommerce

When might custom fields in WooCommerce be useful?

  • For adding additional product information for things like computers, where you’d show technical specs such as RAM and processing power.
  • Promotional messages that you can quickly change to something else.
  • Unique media elements that can’t be inserted using the standard WooCommerce features, like an extra video.
  • Dates and times for when you have a countdown, auction, or release date for a product.
  • Extra product options, in addition to variants, that customers can look through.
  • Paragraphs to explain detailed instructions for using an item.
  • Add-on offers where the user gets presented with several upsells that complement the current product. Examples include brush attachments for electronic toothbrushes or different charms for a bracelet.
  • Any unusual or extra data you’d like to incorporate on a product page that either isn’t supported through WooCommerce or it’s easier to complete with custom fields.

How to add custom fields in WooCommerce product pages

In this example, we’ll make a mock computer store that sells laptops. It would take a significant amount of time to type in computer specifications for every new laptop, so instead, we’ll include fields to select those specifications based on the types of computers we sell.

To add custom fields to WooCommerce products, you need to install the free Advanced Custom Fields plugin on your WordPress site. Then, here’s how to set it up…

Here’s how to add custom fields in WooCommerce product pages step by step:

  1. Create a new field group
  2. Add your custom field(s)
  3. Configure additional field group settings
  4. Add information to products
  5. Display custom field information on front-end

1. Create a new field group

In your WordPress dashboard, go to the new Custom Fields tab. Then, click Add New next to Field Groups.

add new custom fields WooCommerce

Name a field group. For example, “Computer Fields”. A Field Group is a collection of fields you’ll have for one product or section of your website, like a list of specifications that you want to appear on all laptop product pages.

2. Add your custom field(s)

Click the Add Field button to add a field to this group.

add a field

Create a:

  1. Field Label – mainly for your own reference.
  2. Field Name – serves as the letters you’ll place in your own custom code, or shortcode in our case. You can leave this as the default that the plugin generates.
  3. Field Type – the format you’re creating for that field. You can choose from options like date selectors, checkboxes, dropdowns, and radio buttons.

You also may want to put some instructions for yourself or the developer, along with a specification of whether or not this field is required.

required options for custom fields WooCommerce

If you’re working with a field that has multiple options (like radio buttons), you’ll next need to add your field Choices. These are the selection options you want to appear on the backend of your product page, such as different core processors.

field choices for custom fields WooCommerce

The rest of the settings are typically optional, like default value, the layout, and if you’d like to show the value or label.

extra settings

Whenever you’re done with a field or group, click the Publish or Update button to ensure it gets saved.

update a field group

To add more fields to your group, click the Add Field button again.

Here’s what it looks like with four fields in this group for:

  • CPU
  • Memory
  • Operating System
  • Release Date
add field

3. Configure additional field group settings

Once the field group is done, scroll to the Location module. This is where you identify where you want the field group to appear in your WordPress dashboard.

Set the Post Type equal to Product. Or, if you want to be more specific, you can also choose a specific category of products.

setting the location of the custom fields WooCommerce

Under Settings, make sure the Field Group is Active. This allows you to see it on those product pages and potentially show the field selections to your customers.

The style depends on your own preferences. The same can be said for the position, label placement, and instructional placement. That’s all personal preference and how you want to format your backend. When in doubt, just leave them as the defaults.

Set the Order Number if you have multiple field groups showing up on product pages. This controls the order in which different field groups display.

You can also set a description and hide certain details on your screen.

settings

4. Add information to products

Next, navigate to the editor for a product where you want to add custom fields.

If all settings are configured properly, you should see the custom fields below the Product data box.

For our example, if you were to add a new laptop product page, you can pick the CPU, Memory, Operating System, and Release Date.

viewing the custom fields WooCommerce

5. Display custom field information on front-end

To finish things out, you need to display the information from your custom fields on the front-end single product page. You can add this information anywhere, but good starting spots are in the product long or short description.

To display field information on the front-end, use the shortcode. Add the Field Name in between the quotation marks:

placing the shortcodes

You can find the Field Name for each field in the field group editor interface:

field name - custom fields WooCommerce

To finish things out, hit the Publish or Update button.

When you open your product on the front-end, you should see your custom fields where you added the shortcodes:

frontend product

Any questions about how to add custom fields?

An advantage of using Advanced Custom Fields over alternative field-making plugins is that you can place your new fields in any location on your site, including product pages, posts, and cart modules – customizing your dashboard and expediting the content creation process.

It’s a wonderful option for expanding your creativity and making the tedious task of building product pages a little simpler.

We understand that the Advanced Custom Fields plugin has a bit of a learning curve, so if you have any thoughts or questions about adding custom fields in WooCommerce, let us know in the comments below!

You can also check out our full ACF tutorial to learn more about how to use this flexible plugin.

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai.