Styling WooCommerce Default DropDown Sort Select Fields

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 selectWoo (based off select2.js)

So the above select field was transformed by using selectWoo which is a fork of select2 and has many features manipulating the HTML select element. Woo forked the select2 code to improve accessibility.

You don’t need to download the Github repo files as long as you have WooCommerce running, the script and styles come with the plugin but are only used in certain places such as the checkout page, however, you can use it in other select fields on your site, for example, the Woo dropdown sorting field.

 

Set Up Scripts in functions.php

The only file you need to create is a select2-init.js file and file it in your theme’s JS folder. The content for this is in the second code gist below.

Then add some script/style enqueuing in your 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.

The Woo select2 CSS is called and the select-init.js has the selectWoo as a dependency.

Select the field to target

In the select2-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 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
});

This other guide shows how to do to the dropdown styling with the actual select2 code instead.

3 Comments

  1. Nathan M White on December 1, 2018 at 1:06 am

    Can you be a little more newb friendly by specifying what fields to replace and where to find what to replace them with?
    ‘my_select_dropdown’

    I am trying to replace the product variation selection dropdown on individual products specifically. As found on this page: for “Amount”
    https://stowetoys.com/product/in-store-gift-cards/

  2. KoolPal on October 23, 2018 at 11:43 am

    Hi,

    Woocommerce already has select2 files at:
    select2.min.css -> plugins/woocommerce/assets/css
    select2.min.js -> plugins/woocommerce/assets/js/select2

    Can you please guide on how to re-use the same instead of installing select2 files again?

    • Neil Gowran on October 24, 2018 at 3:24 am

      The post has been updated to use selectWoo

Leave a Comment