Styling WooCommerce Default DropDown Sort Select Field

The default dropdown select field form element is difficult to style in CSS alone – it needs a bit of jQuery love, here is a guide to add some cleaner styling to the WooCommerces default dropdown sort select field – which you can apply to any select field too.

default-select-dropdown

Default Select Sort Field

 

Then one with some jQuery magic…

Sort select field looks a little better on this one

Using select2.js

So the above select field was transformed by using select2 which has a number of features manipulating the HTML select element.

Download the latest version from Github and unzip, you need to get 2 files to get up and running..

  • dist/css/select2.min.css
  • dist/js/select2.min.js

Add these to your WordPress child themes folder and also create a select2-init.js file in your js folder – so your structure will be…

  • yourtheme/css/select2.min.cs
  • yourtheme/js/select2.min.js
  • yourtheme/js/select2-init.js

Set Up Scripts in functions.php

So here the scripts are only loaded on the WooCommerce shop and product category archive pages as I don’t want extra load time on pages when the select field is not appearing.

Select the field to target

In the selectinit.js file the WooCommere select field is targetted with the help of the .woocommerce-ordering CSS class. Further jQuery parameters can be found on the select2.js page and Github.

 

default-select-dropdown-jquery-selectize

That’s it – you can target other select fields if required and also further style the select field by editing your CSS file.

Select2 shows a search box by default at the top of the dropdown, you can remove this by adding an option into the parameters.

$('.woocommerce-ordering select').select2({
	minimumResultsForSearch: Infinity
});

 

Leave a Comment