Using the Gutenberg plugin on a blog is one thing: Using it on a WooCommerce site is another. So while I have been using Gutenberg since January 2018, it was only couple of months ago that I activated Gutenberg on a WooCommerce test site.
I did it when the people at WooCommerce released the WooCommerce Gutenberg Products block plugin. It was clear how to use Gutenberg to import product images into posts and pages.However, there was no ‘Gutenberg action’ on Product pages.
I thought it might be that the theme I was using was not yet G’berg compatible but it was the same on the 2017 theme, so I switched back.
I asked in the Facebook WooCommerce Help and Share group and was directed to what Mike Jolley said back in May:
Since WooCommerce is not optimised for the Gutenberg editor we’ve decided to keep the old editor for now so sites do not break when WordPress 5.0 is released. Products are not content focussed so using Gutenberg with our meta box placed awkwardly at the bottom is not ideal.
And back in February, Cladiu Lodromanean said:
It’s just temporary until we develop nice Gutenberg-compatible screens for Products/Orders/etc. When Gutenberg is merged into WP core and released we will be ready with the Products block in WooCommerce 3.4 but editing products and orders in Gutenberg will come in a future WooCommerce release.
It won’t be until next year that the people at WooCommerce will be working on using the block editor for products.Meanwhile, even on normal posts and pages, what you still cannot do is order the images with drag and drop. We are restricted to the old ordering system.
If you ask why drag/drop and the ability to move images around is important, look at it from the point of view of the site owner and a customer.
The site owner wants to present the products in the way he/she wants – maybe arranging by colour. And the customer wants to see the most relevant presentation according to the product.
The ‘old’ (current) ordering system allows site owners to list product images by:
- default sorting (custom ordering + name)
- Popularity (sales)
- Average rating
- Sort by most recent
- Sort by price (asc)
- Sort by price (desc)
You can change the order of display under custom ordering by going to WooCommerce > Settings in your WordPress admin. On the Products tab, the Display settings should be set to Default sorting (custom ordering + name). If it is not, then change it to that first.
Then, in the Products admin panel, select Sorting (see the image at the top of this article) and then drag and drop your products in the order that you’d like.
If you have got a lot of products, then it’s not realistic to drag a product up or down hundreds of rows to where you want to place it.
An alternative is to order the products in the Quick Edit menu by changing the order value. The default is zero. Change the numbers and the custom order will display the lower numbers first (negative numbers are allowed).
You can also edit the order value in the Product Data > Advanced tab on the product edit page.
Sounds good, but you have to hold the numbers in your head while you sort them.
There’s a bigger problem though, and that is that custom sorting is applied against all items and not against separate categories, and in all places where the products show.
That may not be what you want. You may want products to show up in a different order in different sections of your site.
For example, you may want to showcase eight products in a blog post and you may want to arrange them in a specific arrangement so that the order complements your text. You can do that, but then that order will apply everywhere the products show.
Only being able to arrange products by date uploaded or the ones with the most sales, etc. is a limitation that doesn’t fit with what store owners want and need. And custom ordering has its own shortcomings.
I asked James Koster of WooCommerce about the capability to drag images around. He replied saying that eventually drag/drop will be a feature, but as it had only recently been added to Gutenberg core, they are yet to work on their own implementation for the products block.