Add sort by drop box on product page

[bobbingwide]

This issue originally raised as https://github.com/bobbingwide/gardenvista/issues/14

Requirement

A Sort by dropbox goes on top of the product page Price low to high Price high to low

[bobbingwide]

It would appear that the simplest solution is to add a couple of lines of code to add and remove a couple of action hooks in the theme's source file vgc\inc\woocommerce.php

add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );

woocommerce_catalog_ordering provides the drop down with 5 options.

If necessary, these can be filtered to remove Sort by popularity and Sort by latest.

woocommerce_result_count provides the result count eg

Showing 1–50 of 1132 results

this isn't required so the action's removed.

Note: I need to check why we need to also add

do_action( 'woocommerce_before_shop_loop' );

before the woocommerce_product_loop

[bobbingwide]

Regarding needing to call do_action.

• There are a couple of redundant functions; one attached to woocommerce_before_shop_loop, the other to woocommerce_after_shop_loop.
• The first set the number of products in the grid to 3.
• The second ended the div that was started.
• Since the hook was not being called these were not being run.

I imagine that the call to invoke woocommerce_before_shop_loop had been removed at some time, and this had the side effect of removing the order by drop down. Or vice-versa. Who knows?

Anyway the fix involves disabling these now redundant functions. There's no need for

add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

as this is standard WooCommerce logic.

[bobbingwide]

With VGC v1.4.0 the sort by drop box doesn't appear on the product category page eg https://gardenvista.co.uk/product-category/garden-offices/

[bobbingwide]

For the product category page we need to add

do_action( 'woocommerce_before_shop_loop' );

before

if(woocommerce_product_loop()) {

in woocommerce/taxonomy-product-cat.php

[bobbingwide]

We can also do with a little CSS to put a bottom margin to the form. Currently when you hover over the first image below it, the image partially covers the drop down when it scrolls up slightly.