• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • Bundle
  • Support
  • Blog
  • My Account
  • 0

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

Bartosz Gajewski

How to add products in WooCommerce better & customize them? Comprehensive Guide with Examples

Updated: March 01, 2023 / Plugin Tutorials, Tech Posts

Selling computers and maximizing profits with up-selling can be challenging. In this guide, you'll learn how to add products to WooCommerce. Then, I will show you how to use a free plugin to customize the WooCommerce product page. You will see a WooCommerce computer builder with a MacBook Pro as an example. In the end, you will be ready to sell customizable products in your WooCommerce store and make more profit.

➡️  Do you find WooCommerce poor in options or overcomplicated when adding products?

Today, I'll show you how to add products and customize them in your WooCommerce with a free plugin!

Table of contents

  • How to add WooCommerce products - Quick guide
  • Customize WooCommerce products - computer builder example
  • Customize the WooCommerce computer builder product page
  • WooCommerce products with custom fields
  • Summary & more about the plugin

How to add WooCommerce products - Quick guide

Let's see how to create products in a few steps:

  1. Products in WooCommerce

    Customize product WooCommerce
    WooCommerce Products List

    First, go to the Products menu to add, remove, and manage your items.

  2. Add or edit a product

    Then, click the Add new button or edit the existing product.

    WooCommerce customize product
    Edit WooCommerce products
  3. Set the WooCommerce product

    Now, choose the product name, its description, and an image. Also, go to the Product data section to decide on price, stock, attributes, tax, etc.

    Customize product WooCommerce
    How to add WooCommerce products in a few steps

    Then, publish the new product (or update the existing one). That's it! 😁 

  4. Choose the product type

    You may also choose the product type:

    This is how to add products in WooCommerce
    WooCommerce product types
  5. Product categories & tags

    👉🏽  Of course, there are a lot of additional things you can set up, like the product category or tags to better organize your items. I would like to point out that you can also quickly edit some product data faster with the Edit option on the main Product screen:

    WooCommerce customize product
    Edit WooCommerce products
  6. How to customize products in WooCommerce?

    ➡️ I think you're ready to add products. Thanks to the WooCommerce product builder you can prepare products and use additional data (like attributes, tags, and the product gallery).

    In the next part, I will show you how to customize WooCommerce products with custom fields to offer much more!

💡 Read more about adding and managing WooCommerce products in the in-depth guide.

Customize WooCommerce products - computer builder example

Have you ever been on Apple's website? In general, they let you choose the components of a computer that you want to buy.

As I mentioned, I decided to use a MacBook Pro 💻 as an example for this guide. We will work on a real example at this point.

Basically, this is what their wizard looks like:

How to customize product page in WooCommerce
MacBook Pro Customization - Apple.com

We will configure the wizard options identically in this guide to create a WooCommerce customizable product - your computer builder.

It will look like this once we configure it:

Customize WooCommerce product page
WooCommerce Computer Builder (click to enlarge). Customize product page woocommerce with Flexible Product Fields.

It doesn't look exactly like the one on Apple's website obviously😉 . This is the basic configuration just to demonstrate to you how it works.

💡  With some custom styling going beyond the basic Storefront theme, you can create something beautiful. I want this guide to be easy for you so I won't cover this topic in this guide. I only want to teach you how to customize WooCommerce products with the computer builder example. Styling is not important right now.

👀  Look at another thing I want to show you before we go next:

Product add-ons on the product page
Price breakdown obtained with Flexible Product Fields

This calculator shows up when you select an option in the WooCommerce computer builder.

💡 See this live example in action: Macbook Pro in our demo store →

Customize the WooCommerce computer builder product page

1️⃣  First, you need Flexible Product Fields, our plugin enabling store owners to add custom fields and add-ons to WooCommerce products (and optionally charge for them). We will use this plugin in this guide.

Flexible Product Fields WooCommerce

Create a product wizard to sell engravings, gift wrapping, gift messages, business cards, stamps and optionally charge for it (fixed or percentage).

Download for free or Go to WordPress.org
WP Desk
10,000+ Active Installations
Last Updated: 2023-03-13
Works with WooCommerce 7.1 - 7.5.x
💡  In this tutorial we will be using the Pricing and Conditional logic features, which are available in Flexible Product Fields PRO. However, we encourage you to download the free vesion first and to check whether it's something for you, or not!

You can download it for free from WordPress.org or install it right from your store's plugins section searching for flexible product fields:

WooCommerce extra product addons
Install and activate the free version of Flexible Product Fields

➡️  To cover all the use cases that we discuss here, you will need the PRO version of the plugin. In short, the free version doesn't offer you to charge customers for additional options. However, you can check out if the extra fields method fits your needs.

The free version lets you customize the WooCommerce product page with 18 custom product fields. So, all options, i.e. processor upgrade, will be available in the free version. Once you decide it is what you need, you can easily upgrade the plugin:


➡️  Once you've installed the plugin, let's configure it. Choose Products → Product Fields in your WordPress menu (1). Then you need to add a new field group (2):

WooCommerce product add ons - adding a new fields group
Add new fields group in Flexible Product Fields

Customize WooCommerce products with custom fields

Finally, we reached the fields configuration section🎉. I want this article to be easy for you, therefore, I will guide you step by step. Soon, you will be able to create a MacBook wizard in your store by yourself.

The overall configuration of our WooCommerce computer builder looks like below:

Customize WooCommerce product page with Flexible Product Fields
Extra product add-ons added with Flexible Product Fields

It may look overwhelming to you, but don't worry. As I have noted, I'll guide you step by step through the configuration to customize the WooCommerce product page with new fields. Let's begin then!

💡   In this tutorial we will be using the Pricing and Conditional logic features, which are available in Flexible Product Fields PRO.

Main settings

Customize single product page WooCommerce
Main settings - WooCommerceproduct page customization

In the section settings, you can choose where to display the fields on the product page.

Then you can assign this group to:

  • a selected product(s),
  • all products in your store,
  • or selected categories.

👉🏽 At this point, I assign the fields to a product (MacBook Pro). It is the only option available in the free version. You could use assignment to a category, e.g. computers, in your store. In this case, you will need the PRO version.

Finally, look at the order option. If you add more than 1 field group to a product you can set the display order of them.

Add fields

The next step is to add new product fields to our WooCommerce computer builder. You have probably already noticed add-ons list. You will have to add them one by one.

Extra addons available in Flexible Product Fields PRO
Fields that we will use in this WooCommerce product add ons ultimate guide

Size (radio field)

In order to offer size variations, you need to configure the radio field.

Size extra addon radio field
Size field on the product page

First, enter the field's name in the Label. Then select Radio from the Field Type. Required is the next option. You should use it or a customer will be able to make the order without selecting a size. How would you know what size they need then?

Customize product page WooCommerce - radio field
Radio field settings - this is how to add extra addons to product page

Sooner or later you may want to style the fields in your way. There's the CSS Class option to use in this situation.

👉🏽In the Options section, you can finally configure the sizes you want to offer in your shop. In this case, we use 13-inch and 15-inch sizes. The second one costs $600 more. This is how you set it: go to the Pricing tab and add extra prices:

Adding extra pricing (Flexible Product Fields PRO)
Add extra pricing in the Pricing tab

We don't use Conditional logic, the last option. However, we will use it later in our WooCommerce computer builder.

💡 In this tutorial we will be using the Pricing and Conditional logic features, which are available in Flexible Product Fields PRO.

Processor (radio field)

Radio extra addon product page
Processor field on the product page

The Processor is also a radio field, you can configure it the same way as the Size field. The same goes for adding an additional price to selected options.

WooCommerce customize product page with a radio field with extra pricing
Adding extra pricing to a radio field added with Flexible Product Fields PRO

While in the Size both value and label were the same, we use different values and labels here. Value is only visible for store admin and stored in the database. The Label is visible to customers on the product page.

Memory (radio field)

Radio fields will enrich your product page
Memory field on the product page

This time you know it all😉. You just need to provide memory options to our WooCommerce computer builder. Proceed in exactly the same way as in the previous steps.

Storage (radio field)

WooCommerce product page customize with radio fields
Storage field on the product page

You already know how to configure this radio field 😉 The only difference is that you'll have to add 2 additional prices. Look:

This is how to customize WooCommerce product page with Flexible Product Fields PRO
Add 2 additional pricing options

 

Keyboard language (select field)

Select extra addon
Keyboard language field on the product page

This time you will configure a new type of field: select field.

The configuration is very familiar to the previous one. The main difference is the Select in the Field Type.

WooCommerce product page customize with a select drop down field
Keyboard language field of the computer wizard

Delivery date (date field)

Delivery date field on the product page

Here you can see another field type. This is the date field. The general settings are quite similar to the previous ones but there are some additional features in the Advanced tab:

How to customize product page in WooCommerce with a date field
Advanced settings in the date field

➡️ Some of the features are:

  • date format
  • days before
  • days after

With days before and days after you can set a time range of dates available to select by a customer. It may be useful when you offer the product engraving as you need time to make it.

Show gift options (checkbox field)

💡 In this tutorial we will be using the Pricing and Conditional logic features, which are available in Flexible Product Fields PRO.

This product field will be very important in our configuration. By default it looks like this:

Customize single product page woocommerce adding a checkbox field
Show gift options field on the product page

👆🏽 When a customer checks this field, new fields show up.

Conditional logic added with Flexible Product Fields (PRO)
Show gift options field on the product page (marked)

This is the conditional logic. However, you don't set the Conditional logic option for this field. You add the field in the normal way, and at this point you need to be worrying about the Conditional Logic Tab.

Checkbox field general settings
Show gift options field of the computer wizard
💡  Conditional logic is a crucial feature of Flexible Product Fields PRO. It may be very useful when you customize the WooCommerce product page like this computer builder. In this case, you will need to set this option in other fields.

Engraving (text field)

This is a simple field where a customer can provide some text i.e. engraving.

Engraving extra addon WooCommerce product page
Engraving field on the product page

👉🏽This field should show up only when the customer marks the Show gift options checkbox.

In this situation, you need to configure conditional logic for this field.

Start with the customization adding an extra price in the Pricing tab:

And now let's go to the Conditional Logic tab where we will add this extra feature as well:

WooCommerce customize product
Conditional Logic settings

As you can see above, I marked the Conditional logic option. In the Rules, I set that this field shows up when the Show gift options field is equal to checked.

💡  Maybe you'll find our WooCommerce Conditional Product Options guide interesting at this time.

Gift packaging (checkbox field)

Customize single product page WooCommerce
Gift packaging field on the product page

You need to set conditional logic for this field in the same way as above. You can also add extra pricing if you want the customer to pay extra money for the gift packaging. You already know how to add extra pricing 😉

How to customize WooCommerce product page with extra addons
Gift packaging - setting conditional logic with Flexible Product Fields PRO

Gift message (text field)

Gift message extra addon
Gift message field on the product page

Finally, the last one🎉. You need to set conditional logic here, too.

💡  You can also set a character limit in the Advanced tab.
Add conditional logic
Gift message field of the computer wizard
💡  You can create your demo store with the plugin and the product pre-configured for you. You can also test how to add WooCommerce products and customize the product page with the plugin!

Once again, let's look at the effect we have achieved😁 :

WooCommerce how to add products
Extra addons added with Flexible Product Fields PRO

Flexible Product Fields PRO WooCommerce £59

Create a product wizard to sell engravings, gift wrapping, gift messages, business cards, stamps and optionally charge for it (fixed or percentage).

Add to cart or View Details
WP Desk
10,000+ Active Installations
Last Updated: 2023-03-15
Works with WooCommerce 7.1 - 7.5.x

Summary & more about the plugin

In this article, I've explained how to add WooCommerce products and then customize them with a free plugin!

You've also learned how to create your computer builder as a result of reading this WooCommerce Computer Builder Guide. I hope it helped you and that you are now ready to sell customizable products in your WooCommerce store. Are you ready to set up a computer wizard in your store?

After all, you may have some questions. Feel free to ask! Please use the comments section below😁 .

Finally, I haven't covered all the plugin's features in this article. I think that our WooCommerce Extra Product Options Guide may be interesting for you. It's another great article. Read it in case you want to learn more use cases for this plugin.

WooCommerce product add ons ultimate guides

  • WooCommerce product text field

    woocommerce product text field
    WooCommerce product text fields. Find out how to add text fields to a WooCommerce product page with Flexible Product Fields.

  • File upload added with Flexible Product Fields

    file upload field
    WooCommerce file upload field. Find out how to add a file upload field to your product page using Flexible Product Fields.

Tweet

6 minutes read6210 views

Bartosz Gajewski

Content Specialist in WP Desk. He tries to increase the number of plugin users with useful content. Privately an enthusiast of mountains and European cinema.

Product Fields Use Cases

Powered by WP Desk

WP Desk brings you great WooCommerce plugins. We strive to save your time and money by speeding up your processes. Use our plugins to build a better store. Awesome support included in the package.

Premium WooCommerce Plugins →

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

WP Desk › Plugin Tutorials › How to add products in WooCommerce better & customize them? Comprehensive Guide with Examples

Footer

WP Desk - WooCommerce Plugins

At WP Desk we create great WooCommerce plugins with awesome support. Save time and money with our e-commerce solutions. See how we can help you improve your e-store →

Secured by Comodo

WP Desk

  • About us
  • Giving Back
  • Blog
  • Contact us

Products

  • Premium Plugins
  • Get Support
  • WooCommerce Invoices
  • Email Marketing
  • Octolize

Legal

  • Terms & Conditions
  • Refund Policy
  • Support Policy
  • Privacy Policy

© 2023 WP Desk