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 items – 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 – this paid-for plugin lists your products in a table layout so that customers can choose and customize the options to build their box.
- 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’re nearly ready to cover how to actually create your WooCommerce “build your own” product website. But first, let’s have a quick look at 2 websites who are already using WooCommerce and product tables to sell customizable products.
Case study #1 – using WooCommerce to sell build-your-own cosmetic experience boxes
Inspire Cosmetics use the WooCommerce Product Table plugin to sell pick-your-own experience boxes of cosmetics. They’ve built a multi-step page where customers are taken through an intuitive journey to build a box. First, you choose an experience box. Second, you choose the experience box contents from 2 tables listing the cosmetics products. Third, you complete your order via the WooCommerce cart and checkout.
They used the Beaver Builder WordPress page builder plugin to create the tabbed layout. To boost performance, each tab links to a separate page but the customer has the illusion of remaining on one page for the entire process.
They also use the WooCommerce Min-Max Quantity plugin to ensure that people select the correct quantity of items for their experience box. This allows them to sell different sized boxes with the correct validation rules.
Case study #2 – using WooCommerce to sell bespoke hampers for pets
Barks and Squeaks is uses WooCommerce Product Table to sell build your own hampers for pets and their owners. Customers can quickly choose variations and create a custom gift hamper containing multiple products. You can use the filter above the table to narrow down the list, speeding up the buying process.
Now you’ve seen the build your own product system in action on 2 real websites, I’ll show you how to set it up yourself!
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.
Split the ‘build a box’ process across multiple pages
In the previous section, you learned how to add multiple product tables to a single page. Alternatively, you can split the ‘build your own product’ ordering process across several pages.
Depending on what you’re selling, this can have several benefits:
- If you have a small selection of products then it makes sense to keep everything on one page. In contrast, if you have a lot of products or options then it’s good to use multiple pages.
- It can also be better for performance, as fewer products are being loaded all at once (although WooCommerce Product Table does come with a lazy load option, which helps with page load times).
How to set it up
To create a multi-step ordering process, it’s important to make things as easy as possible for the customer. The process must be simple and intuitive. For example:
- You might add a ‘Next Step’ button under each product table, intuitively directing users to the next page after they add products to the cart.
- For even more seamless user experience, install the free WooCommerce Add to Cart Custom Redirect plugin. List your hamper/box products on the first page of the order process, and use this plugin to redirect each one to the page where you’ve listed the box contents products. Users will automatically be redirected to the correct next page, depending on which box they choose. This is an excellent option if you offer different contents products for each box. (Tip: To use this product with WooCommerce Product Table, you must ensure that the ajax_cart option is disabled. The redirection only works if the page refreshes after adding a box to the cart.)
Configure your product list
You’re now nearly there! The next step is to configure your WooCommerce 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.
Add the ‘build your own package’ to the shop and category pages
So far, I’ve talked about how to sell ‘build your own products’ on a standalone page. You can incorporate this into the navigation for your overall WooCommerce store. For example, you might include the ‘build your own’ product on the main WooCommerce shop and category pages. To do this, simply create a product called ‘Create your own gift package’ (or similar). Next, select categories for the gift package contents. Add the WooCommerce Product Table shortcode to the product description. This will list products from the gift package category on the single product page.
By now, you know how to create a website where customers can select multiple items to create a custom build your own bundle. Before we finish, I’ll tell you about some plugins that can further enhance your website.
Add ‘quick view’ links
If this applies to the build your own products in your store, then WooCommerce quick view is the solution:
quick-viewcolumn to your product tables. Customers can use this to view more images, extra information, choose options and add to the cart from a lightbox popup.
Quick view is a great way to tidy up your build your own product lists without having to take customers to a separate page for each product.
Set default quantities & quantity rules
Out of the box, all your WooCommerce products will have a default quantity of 1. Customers can choose as many of each item as you require.
Many ‘build a box’ schemes need more control over product quantities – either by changing the default quantity, or by setting quantity rules and restrictions:
- Change the default quantity The WooCommerce Default Quantity plugin makes it easy to change the initial value that appears in the quantity box for each product. Typically, a ‘build your own product’ website would want to change the default quantity to zero. This is better because it customers can select the quantity for each item scratch, and quickly add the box contents to their cart.
- Restrict number of items that can be ordered Lots of WooCommerce build your own product websites have quantity rules. The YITH WooCommerce Minimum Maximum Quantity plugin lets you set minimum and maximum quantity for each product or category. For example, you can use it to create a rule that says: “You must order more than 2 and less than 10 products from the ‘Box contents’ category”.
Can I add a fixed price for each box option, instead of charging separately for the box contents?
Some people use WooCommerce Product Table to create a ‘build a box’ website with a fixed price for each box. For example, they might offer Box A for £10 and Box B for £20. Each box contains a different number of products.
You can achieve this by using WooCommerce Product Table with the YITH WooCommerce Minimum Maximum Quantity plugin:
- Create a product for the box options, and add a price. If you want to offer a choice of boxes, then you can add these as separate products, or a single product with variations.
- Next, create a category for the box contents. Add all the options as products within this category. The price for each product should be 0.00. (You don’t need to charge for the box contents, as it’s a fixed price box.)
- Use the YITH Quantities plugin to control the minimum and maximum number of each product in the box contents category. For example, if the $15.00 box can contain up to 5 items then you should set a minimum quantity of 1 and a maximum quantity of 2.
- Also use the quantity plugin to ensure that customers cannot checkout unless their cart contains a box product. This prevents them from ordering contents without a box.
- Use WooCommerce Product Table to list products from the box contents category. To do this, use the category option to specify which products you wish to display. This will create a table listing the box contents, with each option on its own row. Customers can tick the options they require and add them to the WooCommerce cart.
To place an order, your customers will add 1 box option to their cart, along with the maximum number of box items. They will be charged for the box itself, but the box contents will not be chargeable as they are free.
A few tips
- If each box option can have a different number of items, then you will need to create a separate category for the contents of each box and set a different maximum quantity. You could then list the contents of each box as separate tables lower down the page, or even on separate pages if that would look messy – e.g. with buttons underneath the list of boxes, linking to the contents of each box. (If you want a quick way to duplicate products then I recommend the Duplicate Post plugin. If you’re cloning products and want to manage inventory across the retail and wholesale versions of each product then we recommend the Group Stock Manager plugin. This lets you share stock levels across multiple products.)
- The price for most of the box contents will be set to zero, since people have already paid for their box. However, you can increase the revenue from each box by listing some extra box items which aren’t included in the basic cost. Add a price for the chargeable variations. If people add them to the box, then the extra cost will be added to the order. It’s a nice way to increase your revenue from the ‘build a box’ scheme!
Can I sell box subscriptions, and let customers change their order each week/month?
This is possible, with a bit of extra work.
1. Create your subscription and box contents products
- First, install WooCommerce Subscriptions and create a subscription product for each box. Create a separate category for these products. Use WooCommerce Product Table to list products from this category on a public page. Customers can view the subscriptions, sign up and pay online. (Note: The subscription product is just for the ongoing subscription/membership plan – do NOT include options for choosing the box contents as part of the subscription product. You’ll create separate products for the box contents next.)
- Next, create categories for the box contents products. Add each option for the box contents as a separate product, or as variable products with a choice of options. Decide whether or not to charge for these products:
- If all products are included within the ongoing subscription plan, then leave the price of the box contents products as 0. This is because the customer has already paid via their subscription and the products are essentially free.
- If customers have to pay for each item in addition to the subscription cost, then add prices for each product.
- Alternatively, if you include some products within the basic subscription and charge extra for more expensive items, then you can do that too. If the customer selects chargeable items then they will make a one-off payment for these at the checkout, otherwise they can choose their box contents and check out for free.
- Create a new page for choosing the box contents. Use WooCommerce Product Table to list the products from these categories.
- Finally, use the Follow-Up Emails plugin to automatically email your customers at regular intervals, reminding them to order the box contents for that subscription period. The emails should contain instructions on how to log into their account and order their box contents for that week/month.
2. Restrict access to the box contents products
- Restrict what subscribers can order, and how often If you want to control how many items customers can order for their box, then you can add the YITH Woocommerce Minimum Maximum Quantity plugin. Alternatively, you can use the WooCommerce Limit Order plugin to control how often users can order the box contents – for example, once a quarter.
- Prevent non-subscribers from ordering box contents products To prevent non-subscribers from ordering the monthly/quarterly box, you need to restrict the page where you’ve listed these products. Do this using the WooCommerce Protected Categories plugin. Use it to password protect the box contents categories. Change the password regularly and use the Follow Ups plugin to email the password to active subscribers, along with a link to the hidden page.
Can people order a “build your own box” without having to pay online?
Yes, you can do this. When you set up WooCommerce, you need to choose one of the offline payment options such as payment by cheque or invoice. You can reword these to anything you like, so your customers won’t see the word ‘cheque’.
They can then place the order in WooCommerce without having to pay. You will receive an email notifying you of the order. This will contain details of the selected products and the customer’s contact details. You can then arrange payment offline in whichever way works for you.
Finally, you need to consider how you will ship the custom products to customers. The built-in WooCommerce options are fine if you’re happy to charge a flat rate for each shipping zone. Here are some further suggestions that will give you more control over shipping costs:
- Advanced shipping options WooCommerce comes with shipping zones and flat rate shipping options. If you’d rather charge for postage based on quantity or weight, use Table Rate Shipping.
- Restrict shipping to a specific area If you only deliver locally, it’s a good idea to prevent people from outside of your delivery area from ordering. Do this using a plugin like Postcode Based Order Restriction for WooCommerce, or simply list your local post codes using the built-in WooCommerce shipping zones.
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 bundle 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. We saw 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.
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 :)