Product Sorting & Re-Ordering for WooCommerce

Product Sorting and Re-Ordering allows you to re-order and organize your WooCommerce products within category and tag pages, using a simple, fast drag-and-drop interface.

How to rearrange products into categories, brands, or tags

↑ Back to top

In your WP Admin dashboard, go to Products > Categories, Products > Brands or Products > Tags, and select the category you wish to edit the order of products on. Once on the page, scroll past the default category settings — such as name, slug, description, and thumbnail. You will now see a new area titled Re-Order Products.

Click to activate the toggle on Enable Custom Order for this Category, this will expand to show the products listed out in their default order.

From here you can hover over an item, click and hold down on a product and drag it to another location. Once you are satisfied that you have rearranged the products to your preferred order for this category, scroll to the bottom of the page and click Update.

Toggling display options

↑ Back to top

From the category edit screen, you can also toggle a few options:

• Product Images – Turn on and off the display of the product thumbnail
• Numbering – Show the order number, which you can edit
• Pagination – Turn on and off a visual indicator of where the pagination will fall, based on your store settings

These are purely to help with managing how you interact with this tool and do not affect the front end of the website.

Reviewing categories or tags in the front-end

↑ Back to top

With Product Sorting & Re-Ordering for WooCommerce active, when browsing the front-end of the website logged in with the top bar set to visible, you will see a new icon.

If the category or tag is currently using the default ordering then the text will say Reorder, clicking this will take you directly to this section of the edit category or tag page. If the text says Edit Order and the cursor icon is green, then this category is already using a custom order – clicking to edit this will take you to the expanded box that is already active, so you can rearrange the products.

Disabling a reordered category or tag

↑ Back to top

You can turn off the custom order for a category or tag at any time simply by toggling Enable Custom Order for this Category off. This will contract the window and revert the category to the default global sorting order.

On a category like this, you will then see a message stating This Category has custom ordering data saved but not activated; this is because the data is not lost when you turn off the custom order. So you can turn this off and back on again with no fear of loss of data.

If however, you wish to permanently remove the custom order, you can activate it and then click the Restore to default text link in red. This will prompt you that the action is not reversible and if you proceed it will permanently delete the custom re-order for this category.

Page Builder Support

↑ Back to top

Product Sorting and Re-Ordering works by hooking into the default category archive query loop and so should work out of the box with page builders or plugins that also follow this logic.

Where page builders create their own archive pages and don’t use WooCommerce standardised hooks, there may be conflicts. We have written custom work-arounds to allow our plugin to work along side them. If you find a conflict, please reach out to support and we’d be happy to review the specific use-case and try to write a workaround.

Elementor

↑ Back to top

We support the main key Elementor WooCommerce widgets that allow you to use the custom order you have set for any supported taxonomy. The widgets support are; Archive Products, Products, Loop Grid & Loop Carousel. The Archive Products widget is supported out of the box and you won’t need to do anything to make that one work. The other 3 may require some configuration depending on how they are set up.

Below is the Products widget as an example.

When you add a Products widget you are able to configure the query. To begin setting up the custom ordering you will need to choose one of 3 Sources:

• Current Query
  • No other action is needed here. When used in the Elementor templating system this will show all the products for the current taxonomy and will apply the custom order if it is set
• Sale or Latest Products
  • There will be an additional setting after the Order setting called “Use custom order if available”. When this is enabled if a custom order exists the Order By setting is overridden and the custom order is used instead
  • To make it work you will also need to include what taxonomy you would like to display. In the Include By setting you will need to add Term as the chosen option. Then in the Term setting you will need to add only one support taxonomy term. If you have more than one it will not work as we cannot mix custom ordering.

The settings described above are the same for each of the Products. Loop Grid & Loop Carousel widgets.

Divi

↑ Back to top

We have added support for the shop widget when displaying product categories. Product Sorting and Re-Ordering for WooCommerce will work with the current category or a single category set out of the box.

WP Grid Builder

↑ Back to top

WP Grid Builder is a premium WordPress plugin designed to create advanced, filterable grid layouts for posts, WooCommerce products, and custom post types.

Product Sorting and Re-Ordering for WooCommerce works with WP Grid Builder out of the box with no configuration needed.

FacetWP

↑ Back to top

FacetWP is a powerful WordPress plugin that adds advanced, AJAX-based faceted search and filtering to websites.

This is a popular plugin which initially caused a conflict with Product Sorting and Re-Ordering, however this will now work out of the box.