• 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

Sell customizable products with a free WooCommerce 3d Product Configurator

Updated: March 01, 2023 / Plugin Tutorials

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 3D product configurator
WooCommerce Car Configurator: Ford Mustang

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.

🔽 First, download it completely for free at the link below 🔽

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-03-13
Works with WooCommerce 7.1 - 7.5.x

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

💡 A notice. This is the basic setup. I use default styling. Of course, you can use CSS to style these fields. Also, this is the default WooCommerce theme: Storefront.

👉🏽 Color is a variation of the product:

3D product configurator WordPress
Visual product configurator for WooCommerce - Ford Mustang
💡  Check out our WooCommerce Variable Product Guide if you need more information on how to add WooCommerce products.

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

Product configurator for WooCommerce - added extras
Car configurator for WooCommerce - added extras

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

💡 You can check out the live version of this product. Also, you can create a demo store with this product preconfigured.

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.

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-03-13
Works with WooCommerce 7.1 - 7.5.x

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:

Multistep product configurator for WooCommerce installation
Download and activate Flexible Product Fields
➡️ As a matter of fact, you will need the PRO version of the plugin to follow this guide. But we encourage you to download the free version first and decide whether it's something for you, or not.

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.

💡 Read more about how Pricing works in this plugin.

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.

✅Once you decide it is what you need, you can easily upgrade the plugin too:
Product configurator for WooCommerce - upgrade to PRO
You can easily upgrade Flexible Product Fields by clicking the Upgrade button

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-03-13
    Works with WooCommerce 7.1 - 7.5.x
  2. Plugin configuration

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

    WooCommerce Products -> Product Fields
    Flexible Product Fields in the 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.

    3D product configurator WordPress
    Add new Fields Group with Flexible Product Fields

    ⚠️  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😊.

    Product configurator for WooCommerce
    Car configurator for WooCommerce

    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:

    Radio field added with Flexible Product Fields
    Radio field configuration
    Radio field with extra pricing
    Pricing tab: adding a price for a product configurator for WooCommerce

    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:

    WooCommerce visual products configurator
    Ford Mustang: values in the cart

    Also, you will see them while editing the order:

    Extra features preview
    Ford Mustang: values while editing 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.
    WooCommerce visual products configurator
    The transmissions field added with a Radio field type
    Pricing tab - available in PRO
    Transmissions field price

    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.

    Exterior field
    Heading field type: define the car's exterior

    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:

    Adding extra pricing to a product page checkbox
    Black Accent Package field (Checkbox)

    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!

    Product configurator for WooCommerce - adding checkbox
    EcoBoost® Performance Package field (Checkbox)

    6. Enhanced Security Package (checkbox field)

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

    Added fixed price type with a visual product configurator for WooCommerce
    Enhanced Security Package field (Checkbox)

    7. Wheel & Stripe Package (checkbox field)

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

    WooCommerce product configurator
    Wheel & Stripe Package field (Checkbox)

    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:

    Radio with images field type
    3D product configurator WooCommerce: Radio with images field
  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:

    WooCommerce visual products configurator
    Radio with images added with Flexible Product Fields

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.

Flexible Product Fields PRO WooCommerce £59

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

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

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

More articles related to our product configurator for WooCmmerce

  • WooCommerce Radio with images field

    WooCommerce radio with images field
    WooCommerce radio with images. Find out what you can achieve by adding the Radio with images field type.

  • WooCommerce t-shirt designer

    WooCommerce t-shirt designer
    WooCommerce T-shirt configurator. Find out how to use Flexible Product Fields and let your customers design a t-shirt.

Tweet

4 minutes read5014 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 Add-Ons 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 › Sell customizable products with a free WooCommerce 3d Product Configurator

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