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 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.
To get a better idea of what the plugin does, let’s take a look at what a Composite Product looks like using the popular StoreFront theme, without any modifications:
In contrast to most Simple and Variable products, the add-to-cart form of our Composite Product is quite complex, giving a squeezed impression — there’s a lot of real estate under the main product image that we could use to spread things out a bit. So let’s put our new plugin to work! Here’s what the same product page looks like, after selecting the “Composite” type to use the new layout:
As always, feel free to contribute to the plugin code on GitHub.