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

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:

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

It will look like this once we configure it:

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:

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

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.

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

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:

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

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:

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

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!

Size (radio field)

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

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?

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)

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

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)

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

Storage (radio field)

You already know how to configure this radio field :)

Keyboard language (select field)

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.

Delivery date (date field)

Here you can see another field type. This is the date field.

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:

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

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

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.

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.

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.

Gift packaging (checkbox field)

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

Gift message (text field)

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

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.

Read more: How to add variable product in your WooCommerce store? →