A drag-and-drop layout experiment
A 2015 experiment: a drag-and-drop editor for reordering WooCommerce product page elements.
This is an older piece, kept as a record. It reflects the tools and versions of its time — check the dates before relying on any specifics.
Heads up — archived post. This describes a small plugin I wrote back in 2015 and hasn't been
tested against modern WooCommerce or PHP 8, so treat it as a historical write-up rather than something to install.
The download links no longer resolve. If you want to reorder or remove elements on a WooCommerce product page today,
the supported route is the block-based product/Store editor in current WooCommerce, or hooking
woocommerce_single_product_summary in a child theme. The idea below — a drag-and-drop layout editor — is
still a nice one; the implementation is just of its time.
A Drag-and-Drop Solution for Customizing Your WooCommerce Product Layout.
Modify the order and position of the elements on the WooCommerce product page with this plugin. It provides a one-click solution for re-ordering or removing product page elements.
Download plugin .zip (no longer available)
The product page layout in WooCommerce makes extensive use of WordPress' powerful hooks functionality. This is very useful from a coding point of view, as it provides a great deal of flexibility and customisation potential.
However, for quick edits or for anyone unfamiliar with how the underlying code works, modifying the layout of the product page could be a daunting task.
I created this plugin to allow a simpler drag-and-drop approach to modifying the layout of the product page, so that structural changes could be made more easily by non-technical users (e.g. designers wishing to alter the structure of the product page code).
The animation above shows the interface, with three panels representing the main areas in which product page elements are loaded. Elements can be swapped between sections, or disabled entirely.
The main benefit of this approach is that it permits more rapid modification of the overall product page layout,
without having to manually remove/add WordPress do_action and add_action calls.
This could be useful for prototyping or experimentation on layout.
Note that modification of the product page layout on its own likely won't yield the results you're looking for.
You'll also need to apply some changes to the overall styling, and perhaps modify the theme file directly, within the
woocommerce/templates/content-single-product.php file (after copying/over-riding the template file in
your own theme directory, of course).
Even though the plugin's aim is to reduce the amount of mucking about with code required, it opens up the possibility
of making relatively straightforward changes to the HTML structure of the product page without having to make more
complicated alterations to the do_action calls within that template.
This plugin is still in early development. No guarantee can be made of proper functionality, and usage of this plugin on a live site is undertaken at the user's risk.
However, I hope that you will find it useful during WooCommerce development.
The plugin is provided here as a zip file which you can download and install directly into WordPress via the Plugins > Add New > Upload Plugin option.
After installation, you can find the drag-and-drop interface for configuring your product page layout under WooCommerce > Settings > Products (tab) > Modify Layout.
Download plugin .zip (no longer available)
All articlesI help content-rich organisations understand their data and pull it back into one place. Tell me what specific problems you're having and I'll be happy to talk solutions with you.
Tell me what specific problems you’re having and I’ll be happy to talk solutions with you.