SteemWooCommerce pick-and-mix bundles: let customers choose items by quantity
· 5 min read
WooCommerce variations work well when your product has fixed attributes: size, colour, material. They break down when the number of choices depends on what the customer selects first. Selling a five-pack where the customer picks any five from twenty options is one of the most common patterns in gift retail, but the standard variation system has no way to express it. Each variation is a pre-enumerated row in the database, and modelling 'pick any five from twenty' would require twenty to the power of five rows. That is structurally the wrong tool for the job.
The WooCommerce Mix and Match Products extension handles this properly, including per-item stock tracking, subscription compatibility, and support for child products with their own prices. For a small shop with a fixed text list of options (the scents in a candle sampler, the flavours in a chocolate box, the cuts on a meat box), most of that feature set is overhead. What the shop actually needs is a quantity tier selector that generates the right number of item dropdowns when the customer makes a choice.
The plugin described here adds a custom product type to WooCommerce for exactly that. You define quantity tiers and their prices in the product editor, write out the item list one line at a time, and the front end handles the rest. Here is the prompt.
What one build gives you
- Custom WooCommerce product type for pick-and-mix bundles
- Quantity tier table in the product editor with per-tier pricing
- Item list defined as plain text, one item per line
- Dynamic front-end rendering: selecting a tier generates the right number of item dropdowns via JavaScript
- Selections stored as cart and order item metadata, shown in cart, checkout, and order admin
What it does not do
- Items with separate WooCommerce stock tracking per option
- Different item lists per quantity tier
- Per-item pricing within a tier
- Subscription or recurring bundle support
- Minimum-selection enforcement before Add to Cart (short follow-up prompt required)
WooCommerce Mix and Match Products does these. This covers the part most sites use.
The prompt
Loads into the composer so you can edit it first. Nothing is built, and nothing is charged, until you send it.
Build a WooCommerce plugin that registers a custom product type called Mix-and-Match Bundle using the woocommerce_product_class and woocommerce_product_types filters. Add a meta box labeled Bundle Setup on the product edit screen for this product type, containing: a quantity tier table with Add Tier and Remove Tier buttons using jQuery without page reload, where each row has a quantity number input and a price number input; and a textarea labeled Item List with helper text one item per line. Save both fields to post meta on woocommerce_process_product_meta, storing the tiers as a JSON-encoded array of objects with quantity and price keys. On the single product page for this type, remove the default add-to-cart section and output a custom form via woocommerce_single_product_summary containing: a fieldset of radio buttons, one per tier, labeled with the quantity and formatted price; a container div that JavaScript populates with the matching number of select dropdowns when a radio button is selected, each labeled Item 1, Item 2 and so on and populated with the items from the item list; and an Add to Cart button. Use wp_localize_script to pass the tier data and item list to the JavaScript. On form submission, validate that all dropdowns have a value and store the chosen tier quantity and the array of selected item values as cart item data using woocommerce_add_cart_item_data. Display the selections in the cart using woocommerce_get_item_data, persist them to order meta using woocommerce_checkout_create_order_line_item, and display them in the order admin screen. Register all hooks inside a function attached to plugins_loaded.
Why WooCommerce variations cannot model this
WooCommerce variations are enumerated upfront. Every valid combination of attributes has to exist as a row before the customer sees the product page. That works for a shirt with three sizes and four colours: twelve rows, manageable. It fails entirely for a pick-and-mix, because the combinations are not attributes of the product but free choices made at the time of purchase, and the number of choices depends on which quantity tier the customer picks.
Product add-on plugins can attach dropdown fields to a product page, and they cover the case where the number of choices is fixed and the selections do not affect the price. When the number of dropdowns must change based on a prior choice, they reach their limit. You would need one set of add-on fields hidden per tier, showing the right set via JavaScript, which is exactly what a purpose-built product type does without the workaround.
The WooCommerce Mix and Match Products extension is the right answer when your items are actual WooCommerce products with their own stock. If you sell a gift hamper where each item has inventory to track, use the extension. If your item list is a stable set of named options without separate stock, a lighter plugin that reads a textarea and renders dropdowns is the more honest fit.
What the plugin does
You create a new WooCommerce product and change its type to Mix-and-Match Bundle. A Bundle Setup meta box appears in the product editor. The first section is a quantity tier table: each row has a quantity field and a price field, and you can add or remove rows without reloading the page. The second section is an item list textarea, one item per line.
On the product page, the standard Add to Cart section is replaced by a custom form. The customer sees a set of radio buttons, one per tier, each labelled with the quantity and the price. When they select a tier, JavaScript reads the quantity for that tier and renders that many select dropdowns below it, each labelled Item 1, Item 2, and so on, and each populated with the full item list.
When the bundle is added to cart, the tier quantity and every item selection are stored as cart item metadata. The cart, checkout, and order confirmation pages each display what was chosen, and the order admin screen shows the selections alongside the line item.
Who this is for
Shops selling gift sets, samplers, or mixed packs where the items are a fixed named list: candle scents, cheese varieties, tea blends, snack flavours, bath products, seed collections. Any product where the customer picks from one consistent list and the quantity of picks determines the price.
WooCommerce stores that want pick-and-mix functionality without paying for an extension, where the items are not separate WooCommerce products requiring independent inventory.
Developers inheriting a store that approximated this behaviour with a large variation table and want to replace it with something that describes the actual intent.
Who should use the paid extension instead
If your items are actual WooCommerce products with their own stock counts, the Mix and Match Products extension tracks inventory per item inside a bundle. The plugin here does not: it treats the item list as a static menu, not as products, and has no concept of stock running out for one option.
If you need per-item pricing, subscription support, or the ability to set a different item list per quantity tier, the extension handles all of these. The plugin below does not.
If your item list changes frequently or runs to hundreds of options, the textarea approach becomes hard to manage. A managed extension with product search is worth the cost at that scale.
If you are running a store where the pick-and-mix bundle is the main product line and you need it to work reliably across a large catalogue, invest in the extension. The plugin here is the right scope for a small shop with a stable list and a preference for keeping everything self-hosted.
How to build it
Paste the prompt below into Steem. The plugin downloads as a zip and installs under Plugins > Add New > Upload Plugin. Once active, open any product, change its type to Mix-and-Match Bundle, add two or three tiers with prices, and enter a short item list. View the product page and confirm the tier selector appears. Select a tier and check that the right number of item dropdowns renders. Add the bundle to cart and verify the selections appear on the cart page.
Two follow-up prompts worth having ready: 'Prevent the customer from adding the bundle to cart unless every item dropdown has been selected' catches the case where the default empty option stays in place. 'Show the selected items as a formatted list on the order confirmation email' ensures customers have a record of what they chose.
Questions
- Can a customer pick the same item more than once?
Yes. Each dropdown is independent, so a customer choosing a three-pack can select the same item three times. If you need to prevent duplicates, that is a short follow-up prompt after the initial build.
- Does this work alongside standard WooCommerce products?
Yes. Mix-and-Match Bundle is its own product type and does not affect variable products, simple products, or any other type in the store.
- Where are the customer's selections stored?
As WooCommerce cart item metadata, then copied to order item metadata at checkout. Selections appear in the cart, on the order confirmation page, and in the order admin screen. They are not stored as separate order line items.
- What happens if I update the item list after orders have been placed?
Existing orders keep the selections recorded at the time of purchase. Only new orders see the updated item list.
- Can I configure more than three quantity tiers?
Yes. The Bundle Setup meta box lets you add as many tier rows as you need. Each tier appears as a radio button on the product page.
The prompt
Loads into the composer so you can edit it first. Nothing is built, and nothing is charged, until you send it.
Build a WooCommerce plugin that registers a custom product type called Mix-and-Match Bundle using the woocommerce_product_class and woocommerce_product_types filters. Add a meta box labeled Bundle Setup on the product edit screen for this product type, containing: a quantity tier table with Add Tier and Remove Tier buttons using jQuery without page reload, where each row has a quantity number input and a price number input; and a textarea labeled Item List with helper text one item per line. Save both fields to post meta on woocommerce_process_product_meta, storing the tiers as a JSON-encoded array of objects with quantity and price keys. On the single product page for this type, remove the default add-to-cart section and output a custom form via woocommerce_single_product_summary containing: a fieldset of radio buttons, one per tier, labeled with the quantity and formatted price; a container div that JavaScript populates with the matching number of select dropdowns when a radio button is selected, each labeled Item 1, Item 2 and so on and populated with the items from the item list; and an Add to Cart button. Use wp_localize_script to pass the tier data and item list to the JavaScript. On form submission, validate that all dropdowns have a value and store the chosen tier quantity and the array of selected item values as cart item data using woocommerce_add_cart_item_data. Display the selections in the cart using woocommerce_get_item_data, persist them to order meta using woocommerce_checkout_create_order_line_item, and display them in the order admin screen. Register all hooks inside a function attached to plugins_loaded.