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 selectize.js

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

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

  • css/selectize.css
  • js/standalone/selectize.min.js

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

  • yourtheme/css/selectize.css
  • yourtheme/js/selectize.min.js
  • yourtheme/js/selectize-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 selectize-init.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 selectize.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 the selectize.css file or writing to your own style.css file. Also the jQuery plugin comes with a few other CSS styles just enqueue some of the others instead to see some different styling the selectize.default.css is also worth a look.

 

One issue that may occur with the new select button is the height of the button changes between page load and selection of the select – this will be down to some CSS in the existing theme, you will need to hunt down the CSS and change or override, have a read of this issue raised on the GitHub repo of the project.

For the WooCommerce dropdown you can add this bit of CSS to stop the height changing…

 

.woocommerce-ordering input[type=text] {
    height: 10px;
}

Leave a Comment





%d bloggers like this: