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 – 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.
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.
Add ‘quick view’ links
So far, you’ve learned how to list the components of your ‘build your own’ WooCommerce products on a single page, with an add to cart column listing all the options. That’s fine if you have a small number of options for each product. But what if you’re creating more complex ‘build your own’ systems, with many variations or product add-ons? You can see from the screenshots above that the product list will start to look cluttered if you have too many options.
If this applies to the build your own products in your store, then WooCommerce quick view is the solution:
The WooCommerce Product Table plugin featured in this tutorial is designed to work with our other plugin, WooCommerce Quick View Pro. Use the two plugins together to add a
quick-view column 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.
Other options for WooCommerce ‘build your own’ products
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 to further enhance your website:
- 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.
- 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.
- Ongoing subscriptions. If you need recurring payments, then use WooCommerce Subscriptions to sell ongoing plans. For example, you can 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 delivery area from ordering. Do this using a plugin like Postcode Based Order Restriction for WooCommerce.
- 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.)
- 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.
- 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.
- Next, create categories for the box contents. Add each option for the box contents as a separate product. Leave the price as 0 because the customer has already paid via their subscription and the products are essentially free.
- Create a new page for choosing the box contents. Add product tables listing products from these categories.
- 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.
- Only existing customers can order box contents products. This means that you need to hide the page that you created in Step 3. To do this, find the ‘Publish’ section in the top right corner and set the visibility to ‘Private’. Next, follow these instructions to edit the ‘Customer’ user role so that only logged in customers can see this page. Add the page to your navigation menu – it will be hidden from guests and will magically appear for logged in subscribers.
- If you want extra security to prevent guests from accessing the box contents products via other means (e.g. the search box on your website), then you can also install the WooCommerce Protected Categories plugin. This lets you mark the box contents categories as private so that only logged in customers can see them. If you don’t do this, then the page listing the box contents will be hidden but the products may show up in other places.
- Finally, use the Follow-Up Emails plugin to automatically email your customers at regular intervals. The emails should contain instructions on how to log into their account and order their box contents for that week/month.
Limitations of this method
The above process ensures that only customers with an account can view the page listing the products. However, any logged in customer can view and order the box contents, as the website won’t check whether they have an active subscription. This means that your internal processes will need to check each customer has an active subscription, before you send their order.
If needed, you could hire a developer to write the extra code that is needed to prevent customers without active subscriptions from ordering the box contents. If you don’t have one, then I recommend posting a job on Codeable where their pre-approved WordPress experts will send you a quote. We have partnered with Codeable to provide customization services for our plugins.
You could also ask a developer to modify the WooCommerce Account page to include a link to order/update your box contents.
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.
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.
The easy way to create a build-your-own-product order system in WooCommerce.
WooCommerce Product Table
The easy way to create a build-your-own-product order system in WooCommerce.GET THE PLUGIN
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 :)