Composite Products version 3.0 is finally here, after 12 weeks of development and a whopping 187 commits.
The new version includes many requested features and improvements targeted towards large-scale kitting applications, including:
- a redesigned, responsive front-end and back-end UI,
- multiple front-end UX refinements,
- WP_Query-based retrieval, pagination, sorting and filtering of component options,
- front-end and back-end performance optimizations,
- exclusion-based scenario definitions,
- bundled shipping improvements, and
- helpful documentation for developers.
Today, we are going to look at a cool Composite Products feature which is one of the easiest to miss.
Out of the box, Composites do not allow multiple products to be purchased under a single Component. However, this is possible using the Product Bundles extension. Let’s see how!
By default, WooCommerce places single-product summaries right next to the main product image / thumbnails section, which is ideal for displaying product descriptions, prices and meta. Add-to-cart forms are normally displayed inside the single-product summary, too, which works well when displaying Simple or Variable product forms.
However, this layout is not particularly suitable for complex product types, such as Composites or Bundles, which require much more space for their add-to-cart form content.
If you are having issues with very narrow or squeezed product add-to-cart forms, the WooCommerce Stacked Product Layout plugin can be used to move the add-to-cart form under the product image and summary section. The plugin adds a “Force Stacked Layout” option under WooCommerce > Settings > Products > Display, where you can select which product types should use the modified, full-width layout.