Creating Select Dropdown with Posts or Terms

Basically in this tutorial I am going to show you how you can create a simple <SelectControl> with posts in Gutenberg like this:

SelectControl with dynamically requested pages

Then we are going to go a little bit further and create a more interesting multi select control <FormTokenField> with post tags.

FormTokenField with dynamically requested tags

Both posts and tags we are going to request dynamically with useSelect and getEntityRecords(). Let’s dive into it right now!

Check If Current Page is a Product Category

Are you using is_category() and nothing works?… This tutorial is just for you then.

Please keep in mind, that product categories in WooCommerce are just a WordPress taxonomy product_cat. It means that it is possible to use all the conditional tags related to taxonomies as well.

But let’s begin with WooCommerce conditional tags first.

  • is_product_category() – returns true on every product category archive page,
  • is_product_category( $category ) – you can check if you are on a certain product category page just by passing an ID, slug or title of a category as an argument.

Remove Product Prices

In this tutorial I will show a correct way of removing product prices from single product pages and shop page (product archives).

There are plenty of tutorials out there that recommend you to use woocommerce_get_price_html hook which is totally wrong, because that hook is intended to edit the HTML of the price element. We are not going to hide prices with CSS as well.

WooCommerce connects product prices to hooks:

So all we need to do is to disconnect price displaying functions from these hooks!

Random Product Sorting with Pagination

There are already a couple tutorials on this website related to product sorting, you can read for example, how to change a default sorting order, how to completely remove it or how to add a custom sorting option.

Today we are going to go even further and add an option to sort products in random order and retain it during pagination.

First things first, let’s add a new sorting option. There is another tutorial about that, so you can read more if you want. Right now we are going to do it with woocommerce_catalog_orderby filter hook.

How to Remove Product Sorting Dropdown

In this tutorial I will show you how to completely remove this dropdown from the shop page and product archives:

Product sorting dropdown in WooCommerce

That’s the result we are going to achieve:

remove product sorting dropdown in WooCommerce

And we are not hiding it with CSS by the way!

Change Default Product Sorting

The default WooCommerce sorting is by “menu order”, which means manually and if a manual product order is not set, the product are going to be displayed alphabetically.

Before we continue, let me show you how to sort WooCommerce products manually, maybe it is just what you need.

Go to WordPress admin, All Products page, and there click Sorting tab. After that just use drag and drop.

Reorder WooCommerce products manually in WordPress admin

Product Sorting Options

This is a complete tutorial about product sorting options in WooCommerce.

I will show you how to hide some specific options, rename them, change the order options are being displayed and of course we are going to add our own custom product sorting.

You can find product sorting dropdown on the shop page or in the product archives.

Product sorting dropdown in WooCommerce
Product sorting options