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

How to hide the sort arrows in 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.sorting::before,
.wc-product-table thead th.sorting::after {
    content: 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 product name 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 the name column, use this CSS:

.wc-product-table thead th.sorting.col-name::before,
.wc-product-table thead th.sorting.col-name::after { 
    content: none !important; 
}

Related Articles

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