How To Build Your Own Product Box In WooCommerce

In the world of e-commerce, personalization is king. Imagine letting your customers curate their own “product box”—a custom bundle of items like a gift pack of assorted chocolates, a mix-and-match shirt subscription, or a DIY cupcake assortment. This not only boosts customer engagement but can skyrocket your average order value (AOV) by encouraging upsells and impulse buys.

WooCommerce, the powerhouse plugin for WordPress, makes this feasible without starting from scratch. While native WooCommerce supports basic product bundles via add-ons like the official Product Bundles extension, building truly interactive “mix-and-match” boxes often requires a specialized tool. In this guide, we’ll walk through creating your own product box bundle using the WooCommerce Mix & Match – Custom Product Boxes plugin—a flexible, customer-facing solution available on CodeCanyon. Whether you’re selling gourmet treats, apparel, or gadgets, this approach will have you up and running in no time.

Why Build WooCommerce Custom Product Boxes?

Before diving in, let’s cover the perks:

• Increased Customization: Customers pick exactly what they want, reducing returns.
• Higher Revenue: Bundles often sell at a premium, with dynamic pricing based on selections.
• Better UX: Fun, interactive builders keep shoppers on your site longer.
• Versatility: Works for physical products, and subscriptions.

No coding skills? No problem—this plugin handles the heavy lifting. For more details, see Boost Your WooCommerce Store with the Mix and Match Products Boxes Plugin

Step 1: Install and Activate the Plugin

Head over to CodeCanyon to grab the WooCommerce Mix & Match plugin.

1. Download the ZIP file after purchase.
2. In your WordPress dashboard, go to Plugins > Add New > Upload Plugin.
3. Select the ZIP file and hit Install Now, then Activate.
4. A new menu item, Mix & Match Box, appears in your sidebar—your command center.

Pro tip: Test on a staging site first to avoid live hiccups.

Step 2: Configure Global Settings

The plugin’s backend is intuitive. Navigate to Mix & Match Box > Settings to tweak site-wide options:

• Enable Filters: Turn on category or attribute-based product filtering so customers can narrow down choices (e.g., “chocolate only” in a candy box).
• Layout Options: Choose vertical (stacked items), horizontal (side-by-side), or horizontal with popup for a sleek, modal-style selector.
• Products Per Page: Set pagination for large catalogs, adjust for mobile-friendliness.

Save changes. These apply to all boxes unless overridden per product.

Step 3: Create Your First Box Product

Now, the fun part: Building the bundle itself.

1. Go to Products > Add New.
2. In the Product Data dropdown, select Box Product (a custom type added by the plugin).
3. Fill in basics: Title (e.g., “Custom Cupcake Box”), description, featured image (maybe a mockup of an empty box).
4. Switch to the Box Product Options tab:
   • Pricing: Set a base box price (e.g., $10 for the container), use add-on pricing only, or both combined.
   • Layout & Selection: Pick your layout, min/max items (e.g., 4-12 cupcakes), and columns (2-6 for grid view).
   • Filters: Assign categories or attributes to source items from (e.g., filter by flavor: vanilla, chocolate).
   • Pre-Added Items: Seed the box with defaults for inspiration.
   • Message Field: Add a “Gift Message” textarea for personalization.
   • Advanced: Enable masonry grid for visual appeal, or restrict to simple/variable products.
5. Decide if taxes apply per item or to the total bundle. For shipping, opt for per-item calculation if weights vary.

Publish the product. Voilà—your bundle is live! For a detailed tutorial please see How to Create WooCommerce Custom Product Boxes Using a Plugin Step by Step.

Step 4: Customize the Frontend Experience

Customers interact with the box on the product page, but you can embed it anywhere.

• Default Display: The builder auto-appears on the single product page. Shoppers filter items, click to add (with quantity limits), see a live preview, and hit Add to Cart.
• Shortcodes for Flexibility: Use [box_product id=123] (123 is the product ID of the box product) to embed a specific box on any page, or post. Or [box_product] on the single product page. Perfect for Elementor or Divi builders.
• Mobile Optimization: The plugin is responsive—test on devices to ensure smooth swiping and tapping.
• Visual Tweaks: Customize box colors and descriptions via CSS hooks if you’re feeling fancy.

Want to sell subscriptions? Grab the add-on plugin for WooCommerce Subscriptions compatibility.

Wrapping Up Custom Product Boxes Plugin For WooCommerce

Building a product box in WooCommerce transforms passive shoppers into active creators, driving loyalty and sales. With the Mix & Match plugin, you skip the dev headaches and launch in under an hour. Follow these steps, and watch your store bundle up the wins.

Read more articles about this plugin here: Mix and Match