Title: Styling default sorting box Woocommerce
Last modified: August 24, 2016

---

# Styling default sorting box Woocommerce

 *  [DidoH](https://wordpress.org/support/users/didoh/)
 * (@didoh)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/styling-default-sorting-box-woocommerce/)
 * Hi there,
 * I have found a number of threads explaining how I can remove/hide the default
   sorting box in Woocommerce shop pages, but I would like to keep the box and style
   it to fit my brand (colours and fonts). Is this possible? What kind of CSS would
   I need?
 * Thanks
 * [https://wordpress.org/plugins/woocommerce/](https://wordpress.org/plugins/woocommerce/)

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Thread Starter [DidoH](https://wordpress.org/support/users/didoh/)
 * (@didoh)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/styling-default-sorting-box-woocommerce/#post-6133943)
 * I have managed to change the box, but not the dropdown menu.
 * This is what worked for the box:
 *     ```
       .woocommerce select.orderby {
   
       color: #455353 !important;
       background-color: #4bd8c3 !important;
       font-weight: 300 !important;
       font-family: "Times New Roman", Georgia, Serif !important;
       border-color: #4bd8c3;
       }
       ```
   
 * This is what isn’t working for the dropdown menu:
 *     ```
       .woocommerce select.orderby ul {
        color: #4bd8c3;
       }
       ```
   
 *  Thread Starter [DidoH](https://wordpress.org/support/users/didoh/)
 * (@didoh)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/styling-default-sorting-box-woocommerce/#post-6133944)
 * I don’t think the !important is necessary because border-color worked without,
   but I find it useful to use until I find the right css target class to adjust.
 *  Thread Starter [DidoH](https://wordpress.org/support/users/didoh/)
 * (@didoh)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/styling-default-sorting-box-woocommerce/#post-6133976)
 * For some reason the code that was working before is no longer working again.
 *  [c47man](https://wordpress.org/support/users/c47man/)
 * (@c47man)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/styling-default-sorting-box-woocommerce/#post-6134224)
 * DidoH did you ever figure this out? I’m stuck with the same problem.
 *  Thread Starter [DidoH](https://wordpress.org/support/users/didoh/)
 * (@didoh)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/styling-default-sorting-box-woocommerce/#post-6134225)
 * No, unfortunately not. I removed the box entirely in the end.
 *  [Peter Lawrenson](https://wordpress.org/support/users/lorro/)
 * (@lorro)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/styling-default-sorting-box-woocommerce/#post-6134226)
 * [@c47man](https://wordpress.org/support/users/c47man/)
    Please post the url to
   a relevant page.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Styling default sorting box Woocommerce’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3640790)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [custom](https://wordpress.org/support/topic-tag/custom/)

 * 6 replies
 * 3 participants
 * Last reply from: [Peter Lawrenson](https://wordpress.org/support/users/lorro/)
 * Last activity: [10 years, 8 months ago](https://wordpress.org/support/topic/styling-default-sorting-box-woocommerce/#post-6134226)
 * Status: not resolved