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

How to hide the sort arrows in the Product Tables

By default, WooCommerce Product Table will show sort arrows on the column headings to allow the user to sort the table by clicking on that column. If you wish to disable the sorting feature, i.e. prevent users clicking to sort the table, please see this article.

If you wish to simply hide the arrows but still allow sorting when clicked,  you can add the following CSS to your site. This will hide the sort arrows for all columns in the table:

.wc-product-table thead th {
    background-image: none !important;
}

To hide the arrows for individual columns only, you need to add the correct column class to the above code. For example, the title column has a class name of col-name, while the image column has a class name of col-image. To hide the sorting arrows for these two columns, use:

.wc-product-table thead th.col-name,
.wc-product-table thead th.col-image { 
    background-image: none !important; 
}

Still need help?

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

Related Articles