1. Home
  2. Documentation
  3. WooCommerce Product Table
  4. Advanced Usage
  5. How do I change the colour of the sort arrows?

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;
}

Was this article helpful?

Related Articles