WooCommerce Plugin: Easily Reorder Product Page Elements
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.
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.
Sort and Swap
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.
Styling
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.
Notice
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.
Download and installation
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.
