Creating a customizable product in WooCommerce can be a great way to increase customer satisfaction and sales. By allowing customers to personalize their purchase, you provide them with a unique and tailored experience.
Advanced Product Fields For WooCommerce (APF) is a WordPress plugin that allows you to easily add form fields to your WooCommerce product pages. Customers can then select/enter data in those fields to personalize their product. This custom data is saved on the order, so store administrators can review the information provided by the customer.
Table of Contents
What Are Customizable Products?
Customizable products are products customers can personalize before adding them to their cart. By choosing from a variety of options such as colors, sizes, designs, or even uploading images, customers can create a unique version of your product.
A classic example is clothing items in different colors and sizes. But there are plenty of complex examples too, such as watch configurators or – for service products – flight bookings with meal and seat selection.
Basically, any product that requires input from your users can be classified as a customizable product.
Selling Customizable Products Advantages
There are some apparent advantages to selling customizable products. We list the 3 main ones below:
- Increased overall profits: customizable products can be more expensive than standard products, as customers are willing to pay more for a product that is tailored to their needs. This can lead to increased profits for your business.
- Better understanding of customer needs: by gathering customer information, you can get valuable insights into their preferences. You can introduce new products based on that information.
- Increased upselling and cross-selling opportunities: offering additional upselling and cross-selling options, such as gift wrapping, increases your average order value and profits without needing new products.
Introducing Advanced Product Fields For WooCommerce
If you’re using WooCommerce, you’ll know it does not have features built in to create more complex products. We recommend using a plugin to add those features to your site. Advanced Product Fields for WooCommerce (APF) is a great choice for adding forms to your product pages.
Through the plugin, you can add more than 15 different input types to your product pages, including text boxes, number fields, dropdown lists, checkboxes, radio buttons, and even date fields or file uploads.
Furthermore, APF allows you to show or hide form fields based on the values of other fields through conditional logic. The final product price can also be increased or decreased. With these features alone, you can make complex product forms.
In the rest of this article, we will go over how to create a customizable watch product. Customers will be able to select a watch face, band type, and band color. Depending on the band type they select, the price of the final product will increase.
Create The Base Product
Before we can get down to business, we need to create product in WooCommerce. To do so, follow these steps:
- Log in to the WordPress dashboard for your website.
- Navigate to the “Products” section in the sidebar and select “Add New.”
- Fill in the product details: add a product name and select a product image.
- In the “Product Data” section, set a regular price in the “General” tab. This is the lowest price for your product. Price additions will be defined later in Advanced Product Fields.
- Click the “Publish” button on the right to publish your work.
Navigate to the product on your site, and it should look similar to this:
As you can see, this is a basic product created in WooCommerce. We’d like to add our personalization options so customers can select their desired colors and band type.
Create Your First Form Field
Next, it’s time to add our first field to the product. We want customers to select their desired watch face in a visually appealing way. Clickable images are perfect for this use case.
To add a field, edit your product created and activate the “Product fields” tab in the “Product data” section. Click “Add your first field.”
You’ll notice the settings for your first field appear. We will change the following settings:
- Set the “Type” to “Image swatches.” The field type decides how to render this field on your product page. You can choose simple text fields, but even a calendar or file upload field.
- Set the Label to “Select your watch dial.” The label will appear above the field and give your user information on what the field is about.
- You can also enter a description to give users extra information, although we leave it blank for our demo.
- Turn on the “Required” setting, meaning the customer must select an option before adding the product to the cart.
- In the “Options” section, you can set all the clickable images for this field. As you can see, we offer the customer a choice between 5 different watch faces, ranging from dark to gold-plated.
When you are done, don’t forget to click “Update” on the right side to save your data on the product.
Navigate to the product on your site, and you’ll see the form field on your WooCommerce product page:
As you can see, the customer can choose between 5 watch faces. The square border around the golden watch face indicates that the customer has chosen this option.
Create All Other Fields
Now that you know how to add a form field to your WooCommerce product page, this process can be repeated to add additional form fields. In our case, we will add a field to select the wristband type and a field to select the wristband color.
Edit your product and return to the “Custom fields” section. Click “Add a field” to create a new form field. We will offer the customer a choice to select the wristband type. They can choose between metal, brushed metal, or a leather band.
Set the “Field type” to “Select list,” give your field a label, and enter the 3 possible choices in the “Options” section.
Add a new field and set the type to “Color swatches.” Like the previous field, enter a descriptive label and set the available colors in the “Options” section.
Save your product by clicking the “Update” button on the right side in the “Publish” box. Navigate to your WooCommerce product page, and you should see a page similar to this:
Using Conditional Logic To Show Or Hide Fields
When creating a product configurator, you’ll probably want certain fields to be displayed based on the value of previous fields. That’s what we call conditional logic. Let’s look at how to build this in Advanced Product Fields for WooCommerce.
For our watch example, we added silver and gold colors earlier. But these colors are typically only available for metal bands. When customers select a leather band, you’ll want to show different color options.
Edit your product again and go to the “Custom fields” section. Find the “Select band color” field we created in step 4 above. Press the “Duplicate” icon to duplicate it.
You’ll see the same field appear again. Edit it and change the 3 color choices from earlier to some other colors. Scroll down until you find the “Conditionals” setting of the field. In this section, we will define when this field should be shown.
Click “Add new rule group” and only show the field if “Leather” is selected as “Select Band Type”:
In the original (first) color field, add a conditional rule too, to show this field only if the “Select band type” value is NOT equal to “Leather.”
Now, when the customer selects “Leather” as their preferred band type, they will see different color options than if they select “Metal” or “Brushed Metal.”
Creating Customizable Products In WooCommerce
Advanced Product Fields for WooCommerce is a powerful tool for creating customizable products on your WooCommerce website. With this plugin, you can easily add extra fields to your products, such as text inputs, dropdown lists, and checkboxes, to gather important information from your customers.
Whether you run a small business or a large e-commerce store, Advanced Product Fields for WooCommerce can help you create a more personalized and efficient shopping experience for your customers. Additionally, the plugin is user-friendly, easy to install and customize, and comes with great support.
Advanced Product Fields for WooCommerce is a must-have plugin for any WooCommerce store looking to offer more customizable products.
As alternative options to APF, you can use WooCommerce visual product configurator plugins like Staggs product configurator, WP Configurator, Kickflip, etc.
| AUTHOR BIO:
Maarten B. is the founder at Studio Wombat, a WooCommerce plugin company with over 30,000 happy customers. |
DISCLOSURE: Posts may contain affiliate links. If you buy something through one of those links, I might get a small commission, without any extra cost to you. Read more about it here.