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.
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
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
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.
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!