Dealing with Squeezed WooCommerce Product Forms
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 styling/templating pattern is much less suitable for product forms containing multiple input elements, text blocks and/or images. Complex product types, such as Product Bundles and Composite Products, often end up looking squeezed between the main image and sidebar.
Many themes include options for modifying the WooCommerce single-product template layout, sometimes even for individual products. If your theme doesn’t offer this flexibility, the WooCommerce Stacked Product Layout plugin might be your next best option.
For WooCommerce versions from 3.3 onwards, the plugin adds a dedicated “WooCommerce > Product Details” section under Appearance > Customize, which allows you to enable the modified layout and even associate specific product types with it.
If you are using an older WooCommerce version, navigate to Settings > Products > Display section, and locate the “Force Stacked Layout” option, which provides the same functionality.
To get a better idea of what the plugin does, here’s an example. This is how a Composite Product page looks like when using the popular StoreFront theme, without any modifications:
Admittedly, the add-to-cart form content looks a bit squeezed — there’s a lot of real estate under the main product image that could be utilized to spread things out a bit. Here’s the same page, after installing the Stacked Product Layout plugin and enabling the new layout:
As always, feel free to contribute to the plugin code on GitHub.
Update: Recent versions of Product Bundles and Composite Products offer a built-in workaround that works even better than the Stacked Product Layout plugin: Navigate to Product Data > Advanced and locate the Form Location option, then choose After Summary to stack the add-to-cart form under the main image and summary.