If you have a complex WooCommerce product page with many additional product options, you may want to hide the options until your user clicks a “Customize this product” button. When they click the button, a popup with the additional options appears.
The benefit of this approach is that your product pages remain simple and you won’t overwhelm your visitors. Moreover, you’ll have more room for other important information necessary to convince visitors to purchase your product. Only when they’re ready to purchase, will they want to customize the product.
What we’re building

We’ll create a customizable watch. Visitors will be able to build their own watch: select a strap, a watch face, and a custom seconds hand. These options will be hidden until the “Customize this watch” button is clicked. Then a popup appears containing the product options.
What you’ll need
To follow this tutorial, you’ll need:
- A store with WooCommerce (3.4.0 or higher) installed and configured. We assume this is already done on your end but just in case it’s not, you can read this article to get started with WooCommerce.
- Our Advanced Product Fields for WooCommerce plugin. This plugin is capable of adding complex options to your products.
Let’s dive in!
Step 1: Installation
Get our Advanced Product Fields for WooCommerce plugin. It lets you add complex options to products in various ways. Each option can conditionally change your final product price too! Are you wondering if you can’t do this with WooCommerce variations? We wrote an article explaining when it’s better to use variations vs. a product options plugin.
Once you’ve installed and activated the plugin on your WordPress website, navigate to WooCommerce → Settings → Product fields from the dashboard to activate the plugin.

Step 2: Create the popup framework
Now that the plugin is installed, you can add options to your product. In this step, we’ll add the framework for the popup, which consists of 2 main components:
- The Customize This Watch button
- The popup, which only appears when Customize This Watch is clicked.
We assume you already have a basic product set up in WooCommerce. Navigate to the Products admin screen and edit the product you want to add options to. Navigate to the Product fields section, which is where you’ll be working in mostly.

Adding the button
To add the Customize This Watch button, we need to add a “Text & HTML” field. Such field allows you to add extra text or HTML to your product. Here’s how you create this field:

- From the Fields box, click Add your 1st field. A new field appears on the screen.
- Set the Type to Text & HTML.
- Remove the text “New Field” from the Label setting.
- In the Content setting, add the HTML code for the button:
<a href="#" class="btn button button-open-customizer">Customize this watch</a>
Adding the popup
Next, we’ll create the configuration for the popup. Here’s how:
- Click Add a Field to add a new field.
- Set Type to Section. A section field is just a wrapper which can be used to logically group child fields together.
- In the Wrapper Attributes setting, set Class to wapf-customizer.
This is what your new field settings look like in the admin:

Add a third field:
- Click Add a Field to add another field.
- Set Type to Section end. A “Section end” field denotes where a section ends (and another can begin).
You should now have a total of 3 fields: a “text & HTML” field, a section field, and a section-end field. This looks something like this in the backend:

Let’s add our fourth and final field:
- Click Add a Field to add another field.
- Set Type to Text & HTML.
- Remove the text “New Field” from the Label setting.
- In the Content setting, add HTML code for a Close button, giving the user the ability to close the popup:
<div class="wapf-customizer-bottom"><a href="#" class="btn button button-close-customizer">Done</a></div>
Now use the drag handle on the last created field to position it in between the Section and Section End fields so that it becomes a child of the section. Here’s how your section looks in the backend:

That’s it! Your framework for the customizer popup is now ready. Click Update to save the product.
Step 3: Style the popup
The next step is to make the popup section created in step 2 look like an actual popup. Usually, a popup has a white background and a dark backdrop covering the whole page. We also have to hide it, as it should only appear when the button is clicked.
To do this, navigate to Appearance → Customize → Additional CSS and add the following code snippet:
.wapf-customizer {
padding: 25px;
background: white;
width: 96%;
max-width: 650px;
position: fixed;
z-index: 999999;
top: 3%;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 0 9999px rgba(0,0,0,0.7);
display: flex;
visibility: hidden;
opacity: 0;
transition: all .2s;
max-height: 87vh;
overflow-y: auto;
}
.wapf-customizer.active {
visibility: visible;
opacity: 1;
}
.wapf-customizer-bottom {
margin-top: 20px;
}
@media all and (max-width:768px) {
.wapf-customizer{ top:0; }
}
Code language: CSS (css)
Step 4: Open the popup when clicking the button
You need a second code snippet to open the popup when the Customize button is clicked. Add the snippet below to your theme (read here how):
add_action('wp_footer', function() {
?>
<script>
jQuery(document).on('wapf/init', function(e, $parent) {
var $customizer = $parent.find('.wapf-customizer');
$parent.find('.button-open-customizer').on('click', function(e){
e.preventDefault();
$customizer.addClass('active');
});
jQuery('.button-close-customizer').on('click', function(e) {
e.preventDefault();
var $inputs = $customizer.find(':input');
for(var i = 0; i< $inputs.length;i++) {
if( jQuery($inputs[i]).is(':hidden')) continue;
if(!$inputs[i].reportValidity())
return false;
}
$customizer.removeClass('active');
});
});
</script>
<?php
});
Code language: JavaScript (javascript)
Step 5: Adding fields to the popup
You’re almost there! All functionality for your popup is working, now you just need to add some fields inside the popup. Go back to the Custom Fields section in your Edit Product screen. The purpose of this tutorial is to create the popup, so we’ll just create a simple field to demonstrate. Click Add a field.
- Set Type to Text.
- Set Label to Test field.
Now use the drag handle on the field to reposition it in between the Section and Section End fields, similar to what you did at the end of step 2. Make sure it is the first field inside the section. The “Text & HTML” field that was already there should always come last.
Click Update to save your product page.
The final product
Phew! You’ve made it; you’re done! If you go to your product page and click the Customize button, the final version of your popup should look something like this:

Conclusion
Creating product options inside a popup is easy to do with the Advanced Product Fields for WooCommerce plugin. With a bit of creativity and the custom code snippets shared in this tutorial, it’s possible to turn your product pages into neatly configurable product popups.
It’s the feature I was looking for, thanks!
Is it possible to use this popup on many products without re-create the popup and his content for each products?
Hi Jimmy,
Yes that’s possible. If your products share the same fields, you can create them via the menu WooCommerce > Product Fields. There, you create the fields once and assign to multiple products in one go.
Hope that helps!
This works OK when using WooCommerce > Product Fields to apply to all products.
However it does not work then targeting a Product Variation. It seems the addition of the CSS class wapf-hide is causing problems.
Hi Luke,
I’ll need some more information to debug this. Can you contact us via the support form at https://studiowombat.com/request-support ? Please include screenshots of your popup configuration.
Hello, the image of the watch does not refresh?
Hi there,
Can you explain what you mean?
Hello 🙂
I want to put the fields I create in the menu WooCommerce > Product Fields inside a popup.
It is possible?
Many thanks
Yes! As long as you follow the same steps as in this guide :).
Hi, is it possible to replace the Done button with the Add to Cart button on the popup window, and remove the Add to cart button from the product page?
Hi Steve,
Anything is possible but that would require additional custom coding :-).
hello, is it possible to add a multi-step form inside the popup?
Hi there,
That’s currently not possible, sorry!
it always says “Please select some product options before adding this product to your cart.”
This sounds like something for us to look into! Please reach out to us via our technical support form here. Thanks!
Nowhere on the product page do I see a tab titled ‘custom fields’ unless you are talking about the WordPress custom fields itself and then there is no text & HTML option even when you add it. So this is either outdated or wrong.
Hi Brian,
Where the “inventory”, “shipping”, etc… tabs are, there should also be a tab “custom fields”. Note this only appears when your product is of type “simple” or “variable”. If that is not the case, our plugin is not installed or there may be a technical issue. In that case, please send us a support request.