Pizza sells. It’s beautiful, delicious, and people all over the world love it. But not everyone likes it the same way. Chances are, you know at least one person that doesn’t like pineapple or artichokes on their pizza. That’s why your WooCommerce pizza store may need a pizza builder!
If you’re running a pizza restaurant and taking online orders, you really want to offer your customers a way to build their own pizza and allow them to choose only the ingredients they like.
This tutorial will show how to do exactly that in WooCommerce.
What we’ll build – a pizza builder in WooCommerce
We’ll create a pizza builder in WooCommerce, which is basically a simple pizza product that your customer can customize to their liking through various extra options. For example, they can choose the type of crust or select which toppings they want on their pizza.
Every choice they make changes the total price of the pizza.

What you’ll need
To complete this tutorial, you’ll need the following:
- A store with WooCommerce 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. The plugin has a free version, but to finish this tutorial, you’ll need the premium version.
Let’s get started!
1. Set up your pizza product
First, we’re going to set up a blank pizza product in WooCommerce. This is the product that will contain all extra options for your customers to choose from.
In your WordPress dashboard, head over to Products > Add new
and create a simple product. Make sure to add at least the following:
- A product title. Something like
Build Your Own Pizza
will definitely entice your visitors. - A product image of a delicious looking pizza.
- A regular price product price. This will be the starting price (or base price, if you will) of your pizza. Keep in mind that the total price will be influenced by the options chosen by your customer.
Anything else is optional, such as an appealing product description, etc… Here’s what we created:

2. Advanced Product Fields for WooCommerce
For this step, you’ll need to download & install our Advanced Product Fields plugin. You need the premium version to complete this tutorial.
The Advanced Product Fields plugin allows us to create additional options for WooCommerce products. The options can be anything from a simple text field, to checkboxes, or even image selection. The options selected will also influence the final price of the product.
We’ll use this plugin to create extra fields so your customers can choose their pizza size, crust type, sauce, cheese type, and extra toppings. Of course, you are free to add other options. This is just a demo after all and your final product will be different than ours.
Adding your first pizza builder option: the “pizza size” field
Let’s add our first option to our pizza builder. We want the user to be able to choose their pizza size. Navigate back to your WooCommerce product and navigate to the Custom fields
tab:

Now click Add Field
. You’ll notice a new field is added into the list. Change the following settings:
- Type to
Single-select image swatches
which means we want to show images as options. - Label to
1. Choose your size
(or anything else you prefer). - Turn the required toggle
on
because selecting a pizza size is obligated.
This is how the field should look like so far:

Next, we’ll need to add some options. In our demo, customers can choose 3 sizes: small, medium, or large. This is what that looks like in the field’s options setting:

Click Add option
to add a new choice for your customer and edit each options settings:
- Upload an image to make it visually more appealing. We used this, this, and this icon for our 3 sizes.
- Add an option label that describes this option (“medium” for example).
- If the total product price should increase, make sure to select
Quantity based
under the Adjust pricing option. As you can see, our smallest size is included in the base price. If customers want a medium or large pizza, we will add an extra cost to the base price. - Enter a pricing amount if needed. Otherwise, leave it blank.
You’ve now created your pizza builder’s first field. You can repeat this process for the crust, sauce, and cheese options. They are similar so the process is exactly the same.
Adding the final option: pizza toppings
The final option, where customers can select their favorite toppings for their pizza, differs is also very similar to the previous step.
Basically, the process is exactly the same, but you should make sure the field type is set to Multi-select image swatches
because users can select multiple toppings for their pizza. All previous fields were of type single-select
because, for example, want your customer to select only one type of crust.
This is what your final field list should look like in your product backend screen:

You’re done. You can now update your product by clicking Update
in the publishing section.
Styling your pizza builder
If you navigate to your pizza product on your website, you’ll see that the custom options aren’t looking at their best. We can do better by styling the whole pizza builder with some custom CSS.
Please note that each WordPress theme is different. While we think the CSS code below is helpful, it may still look a bit odd with your theme. Just reach out to us to take a look and send you a fix for your specific WordPress theme!
Get your product ID
Before diving into the CSS, you’ll need to get the ID of the WooCommerce product created in step 1 of this tutorial. To do so, edit the product and check out the URL in your browser’s address bar. The ID is the number written in the URL near the word post
. In this example: ...wp-admin/post.php?post=15&action=edit
the id is 15.
Add the CSS
Now that you have your product ID, make sure to change it in the CSS code below. So specifically, change each occurrence of postid-15
into your product id postid-xx
.
You can add the CSS below to your theme by going to Appearance > Customize > Additional CSS
in your WordPress dashboard
/* make sure to change all occurences of postid-15 to your product ID */ .postid-15 .wapf-field-container{ margin-bottom:25px; } .postid-15 .wapf-field-label{ background: #666; color: white; padding: 15px; font-weight: bold; font-size: 1.4rem; text-transform: uppercase; margin-bottom:15px !important; } .postid-15 .wapf-swatch--image{ transition: all .2s; background:#e6e6e6; display:flex; align-items:center; } .postid-15 .wapf-swatch--image .wapf-swatch-label{ flex: 1; padding-left:7px; } .postid-15 .wapf-swatch--image .wapf-pricing-hint{ display:block; font-size:.8em; opacity: .8; } .postid-15 .wapf-swatch--image:hover, .postid-15 .wapf-swatch--image.wapf-checked{ border-color:#f0632b; } .postid-15 .wapf-swatch--image.wapf-checked{ background:rgba(240,99,43,.35); } .postid-15 .wapf-checked{ background-color:#ffece4; } .postid-15 .wapf-swatch--image img{ transition: all .2s; max-width:85px; } .postid-15 .wapf-swatch--image:hover img{ transform: scale(1.07); }
That’s it! Your pizza builder should look a lot better now.
Not looking great?
All WordPress themes are different, so it’s hard to write CSS code that will work everywhere. While we think our CSS code is helpful, it may still look a bit odd with your theme and may require some tweaks.
Final thoughts on the WooCommerce pizza configurator
When you want to create a pizza builder in WooCommerce, your first thought might be that it will be too complex or it needs a heavy plugin to pull off.
Advanced Product Fields for WooCommerce proves that this is not the case. The plugin makes it easy to build a pizza builder (or a product builder of any kind, really) without adding too much additional bloat to your setup.

The easiest & fastest way to set up advanced pizza products in WooCommerce
Find out more
Any chance you can share an xml file for this tutorial to get some of us started? That would be a life-safer!
Hi Moe,
We don’t have an import/export file yet but we’ll include this functionality in our plugin soon.
How do you get the ingredients added to the cart so you can see what they have selected?
When the product is added to cart, all ingredients should be shown in the cart as well. If that is not the case, it may be that your theme is overwriting the WooCommerce cart template and choosing not to include these details in the cart. To test this hypothesis, you can briefly switch themes.
If I have multiple products that require the Advanced Product fields, do I just continue on with the CSS code below each occurrence with the the new product codes?
Repeating the CSS for each product is not the best way as you’ll end up with a lot of custom CSS (which is mostly duplicated code), unnecessarily enlarging your page.
A better way would be to add a product tag to all products you want to apply the CSS to. Then replace
postid-15
with the class for that tag, usually it’sproduct_tag-your-tag-slug
whereyour-tag-slug
is the slug of your tag.Hope that helps!
did you understand what he meant about the css ? because i didn’t
Hi Peter,
If you require additional help, please fill out our technical support form here: https://www.studiowombat.com/request-support/
Thanks!
Maarten
This plugin is great however I have a concern.
Checking the pizza demo site I see that it does not fit on the cell phone screen, it is not responsive. Is it possible that the options adjust automatically and I don’t have to scroll right and left?
Thanks.
Hi Sem,
Thanks for pointing that out! We have fixed it now, can you check again? Our plugin has a setting to set how many items per row to show on tablet/mobile (see screenshot) but we forgot to set it 😊.
Hi,
Will I be able to add a tier discount based on how many toppings are selected? If a customer adds more toppings to the pizza, then each topping should get a discount.
Hi there!
That would be possible with our Extended version and formula-based pricing. It’s a bit more complex, but can be done!
Is it possible to make it a popup when clicking on select options on shop page?
With a “quick view” plugin, that’s certainly possible. Currently, we integrate with 2 quick view plugins. You can find a list of integrations here.