How to display product options in a popup in WooCommerce

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:

1. The Customize This Watch button
2. 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:

1. From the Fields box, click Add your 1st field. A new field appears on the screen.
2. Set the Type to Text & HTML.
3. Remove the text “New Field” from the Label setting.
4. 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:

1. Click Add a Field to add a new field.
2. Set Type to Section. A section field is just a wrapper which can be used to logically group child fields together.
3. 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:

1. Click Add a Field to add another field.
2. 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:

1. Click Add a Field to add another field.
2. Set Type to Text & HTML.
3. Remove the text “New Field” from the Label setting.
4. 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.

1. Set Type to Text.
2. 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.