In this article, I'll show you how to configure WooCommerce stamps in your store. I'll guide you step-by-step through the configuration process.
Before we start, I want to show you the final effect. I want you to know how WooCommerce stamps products would look like in your store.
Look, I configured a few options to choose by a customer:
You can see zł (PLN) as a currency. You will see your store's currency here, of course.
I didn't use any CSS styling in here. That's the default look of the fields. Also, I used the default WooCommerce theme: Storefront. You can style these fields however you want.
I decided to implement conditional logic in these WooCommerce stamps configurator. I want to give a user an ability to choose completely different options.
Conditional logic works very well. Look:
Also, when customers select own color of the case, new radio field shows up. They can choose what color they need. Why conditional logic? I don't want to show the case color picker to users who doesn't care about the color.
The fewer options, the better.
I used conditional logic for the Choose size, too:
Customers will see the number of lines that are available for the Modico model. In this example I chose Modico 5 (8 lines) and here we have 8 lines on the product page.
When customers select add-ons in WooCommerce stamps products, the calculation box shows up:
Customers will see the total cost of the stamp before they add it to the cart.
How WooCommerce stamps look in the cart?
When customers add any of WooCommerce stamps products, they will see every option they choose:
Also, you as a store manager will see it, too:
OK, are you ready to configure the WooCommerce stamps in your store?
Flexible Product Fields
First, you need the lightweight Flexible Product Add-Ons plugin. You can download it for free from WordPress.org or install it right from your store's plugins section searching for flexible product fields:
Next, choose Products → Product Fields in your WordPress menu:
Then you need to add a new field group.
Group of fields configuration
Look at the configuration screen:
I assigned the field group to a product: Modico Stamp.
In the free version of the Flexible Product Fields, you have to assign products one-by-one. However, in the PRO version, you can select either all products from a category or all products in the store.
Also, you have to buy the PRO version if you want to charge customers for the selected fields. However, you can still create the WooCommerce stamps while using the free version. You just won't be able to charge customers for additional options.
Look at all the fields I created:
There's plenty of them what may be confusing. Don't worry, I'll guide you step-by-step.
Step by step configuration
First, we have Choose size field. It's the select field type.
I set this field as Required.
In the Options, I configured what sizes customers can choose:
The plugin saves the Value in the order. The Label is what a customer sees on the product page.
Next, we have Case color. It's the select field type, too.
Pick your case color is the radio field type. However, the configuration looks familiar:
What new you can see here, is the Conditional logic. I configured here when this field shows up.
Ink color - another radio field:
Custom project field settings
OK. We have already configured almost half of the fields. The next ones will heavily use the conditional logic feature.
Do you remember how does Custom project conditional logic work?
Look at this radio field again:
When customers select Yes, then text fields show up for every line. The number of lines depends on stamp's size.
For No customers will see Describe your project textearea field.
We don't configure Conditional logic in the Custom project field. However, every next field needs the conditional logic.
I'll show you all the fields. The general configuration is almost the same for every field. The difference is in the Conditional logic settings.
First line text field:
Next, second line text field:
Third line text field configuration looks like this:
Next, fourth line text field:
Another, fifth line text field:
Sixth line text field:
Seventh line text field:
Eighth line text field:
Ninth line text field:
Tenth line text field:
The last one - Describe your project textarea field:
That's all! We have successfully configured the WooCommerce stamps.
In this article, you have learned how to configure WooCommerce stamps in your store. We're looking for your feedback in the comments section below.
Also, we have already created many more use cases such as:
- rooms booking
- catering ordering
- car configurator
- computer configurator
Check out our Flexible Product Fields Use Cases →