Product Bundles: Tabular Layout Mini-Extension

Since WooCommerce Product Bundles was introduced in 2012, the extension has grown slowly but steadily. v4.7.0 marked the introduction of optional bundled items, while v4.9.0 made it possible to define user-configurable bundled product quantities. Today, Bundles are commonly used as a powerful alternative to Grouped Products. In comparison to Grouped Products, Bundles provide:

  • greater pricing (static or content-based) and shipping (bundled or non-bundled) flexibility,
  • full support for variable products with variation filters,
  • advanced features such as optional bundled products, bundle-level discounts, min/max bundled product quantity limits and the ability to bundle multiple instances of the same product.

Until now, the front-end layout of the extension has been optimized for presenting Bundles with a relatively static content. Since the arrival of configurable quantities, we have seen an increasing amount of requests for customizing the extension to provide a user experience similar to Grouped Products, which is designed to put a strong emphasis on the quantity inputs.

To achieve this, Grouped Products rely on a plain but effective UI element: a table. The simple arrangement of product thumbnails & titles on the left and quantity inputs on the right (LTR) invites the user to configure the quantity inputs in the most obvious way, leaving very little room for doubt.

To provide a similar UX in Product Bundles without alienating existing users, we have recently written Tabular Layout, a mini-extension that relies on the recently refactored Product Bundles templating system to do exactly what is says on the tin. The mini-extension, which is available for all Product Bundles users for free, introduces a new Layout option in the Bundled Products tab, which can be used to activate a table-based layout, similar to the one found in Grouped Products.

Grab the Tabular Layout mini-extension here. Comments, questions? Any issues to report? Feel free to chime in!

New Layout setting added under the Bundled Products tab.

New Layout setting added under the Bundled Products tab.

Default layout.

Default layout.

Tabular layout activated.

Tabular layout activated.

Leave a reply

Basic HTML is allowed. Your email address will not be published.