How to move the catalog sorting dropdown in WooCommerce
WooCommerce is undoubtedly the best e-commerce plugin in WordPress. This statement is as much true for the users as for the developers. The plugin is so well built with all filters and hooks that making customization becomes more easier than one has ever thought.
One such incident is when I was recently investing my time in the support forum, I came across a customization where the user wanted to move the WooCommerce catalog sorting dropdown above the result count section.
With the very first look I was sure it would be the work of hooks, and it was just a matter of time before I get the concerned hooks. It only took me few seconds to get to the template and few more to get the hooks and with mins I had the solution in hand, and that’s the beauty of WooCommerce.
To move the catalog sorting dropdown above the result count section we will use the priority(third) parameter of the add action function associated with WooCommerce catalog sorting dropdown and WooCommerce result count section hooks.
We can either move the catalog sorting dropdown up or result section down. We can do this by adding the following small piece of code to the the active theme’s functions.php file, and having said that I will as always reiterate to use child theme to make these following changes.
// Moving the catalog section up
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 10 );
// Or moving result section below
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 40 );
After doing so, you may need to make some small css changes to adjust both the sections. Below is a small snippet of css to make it work in the twenty thirteen theme
float: left !important;