Use WooCommerce to Sell ‘Build Your Own’ Products: Veg Boxes, Hampers & More!

Build Your Own Product Website WooCommerce

As the world’s top e-commerce system, WooCommerce lets you create any type of online store. Not many people know that you can even use WooCommerce to create ‘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.

Build your own hamper WordPress plugin

Best of all, it’s surprisingly easy to create a WooCommerce build-your-own product system. This makes it different from complex WooCommerce product configurator plugins. You can achieve the same result more easily using WooCommerce with a Product Table plugin to list the product options. You won’t even need to write any code!


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.

Build your own pizza, sandwich, wrap, burrito or salad box

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, build your own salad box, or other custom product box.

Online food ordering systemFor 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 ‘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 of each option as they like to the cart, all from one page.

Create your own 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 you know loved one will enjoy.

You can use WooCommerce to develop a custom hamper website. Create 3 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 hamper options and add all the individual elements to the cart, creating their own custom gift hamper.

Sell 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:

All customers receive the same box

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. This is NOT a build-your-own product, but I’ll give you some quick tips on how to set this up anyway!

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).

Each creates their own custom meat or vegetable box

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.

Check out our other tutorial – Use WooCommerce to create an restaurant online food ordering system.

How will customers build their own product?

Once you’ve set up your WooCommerce ‘build your own product’ system, it will work like this:

  1. 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.”
  2. 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.
  3. 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.
  4. 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.
  5. 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.

You can 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 using WooCommerce to sell ‘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:

  • WordPress CMS (content management system) – this powers your overall website and is 100% free of charge.
  • WooCommerce plugin – this adds the core e-commerce functionality and is 100% free of charge.
  • WooCommerce Product Table plugin – currently $75.
  • Any further plugins you choose to add extra functionality.
  • WordPress theme – free (if you choose, you can purchase a premium WooCommerce theme for approx $65. However, I will teach you how to sell custom product boxes using the free Storefront theme).
  • 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 optimised 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. They’ll take a percentage of your website income as fees. PayPal is the easiest payment option to set up and charges are a few %. If you will be receiving a lot of online orders then I’d recommend a provider with cheaper fees such as Stripe.

Next, I’ll talk you through how to create a WooCommerce ‘build your own’ product website.

#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, go to Appearance > Themes and install a theme. 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 for a food website!

#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.

#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.

WooCommerce Build Your Own Product CategoriesThink 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. 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.

#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:

  1. 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 deep pan base, Italian base, tomato sauce, spicy garlic sauce, pepperoni, ham, meatballs, mozzarella, goat’s cheese, and so on.
  2. 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 1 type of pizza base, so I would add a variable product called ‘Pizza Base’. I would 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. (Note: With variable products, it will still be possible for customers to choose more than 1 option of they want to. However, choosing 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.

WooCommerce Build Your Own Products List

#5 – Add the products

Once you’ve listed the products that you need to create, and decided on the format, it’s time to add them to WooCommerce. Follow this process for each product:

  1. Go to Products > Add New in the WordPress admin.
  2. Add all the product data such as title, description, category, and upload a featured image.
  3. In the ‘Product Attributes’ section, choose a product type:
    1. Select ‘Simple Product’ if you’re creating a standalone item without variations. Add a price, plus choose the stock options if you want to use stock control.
    2. 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.
  4. Finally, click Publish to add the product to the website.

Build Your Own Product Website with Variations

#6 – Create a ‘build your own product’ page

Now comes the fun part! 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 to list the products in a suitable layout:

  1. Buy WooCommerce Product Table and install it using the instructions from the confirmation email. Activate your license key on the plugin settings page.
  2. 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 customer should follow in selecting their products. (E.g. you might add instructions such as “Choose 1 product from each category”.
  3. 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.
  4. After each sub-heading, add the following shortcode:[product_table category="toppings" cart_button="checkbox"]. 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 everything they need and add to the cart.
  5. If you’re using variable products, you should also add variations=”true” to the shortcode – e.g. [product_table category="toppings" cart_button="checkbox" variations="true"].
  6. Use the instructions in the WooCommerce Product Table knowledge base to customise the tables in many different ways.

WooCommerce Product Configurator Plugin

Configure your product list

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 or variations, 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 ‘build your own product’ inventory. The plugin demo site includes an example of a ‘Build Your Own Hamper’ WooCommerce product configurator. 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="true" 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 maximise 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 ‘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.

How do you use ‘build your own’ products in WooCommerce?

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!