How to create a WooCommerce Pizza Builder with toppings configurator

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.