Sell customizable products with a free WooCommerce 3d Product Configurator

In this article, I'll show you how to customize WooCommerce products with a 3d product configurator & custom fields. I'll guide you step by step with a Ford Mustang as an example! Let's boost your WooCommerce products with a visual product configurator!

Selling products with more options requires choosing attributes, extensive descriptions, or WooCommerce variations. But none of them let your customers decide about all product features on one page.

Wouldn't be better to build a visual 3d product configurator in WooCommerce with product custom fields & a free WordPress plugin? Let's begin!

Table of contents

• WooCommerce 3d product configurator for a car
• WooCommerce visual products configurator - A step-by-step guide
• Summary & more about the plugin

WooCommerce 3d product configurator for a car

First, I want to show you the final effect. I want you to be sure that's what you are looking for😊.

I decided to use Ford Mustang🚘  as an example. Continue reading to follow my step-by-step tutorial.

WooCommerce visual product configurator - example

So now I will show how to use Flexible Product Fields for a 3d product configuration.

✅ That's how WooCommerce car configurator looks like with this plugin:

WooCommerce product configurator (WordPress plugin)

In this guide, we will use the Flexible Product Fields plugin.

This plugin works as a multistep product configurator for WooCommerce.

I added a few options to this WooCommerce car configurator. You can add more if you like.

👉🏽 Color is a variation of the product:

👉🏽 Also, that's how calculations look like:

As you see, I chose a few options on this product page. The plugin lists it and shows the total.

Customize WooCommerce products with custom fields

As I said earlier, you need the Flexible Product Fields plugin. It is a plugin to show extra fields on the WooCommerce product pages.

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

In short, the free version doesn't offer you to charge customers for additional options. We will use this feature in this WooCommerce car configurator guide. We will charge customers per add-on for the Ford Mustang they want to buy.

Of course, the free version allows you to create a WooCommerce car configurator.

You can simply check out if the extra fields method fits your needs. Nevertheless, all the add-ons must be available for free.

So, let's go back to our WooCommerce 3d product configurator & custom fields!

WooCommerce visual products configurator - A step-by-step guide

1. Install the product customizer - a WordPress plugin

   Download the free version of the plugin or choose (or upgrade to) PRO if you like to charge customers for additional options and product features.

   Flexible Product Fields WooCommerce

   A multistep product configurator for WooCommerce. The free version lets you add as many as 18 different field types to a WooCommerce product page.

   Download for free or Go to WordPress.org

   WP Desk

   10,000+ Active Installations

   Last Updated: 2023-09-25

   Works with WooCommerce 7.7 - 8.0.x

2. Plugin configuration

   Once you have the plugin installed, you can configure it forthwith. Choose Products → Product Fields in your WordPress menu:

   

3. Add custom fields

   Next, create a new group of fields.

   Here you need to provide the name of the group. It's for your purpose only. It will not show on the front end.

   

   ⚠️  Don't forget to assign the group of fields. You can assign it to:

   • all the products in your store (PRO) or
   • products from some categories (PRO) or
   • with some tags (PRO) or
   • a chosen products

   As you can see on the screenshot above🔝, I assigned it to a Ford Mustang product in my store.
    

4. Choose the product fields

   In the screenshot below, you can see all the fields I configured. I'll guide you step by step through them😊.

   

   1. Powertrain (radio field)

   I found only one option for a powertrain on the Ford.com website: 2.3L EcoBoost® Engine.

   ✅ I created a radio field and configured it this way:

   

   

   The plugin passes the Value with the order. It means you can see the value on the edit order screen. The Label shows up on the product page.

   👉🏽 Your customers will see the values (of the options they select) in the cart:

   

   Also, you will see them while editing the order:

   

   2. Transmissions (radio field)

   I used the same type of field here: the radio field. There are two options to choose from:

   • 6-Speed Manual Transmission
   • 10-Speed SelectShift® Automatic Transmission

   🫰🏼  We charge an additional $1,595 for the second option.

   💡 The pricing tab is available only in the PRO version of our Multistep product configurator for WooCommerce.

   

   

   The configuration looks similar. The only change is the Price.

   💡 The pricing tab is available only in the PRO version of our Multistep product configurator for WooCommerce.

   3. Exterior (heading field)

   ✅ Next field is the heading field.

   There's nothing to choose from here.

   It is a simple H2 tag you can insert on the product page. We will group checkboxes below this heading.

   

   You can create your custom CSS styling and provide the name of the CSS Class here.

   It is optional but you can change the look of this (or any other) field that way.

   4. Black Accent Package (checkbox field)

   Here we have an add-on. A customer can add a package that we will charge additionally🫰🏼.

   ✅ Simply select Checkbox as a field type:

   

   You need to provide the Price for that field. This way when a customer marks the field, it will add the additional cost to the total.

   5. EcoBoost® Performance Package (checkbox field)

   ✅ The same way we configure the rest of the fields:

   As you can see, the plugin lets you adjust the custom fields for the WooCommerce 3d product visual configurator you need!

   

   6. Enhanced Security Package (checkbox field)

   The multistep configurator allows customers to choose the WooCommerce product options on one page!

   

   7. Wheel & Stripe Package (checkbox field)

   Of course, you can create more configurations of fields for different products! Let's add the next field.

   

   8. Exterior color (Radio with images field)

   We're almost there 😊! Let's add the last one!

   Radio with images works great to show available different color finishing available in the product that you sell.

   👉🏽 Here you can let your customer choose the exterior color by selecting the color image. You just need to upload the color picture:

   

5. The visual 3d product configurator for WooCommerce products - the final effect

   ➡️ Finally, let's see the effect on the product page. It looks kinda cool:

   

Summary & more about the plugin

That's all! We have implemented the fully working WooCommerce car configurator in these quick steps.

In this article, you have learned how to create a WooCommerce car configurator in your store.

See all features of PRO and read the plugin documentation.

If you have any questions or you want to give us feedback, use the comments section below.