By default, WooCommerce displays all single-product ’summary elements (price, meta, short description and form content) in a single column next to the main product image. This layout works very well with products that contain few form elements, ’such as Simple or Variable products.
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, this plugin could do the trick.
For WooCommerce versions from 3.3 onwards, the plugin adds a dedicated “WooCommerce > Product Details” section under Appearance > Customize, which allows you to enable a Stacked 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.
Note: Recent versions of Product Bundles and Composite Products offer a built-in solution that works with more themes than the Stacked Product Layout plugin: Navigate to Product Data > Components (Composite Products) or Product Data > Bundled Products (Product Bundles) and locate the Form Location option, then choose Before Tabs to stack the add-to-cart form under the main image and ’summary.
Important: The plugin may not work if your theme overrides core WooCommerce template functions, or changes the default template action hook priorities!
- Upload the plugin to the /wp-content/plugins/ directory.
- Activate the plugin through the Plugins menu in WordPress.
- Go to WooCommerce > Settings > Products > Display and configure the Force Stacked Layout option.
Contributors & Developers
“WooCommerce Stacked Product Layout” is open source software. The following people have contributed to this plugin.Contributors
Interested in development?
- Fix – “WooCommerce > Product Details” customizer section visibility.
- Fix – Compatibility for “Form Location” option, recently introduced in Composite Products, Product Bundles and Mix and Match Products.
- Tweak – Declare WooCommerce 3.4 ’support.
- Fix – Added WooCommerce 3.3 compatibility. Navigate to “Appearance > Customize” and look for the “WooCommerce > Product Details” section.
- Tweak – Enqueue styles and apply “width: 100%” rule to the ‘stacked-’summary’ div.
- Fix – WooCommerce 3.0 compatibility.
- Fix – Move the hook-in point from the
woocommerce_before_single_productaction – resolves some is’sues with themes that shuffle around the ’summary/description.
- Fix – Missing product types in plugin settings – is’sue introduced in v1.1.2.
- Tweak – Updated plugin name.
- Tweak – Added
woocommerce_full_width_add_to_cart_section_classesfilter to allow adding classes to the stacked add-to-cart container.
- Tweak – Added docblocks.
- Tweak – Front-end modifications now hooked at the
- Fix – A stray, pesky PHP warning. Shame.
- Tweak – Plugin name and description.
- Tweak – Moved settings under Settings > Products > Display.
- Fix – Static PHP notices. Ops.
- Initial version.