Last week I found an amazing tool that allows for rearrangement of WooCommerce product pages. It’s often a stumbling block encountered when designing a new website – a client asking for something that isn’t technically feasible – until now!
Published in 2015, the WooCommerce Plugin – Reorder and Reposition Product Page Layout Elements does exactly what it says on the tin. Its drag-and-drop interface is a delight to use for any administrator who has been asked the dreaded question “can I have these product fields rearranged please?”
Prior to finding this, I’d often find myself deep in code, trying to amend a single-product.php file from WooCommerce in my own theme. Amending blocks of this page never worked – I always found myself hitting dead-ends where rearranging this fragile page would cause display issues on the front end. Frankly, before finding the aforementioned plugin, in my eyes it wasn’t possible to change the display of a WooCommerce product page.
From my understanding, the WooCommerce single-product page works iteratively, requiring a sequential order in how elements are displayed on the page. If an element is rendered out of order, the whole page breaks.
The Reorder and Reposition Product Page Layout Elements Plugin simply provides the one-click solution I’ve been lusting for. The drag-and-drop interface lets you modify the appearance of the product page without needing those fiddly modifications to the underlying PHP. You can select not only the order in which product fields are presented, but choose to not display some fields at all.
It goes without saying that a plugin like this does carry its risks. For one, it isn’t available on the plugins directory of WordPress, making it hard to see how well this plugin truly works. Also, the plugin appears to have been created in 2015, although at least in our case, it still works. The plugin is still in early development, according to its creator and its nature means it’s never guaranteed to work alongside your site’s setup. I would ensure backups are made of your site prior to installing a plugin like this. Once installed, however, all you need to do is amend the drag and drop interface under WooCommerce > Settings > Products > Modify Layout.
- What videos should you post on your website? - February 17, 2021
- Google Core Web Vitals: What is Cumulative Layout Shift (CLS)? - February 10, 2021
- Google Core Web Vitals: What is First Input Delay (FID)? - February 3, 2021
