• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Essential Premium WooCommerce Plugins - WP Desk

  • Premium Plugins
  • Support
  • Blog
  • My Account
  • 0
Szymon Barczak

How to set up a Computer Configuration Wizard in WooCommerce - A Comprehensive Guide with Examples

Updated: May 15, 2019 / Guides

Selling computers and maximizing profits with up-selling can be challenging. In this guide, you'll learn how to set up a WooCommerce computer builder in your store. With this purpose in mind, I will use a MacBook Pro as an example. In the end, you will be ready to sell computers in your WooCommerce store and make more profit.

Where to look for an inspiration for computer builder wizard?

Have you ever been on Apple's website? In general, they let you choose 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 how their wizard looks like:

MacBook Pro Customization - Apple.com

We will configure the wizard options identically in this guide to create WooCommerce computer builder.

It will look like this once we configure it:

WooCommerce Computer Builder: MacBook Pro
WooCommerce Computer Builder (click to enlarge)

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 configure WooCommerce computer builder. 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

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 →

Plugin for WooCommerce computer builder

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
7,000+ Active Installations
Last Updated: 2021-01-14
Works with WooCommerce 4.2.0 - 4.6.x

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

Flexible Product Fields - installation

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

The free version lets you create WooCommerce computer builder and see it in action. All the 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:

Flexible Product Fields - upgrade link

Once install 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):

Add new fields group in Flexible Product Fields

Fields of WooCommerce computer builder

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:

Coomputer Configuration Wizard

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

Main settings

Computer Configuration Wizard - fields' settings

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 use assigning to a product (MacBook Pro). It is the only option available in the free version. You could use assigning 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 groups to a product you can set the display order of them.

Add fields

Next step is to add fields to our WooCommerce computer builder. You have probably already noticed the Add Field button so let's use it!

Add Field in Flexible Product Fields

Size (radio field)

In order to offer size variations, you need to configure 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 do they need then?

Size field of the computer wizard

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

In 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.

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

Processor (radio field)

Processor field on the product page

The Processor is also a radio field, you can configure it the same way as the Size field.

Processor field of the computer wizard

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

Memory (radio field)

Memory field on the product page

This time you know it all. You just need to provide memory options to our WooCommerce computer builder.

Memory field of the computer wizard

Storage (radio field)

Storage field on the product page

You already know how to configure this radio field :)

Storage field of the computer wizard

Keyboard language (select field)

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.

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.

Delivery date field of the computer wizard

It has a few interesting options you can set:

  • 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 an engraving as you need time to make it.

Show gift options (checkbox field)

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

Show gift options field on the product page

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

Show gift options field on the product page (marked)

This is the conditional logic. However, you don't set Conditional logic option for this field. Look:

Show gift options field of the computer wizard

Conditional logic, which is a crucial feature of Flexible Product Fields, may be very useful for WooCommerce 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 field on the product page

This field should shows up only when the customer marks Show gift options checkbox.

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

Engraving field of the computer wizard

As you can see above, I marked the Conditional logic option. In the Rules, I set that this field shows up when 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)

Gift packaging field on the product page

You need to set conditional logic for this field in the same way as above.

Gift packaging field of the computer wizard

Gift message (text field)

Gift message field on the product page

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

Gift message field of the computer wizard

You can create your own demo store with the plugin and the product preconfigured for you.

Are you ready to set up a computer wizard in your store?

You've learned how to create your own computer builder as a result of reading this WooCommerce Computer Builder Guide. I hope it helped you and you are ready to sell computers in your WooCommerce store.

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

As a matter of fact, I don't cover 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.

Tweet

5 minutes read1323 views

Szymon Barczak

Content Management Specialist at WP Desk. Concentrates his efforts on growing our plugin user base. In his free time he is interested in psychology and retro games.

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 →
WP Desk › Guides › How to set up a Computer Configuration Wizard in WooCommerce - A 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
  • FAQ
  • Docs
  • Get Support

Legal

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

© 2021 WP Desk