In this article, I'll show you how to implement WooCommerce car configurator in your store. I'll guide you step by step through configuration. We will use a Ford Mustang as an example.
How does WooCommerce car configurator look like?
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.
In this guide, we will use the Flexible Product Fields plugin. That's how WooCommerce car configurator looks like with this plugin:
I added a few options in this WooCommerce car configurator. You can add more if you like.
This is the basic setup. I use default styling. You can use CSS to style these fields. Also, this is the default WooCommerce theme: Storefront.
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.
WooCommerce Car Configurator - plugin
As I said earlier, you need the Flexible Product Fields plugin. It is a plugin to add extra fields to product pages.
You can download the free Flexible Product Add-Ons for free from WordPress.org or install it right from your store's plugins section searching for flexible product fields:
As a matter of fact, you will need the PRO version of the plugin for this guide. In short, the free version doesn't offer you charging customers for additional options. We will use this feature in this WooCommerce car configurator guide. We will charge customers per add-ons for the Ford Mustang they want to buy.
The free version lets you create WooCommerce car configurator after all. You can simply check out if the extra fields method fits your needs. Nevertheless, all the add-ons must be available free. Once you decide it is what you need, you can easily upgrade the plugin:
Step by step configuration
Once you have the plugin installed, you can configure it forthwith. Choose Products → Product Fields in your WordPress menu:
Next, create a new group of fields.
Here you need to provide a name of the group. It's for your purpose only. It will not show on the front-end.
Another step is to assign the group of fields. You can assign it to:
- all the products in your store or
- some category or
- a product
I assigned it to a Ford Mustang product in my store:
On the screenshot above you can see all the fields I configured. I'll guide you step by step through them.
Powertrain (radio field)
I found only one option of powertrain on the Ford.com website: 2.3L EcoBoost® Engine.
I created a radio field and configured it this way:
As you see, the Value and Label are the same.
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 order:
Transmissions (radio field)
I used the same type of field here. There are two options to choose:
- 6-Speed Manual Transmission
- 10-Speed SelectShift® Automatic Transmission
We charge additional $1,595 for the second option.
The configuration looks similarly. The only change is the Price.
Exterior (heading field)
Next field is the heading field.
There's nothing to choose by your customers.
It is a simply H2 tag you can insert on the product page. We will group checkboxes below this heading.
You can create your own 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.
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 Price for that field. This way when a customer marks the field, it will add the additional cost to the total.
EcoBoost® Performance Package (checkbox field)
The same way we configure rest of the fields:
Enhanced Security Package (checkbox field)
Wheel & Stripe Package (checkbox field)
That's all! We have implemented the fully working WooCommerce car configurator in these quick steps.
You can add other fields of different types to your car configurator. I described all fields of the Flexible Product Fields plugin in another article.
In this article, you have learned how to create a WooCommerce car configurator in your store. If you have any questions or you want to give us a feedback, use the comments section below.
Also, check out more WooCommerce extra product options use cases!