WooCommerce Plugin — Reorder and Reposition Product Page Layout Elements

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.

This plugin lets you modify the appearance of the product page in WooCommerce without needing to make modifications to the underlying PHP.

Download plugin .zip

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

Download plugin .zip