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:

Before

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:

wc_fw_after

As always, feel free to contribute to the plugin code on GitHub.

Kudos to James for coming up with this idea, and Bryce for his great WC Settings API tips.

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.