jmccole83
8/28/2018 - 7:25 PM

WooCommerce | Custom Product Sort

Use the below snippet to re-create a custom Product Sort Select element in WooCommerce.

This example uses 'Semantic UI' to style, note the 'ui', 'select' and 'dropdown' classes on the select element.

Note the function on line 3 to add a hover effect to the select.

sort-products.php
content_copyfile_download
<?php global $wp; ?>
<?php $shop_page_url = home_url( $wp->request ); ?>
<script>
  $('.ui.dropdown')
  .dropdown({
  	on: 'hover'
  });

    var shopBase = '<?php echo $shop_page_url; ?>?orderby=';

    // Product sort options
    jQuery(document).ready( function() {
        jQuery('#orderby').change( function() {
        var url = jQuery(this).find(":selected").val();
        location.href = shopBase + url;
    });
})
</script> 

<form class="woocommerce-ordering" method="get">
    <p>Sort Products</p>
    <select id="orderby" name="orderby" class="orderby ui selection dropdown">
        <?php
            $catalog_orderby = apply_filters('woocommerce_catalog_orderby', array(
                'title'          => __('Sort A to Z', 'woocommerce'),
                'date'           => __('Sort by most recent', 'woocommerce'),
                'price'          => __('Sort by price: low to high', 'woocommerce'),
                'price-desc'     => __('Sort by price: high to low', 'woocommerce')
            ));
        ?>
        <option value="" disabled selected>
            Sort products
        </option>
        <?php foreach ( $catalog_orderby as $id => $name ) : ?>
        <option value="<?php echo esc_attr( $id ); ?>" <?php selected( $orderby, $id ); ?>>
            <?php echo esc_html( $name ); ?>
        </option>
        <?php endforeach; ?>
    </select>
</form>