1. Knowledge Base
  2. WooCommerce Product Table
  3. Advanced Usage

How do I change the colour of the sort arrows?

To change the colour of the sort arrows in the table, you would need to create a new image (PNG file) for each of the sorting states – ascending and descending. The images should be 19 x 19 pixels.

You can find the current image files used in the plugin under this folder: /assets/css/datatables/DataTables-<version>/images/. The files are called ‘sort_asc.png’ and ‘sort_desc.png’.

Once you’ve created the images in the appropriate colour, save them and upload them to your site somewhere. Don’t upload them to the plugin as these will be overwritten after the next update. Instead, upload them to your child theme or to the /wp-content/uploads/ folder.

Then add the following CSS to your theme or Customizer (Appearance → Customize → Additional CSS):

table.dataTable thead .sorting_asc {
   background-image: url('...url of ascending image here...') !important;
}
table.dataTable thead .sorting_desc {
    background-image: url('...url of descending image here...') !important;
}

Still need help?

If searching the knowledge base hasn't answered your question, please contact support.

Related Articles