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:

Before

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:

wc_fw_after

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.

9 responses to Dealing with Squeezed WooCommerce Product Forms

  1. Beate

    Hello,
    I was really happy seeing that plugin, but unfortunately its not working on my side. When I go to setting and products it only shows the field “save” and nothing else.
    Any ideas?
    Is there another way to display the products instead of one under the other in another way? Like 2 or 3 in one line?
    Thank u already and I hope for a fast reply.

    Beate

    • Manos Psychogyiopoulos Post Author

      Hey Beate,

      See http://cl.ly/image/3F2t2b090p2f

      Also, make sure you are running at least WooCommerce 2.2.0.

      To display products differently when the “Thumbnails” option style is selected, you just need to override the template files of the extension. However, that requires some coding skills.

  2. Erik

    Hey, quick question about this plugin. I downloaded it and am using it on bundled products. It gave me the full width for the products that make up bundle which awesome and very helpful. However, I also need to have the actual quantity selector and “add to cart” button moved above the product listings. This way the add to cart button wouldn’t get buried under the list of products in the bundle. The layout would be like:

    Bundle Main Image | Bundle description

    -[1]+

    Product 1
    ——————————————————————
    Product 2
    ——————————————————————
    etc…
    ——————————————————————

    Product Tabs

    Is this doable with your plugin somehow?

    Thanks!

    • Manos Psychogyiopoulos Post Author

      Hey Erik,

      Composite Products v3.0, which will be released shortly, will allow you to move individual layout elements using action hooks. When the new version is released, the documentation will be updated to include an actions/filters reference that will help you make changes such as this one.

  3. Lauren

    Hi Manos,

    I have used this plugin to move the composite information below the product but instead it makes the composite information disappear completely. Can you suggest a way to fix this?

    Thank you!

    • Manos Psychogyiopoulos Post Author

      Hey Lauren,

      The plugin should work fine with most themes. If it doesn’t work for you, please contact WooCommerce support and we’ll try to work something out for you!

  4. stefan whatcott

    I’ve tried to use this plugin to stop the composites being squashed with the Mr Tailor theme, it doesn’t seem to work, it leaves the composites In the area next to the image and adds a section below the tabs, only the section by the image works though.

    Any ideas?

    • Manos Psychogyiopoulos Post Author

      Hey Stefan,

      As you found out, it may not work with some themes that unhook/rehook single-product template contents extensively.

      There is no solution/workaround that will work with ANY theme. If your store relies on Composite / Bundle type products, then you will inevitably need to choose a theme that allows you to allocate more screen real estate for your products, or hire someone to tweak the styles of specific single-product pages depending on the type of the displayed product.

Leave a reply

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