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 and Developers
“WooCommerce Stacked Product Layout” is open source software. The following people have contributed to this plugin.Contributors
Translate “WooCommerce Stacked Product Layout” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
- 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 issues with themes that shuffle around the summary/description.
- Fix – Missing product types in plugin settings – issue 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.