Use WooCommerce to Sell ‘Build Your Own’ Products: Veg Boxes, Hampers & More!
The great strength of WooCommerce, the world’s top e-commerce system, is its immense flexibility. While it’s widely used for simple stores, it’s also possible to use WooCommerce to create highly responsive, easy-to-use ‘Build Your Own Product’ websites.
Whether you want to sell bespoke vegetable boxes, luxury food or gift hampers, build your own pizza or burrito, build a box, or something else, you can do it with WooCommerce.
Used creatively, WooCommerce is perfect for selling custom product boxes and bespoke orders. Customers can choose from a selection of products in different categories to order a bespoke combination that is unique to them. They can view items in a user-friendly list, tick the ones they want, and add to the cart – all from a single-page WooCommerce order form.
Pretty neat, right? Below you’ll see an animation showing a WooCommerce build your own product system in action.
Best of all, it’s surprisingly easy to create a WooCommerce build your own product system using the flexible Product Table plugin to list the product options. You won’t even need to write any code :)
This tutorial will cover everything you need to know to get started on your own WooCommerce “build your own” product site. We’ll show you how to install and set-up WordPress and the required plugins, different strategies for organising and listing your products, and handy design tips to tailor the WooCommerce Product Table plugin to suit any kind of business.
Examples of WooCommerce build your own websites
First, let’s look at the types of build-your-own product that you can sell with WooCommerce. This will help you to understand the options and think about what you need for your website.
1. Build your own pizza, sandwich, wrap, burrito, or salad
A WooCommerce takeaway restaurant website might want to let customers choose fillings and build their own meal. This could be used to create a customised pizza, sandwich, sub, wrap, burrito, salad, or other customisable product box.
For example, the item choices might work as follows:
- Build your own pizza – choose your base, choose your sauce, choose your toppings, and choose your dips.
- Create your own sandwich – choose your bread, choose your fillings, choose your salads, and choose your sauces.
- Build a burrito website – choose your fillings, choose extras, and sides.
The WooCommerce build your own website would have separate lists of the different types of item – one for each category. For example, the pizza example would start with a list of bases, followed by a list of sauce choices, and so on. Customers could add as many extras as they like to the cart, all from one page.
2. Create your own gift hamper
There’s something depressing about buying a hamper as a gift when you don’t get to choose what’s in it! Whether you’re buying a food, beauty or gift hamper, it’s far better to build your own hamper with items that you know your loved one will enjoy.
You can use WooCommerce to develop a custom hamper website. This might involve creating 3 separate categories: one for the hamper or box options; one listing all the foods/gifts/cosmetics/etc to fill the hamper; and one with the padding and wrapping options. Customers can choose their options and add all the individual elements to the cart, creating their own custom gift hamper.
3. Custom meat or vegetable boxes with WooCommerce
The meat and vegetable box industry is growing rapidly as more and more people discover the benefits of local and organic food.
There are 2 main types of meat box or vegetable box website:
- Some companies use WooCommerce to sell the same weekly meat or veg box to all their customer. This contains whatever produce is currently in season, and customers can’t choose the contents. You may sell a choice of meat or vegetable boxes (e.g. Small and Large box), but there are no customisation options by individual customers. The best way to set this up is to add each box as a separate WooCommerce product (e.g. meat box, fruit box and vegetable box), with or without variations (e.g. size options). Display the products and/or variations in a table using WooCommerce Product Table. Use WooCommerce Subscriptions to get recurring revenue, as customers can sign up to receive the same box weekly, fortnightly or monthly (or at whatever regular intervals you choose).
- The other type of vegetable box scheme allows customers can selecting the items to include in the box. Instead of ordering a box with pre-defined contents, customers can view a list of available items and create a custom product box. The custom food box company will then fill each box individually, and deliver it to them. Continue reading this tutorial to learn how to set this up.
Make sure you’re clear on specifically what you’re building before proceeding.
You may also want to check out another tutorial of ours: Use WooCommerce to create a restaurant online food ordering system.
How will customers build their own product?
If you follow this tutorial to set-up your own WooCommerce build your own product system, it will work like this:
- The customer will be taken to a single page listing all the items that are available to choose from, divided neatly into sections/categories. (Or if you prefer, you can divide the process among several pages.) Each section can have basic instructions above the list of products, for example: “Please choose 1 item from each section.”
- Customers can select all the items they require. Standalone items will appear on their own row in the list. Mutually exclusive items will appear as dropdown lists so that customers can choose between them. If you use an additional Product Add-Ons plugin (more info about this below), then you can also add further options such as check boxes and custom gift messages.
- Once they have selected their items, the customer can click the ‘Add Selected to Cart’ button. This will add all the products to the WooCommerce cart with the selected options.
- Next, the customer can click through to view their selected products in the cart, view the total price, and make any changes. They can then access the checkout, enter their details and pay online.
- As the store owner, you will receive an email notification of each new order. You can then build the product containing the items they have selected, and deliver it to them as appropriate.
See it in action on our ‘Build a hamper’ plugin demo page.
What will my build-your-own WooCommerce site cost?
The great thing about selling WooCommerce build your own products is that you’ll be using the self-hosted version of WordPress. You will own your own data, and won’t have to pay high monthly charges for a hosted e-commerce platform. It also gives you more control over what your website will cost.
Here’s a list of the various elements of your WordPress WooCommerce website and what they might cost:
Your WooCommerce build your own product website
- WordPress CMS (content management system) – this powers your overall website and is 100% free of charge.
- WordPress theme – free (if you choose, you can purchase a premium WooCommerce theme for approx $65. However, the Storefront theme featured in this tutorial is free).
- WooCommerce plugin – this adds the core e-commerce functionality to WordPress and is also free.
- WooCommerce Product Table plugin – currently $75.
- Bonus: WooCommerce Product Add-Ons plugin – currently $49. You only need this if the product variation options that come built into the free WooCommerce plugin aren’t suitable. The core WooCommerce platform lets customers select customisation options from 1 or more dropdown lists. If you want further options, such as multi-select checkboxes or custom gift messages, then you’ll need the Product Add-ons plugin too.
- Any further plugins you choose to add extra functionality.
- Web hosting – ongoing cost – there are many web hosts for various price ranges. We offer premium WordPress hosting which is perfect for WooCommerce websites. If you’re outside of Europe, we recommend signing up direct with WP Engine. It’s important to choose an optimized WordPress host because it will ensure your website loads quickly, is reliable and you won’t lose sales due to downtime etc. It also comes with extra features such as backups with one-click restores, and free staging sites. Scrimping on a hosting is a false economy.
- Payment gateway fees – if your customers will be paying for their ‘build your own’ products online, then you will need a payment gateway. This will take a percentage of each sale in fees. PayPal is the easiest payment option to set up and charges are just a few per cent. If you will be receiving a lot of online orders then I’d recommend a provider with cheaper fees such as Stripe.
Total up the options you’ll need to give you an idea of the cost involved. It’s remarkable just how inexpensive it is to set up a website for your business creating “build your own” products. With those costs clear, we’ll cover how to actually create your WooCommerce “build your own” product website.
How to create a WooCommerce “build your own product” website
Building a website from scratch can be a daunting proposition, but WordPress, and its custom plugins, make it really easy.
This section will show you everything you need to know: you’ll learn how to set up WordPress and an appropriate theme, along with the plugins you need. Then, I’ll show you how to use those WooCommerce plugins to set up your product categories and tables so you can create your very own “build-a-product” page for your customers.
You don’t need any technical know-how – I’ll explain everything you need to do :)
Step 1 – Set up WordPress
First, sign up with a good WordPress web host such as WP Engine and follow their instructions to install WordPress.
Once you’ve logged into the WordPress admin for the first time, go to Appearance → Themes and install a theme. Themes are the “templates” on which all WordPress sites are built, and there are hundreds of thousands to choose from, so you can make your site look just how you want.
You can either buy a premium theme and install it, or use a good quality free theme such as Storefront. All the images in this tutorial and the accompanying video use the Storefront theme.
If you don’t like the design of Storefront, check out its many child themes which offer a good choice of themes for your website design. There’s even a child theme designed specifically for food websites!
Step 2 – Install WooCommerce
When you first activate WooCommerce, you’ll be taken to a Setup Wizard. This will walk you through the main steps to creating your online store. For example, it will auto-create your main pages such as the shop page, cart and checkout. You can choose your tax and shipping settings and set up payment gateways. You can then use the official WooCommerce documentation to make any further changes to the overall setup of your online shop.
Step 3 – Create ‘build your own product’ categories
Once you’ve set up WooCommerce, it’s time to create the categories that the ‘build your own product’ system will be divided into. First, write them down on a piece of paper to make sure it’s logical and user-friendly.
Think about the best way to group the product elements. For example, if you’re creating a ‘build a hamper’ website then you might want 3 categories: one for the box/basket, one for the contents, and one for finishing touches such as padding and bows.
Remember, you’re creating a tailored user experience: you need to take the customer on a journey to create the custom product, making one decision at a time.
Once you’ve planned a category structure, go to Products → Categories in the WordPress admin. Create as many categories as you need.
Step 4 – Plan your products
Now, it’s time to create some products. Each of the items that customers can choose as part of the “build your own” process will be a ‘product’ in WooCommerce. Again, it’s best to plan your products before adding them to the website:
- First, write a list of all the separate items that customers will be able select when building their product. Structure the list into the categories you created a minute ago. For example, if you’re building a ‘design my own pizza’ website, your list should include things like bases (deep pan base, Italian base), sauces (tomato sauce, spicy garlic sauce), toppings (pepperoni, ham, meatballs, mozzarella, goat’s cheese), and so on.
- Next, decide whether to create each item on the list as an individual product, or whether to group them into variations. I’d recommend using individual products for standalone items, and variable products for items that the customer has to choose between. For example:
- In the pizza example, the customer only needs a single pizza base, so you would add a single variable product called ‘Pizza Base’. You might then add 2 variation options to this product: ‘deep pan’ and ‘Italian’. Later, I’ll show you how to display these on an order form with a dropdown so that customers can select a base from the 2 options. (NB: with variable products, it will still sometimes be possible for customers to choose more than 1 option if they want to. However, using this format will discourage them from doing so).
- For other types of item, such as pizza toppings, the customer can choose as many as they like. It’s not an ‘either/or’ choice and the toppings aren’t dependent on each other. You should add each of these items as individual products, not as variations.
Tip – Use Add-Ons for extra product options
If variations aren’t flexible enough then you can add the options using the WooCommerce Product Add-Ons plugin instead. This has extra options such as check boxes, radio buttons, the ability for customers to add some custom text, etc.
Step 5 – Add the products
Once you’ve worked out all the products that you’ll need to create, and decided on the format, it’s time to add them to WooCommerce. Follow this process for each product:
- Go to Products → Add New in the WordPress admin.
- Add all the product data such as title, description, category, and upload a featured image.
- In the ‘Product Data’ section, choose a product type:
- Select ‘Simple Product’ if you’re creating a standalone item that can be added to the eventual WooCommerce build your own product without variations. Add a price, plus choose the stock options if you want to use stock control.
- Select ‘Variable Product’ if you’re creating several mutually exclusive items for customers to choose from (like my pizza base example in the previous section). This is slightly trickier to set up – please follow the instructions on creating attributes in the WooCommerce documentation. Once you’ve created your attributes, tick the ‘Use for Variations’ box and go to the ‘Variations’ tab. You can then select your attributes and create the variations (one for each options) with their own pricing and stock control.
- If you’re using WooCommerce Product Add-Ons to provide extra options, then you can use these with the Simple or Variable product type. An ‘Add-Ons’ tab will appear in the Product Data section, where you can create your add-ons.
- Finally, click Publish to add the product to the website.
Now comes the fun part!
Step 6 – Create a ‘build your own product’ page
It’s time to list everything on a single page or order form, so that customers can select items and build their own product. You’ll need our WooCommerce Table plugin for this:
- Buy WooCommerce Product Table and install it. (You’ll receive instructions in the confirmation email.)
- Go through the options and choose your product table defaults. These will be used whenever you create a product table, and you can override them in the individual shortcode for each table.
- Create a page (Pages → Add New) which you will use for the custom product box online order form. Add whatever information you like to this page, for example instructions and any rules/restrictions that customers should follow in selecting their products. (E.g. you might add instructions like “Choose 1 product from each category”.
- Divide the page into sub-headings – 1 for each category. For example, a ‘design my own pizza’ website might need H2 subheadings for Base, Sauce, Cheeses & Toppings.
- After each sub-heading, add this shortcode:
[product_table category="toppings" cart_button="checkbox"]. (If you selected the checkbox option on the plugin settings page, just put the closing bracket after “toppings”). Instead of toppings, add the actual ID or slug for the relevant category. (You can find the slug on the Products → Categories page, and the category ID is the number in the URL of the Edit Category page). The shortcode will list the items from each category in a product table with the default columns. There will be check boxes next to each item so that customers can select them and add to the cart.
- If you’re using variable products, you should also add variations=”dropdown” to the shortcode (unless you already selected this on the settings page). E.g.
[product_table category="toppings" cart_button="checkbox" variations="dropdown"].
- Use the WooCommerce Product Table knowledge base to customize the tables in many different ways.
Configure your product list
You’re now nearly there! The next step is to configure your product list.
Now you’ve got all your data set up, WooCommerce Product Table comes with dozens of options to get the tables looking just right for your website. For example, you can choose which columns to display in the table to make them more relevant to your store. You can change how many rows appear per page before pagination buttons appear.
If you have lots of products, you can add ways for customers to find what they want more quickly. For example, you can add filter dropdowns above each list so that customers can filter by category, tag, attribute, custom taxonomy, etc. You can also add filter widgets to the sidebar.
If you have lots of products, variations or add-ons, there’s a ‘lazy load’ option to prevent any performance issues. There are also options to control how the responsive tables adjust for customers using mobiles and tablets.
An example to get you started
As you can see, there are many options for how to list your WooCommerce build your own product inventory. The plugin demo site includes an example of a ‘Build Your Own Hamper’ WooCommerce product configuration. Here’s the shortcode that we used to create the 3 product tables on this page. It uses some pre-selected options for this type of website, for example changing the type of Add to Cart button, showing suitable columns, and hiding any extra elements that aren’t needed.
[product_table category="contents" cart_button="checkbox" variations="dropdown" columns="image,name,description,price,add-to-cart" display_page_length="false" display_search_box="false" display_reset_button="false" display_totals="false" links="none"]
Feel free to use this shortcode as a starting point. Use it once for each category – in the category section of the shortcode, replace ‘contents’ with the slug for your own categories. Read through the knowledge base to make any changes and decide which options will appeal to your customers and maximize your sales.
Other options for WooCommerce ‘build your own’ products
By now, you’ve learned how to create a fully functional website where customers can select multiple items to create a custom product bundle just for them. Before we finish, I’ll tell you about some handy plugins that can further enhance your website:
- Advanced shipping options. WooCommerce comes with built-in shipping zones and a choice of flat rate shipping options. If you’d rather charge for postage based on quantity or weight, the Table Rate Shipping plugin is perfect.
- Ongoing subscriptions. If you’re implementing a recurring payment model, then WooCommerce Subscriptions lets customers sign up to ongoing plans. For example, use this to take orders for a weekly vegetable box scheme.
- Restrict shipping to a specific area. If you only deliver locally, it’s a good idea to prevent people from outside of your catchment area from ordering via your website. You can achieve this using a plugin such as Postcode Based Order Restriction for WooCommerce.
- Restrict number of items that can be ordered from a specific category. Lots of WooCommerce build your own product websites have specific rules. For example, customers might have to order a minimum or maximum number of items from each category. The Min/Max Quantities WooCommerce plugin lets you do this and more. For example, if you want to prevent customers from ordering more than 1 product from the ‘Hamper Box’ category then you can create a group for these products and set a maximum of 1.
Get Building! How do you use “build your own” products in WooCommerce?
And there you have it! You now know everything about creating a WooCommerce build your own product page for your customers. Plus, you know doing this can be quick and easy using WooCommerce and the WooCommerce Product Table Plugin.
We looked at the advantages of allowing the customer more freedom, and some examples of the kind of businesses that can benefit. Then we went through a step-by-step guide to setting up a fully functional “build your own” product website, right from the start, to installing the required plugins, to planning and listing the products.
Designing your own site doesn’t have to be hard, no matter what sector you work in. With this simple tutorial, and some help from the most powerful e-commerce platforms on the web, you’ll be able to set up a beautiful, easy-to-use site that will attract and serve customers for years to come.
I’d love to hear how you’ve achieved a build your own system using WooCommerce. Did you use the plugins I’ve mentioned in this tutorial, or are there any good ones I’ve missed? Please add your comments below, and include a link to your site where we can see it working :)