Web Development by Solarise

The Solarise.dev Blog

WooCommerce Plugin — Reorder and Reposition Product Page Layout Elements

Blog archive Robin Metcalfe 8th October 2015

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.

New plugin for Woocommerce allowing easy modification of the product page layout

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.


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.

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

Author Image

About the author

Robin is the dedicated developer behind Solarise.dev. With years of experience in web development, he's committed to delivering high-quality solutions and ensuring websites run smoothly. Always eager to learn and adapt to the ever-changing digital landscape, Robin believes in the power of collaboration and sharing knowledge. Outside of coding, he enjoys diving into tech news and exploring new tools in the industry.

If you'd like to get in touch to discuss a project, or if you'd just like to ask a question, fill in the form below.

Get in touch

Send me a message and I'll get back to you as soon as possible. Ask me about anything - web development, project proposals or just say hi!

Please enable JavaScript in your browser to complete this form.

Solarise.dev Services

Maintenance Retainers

Min 3 hours per month, no contract

Project Planning

Get in touch to discuss your project details


Face-to-face chats. Solve your problems!