Mastering WooCommerce Sorting: A Beginner’s Guide to Setting Sorting Options
So, you’ve got your WooCommerce store up and running – congratulations! Now it’s time to think about the customer experience. One crucial element is how your products are displayed. Imagine walking into a clothing store where everything’s just thrown on the racks randomly. Frustrating, right? That’s why setting up proper sorting options in WooCommerce is essential for boosting sales and keeping customers happy.
This guide will walk you through how to customize your WooCommerce sorting, even if you’re a complete beginner. We’ll cover the basics and delve into more advanced options, all explained in plain English.
Why is Product Sorting Important?
Think about why you might want to sort products yourself. Here’s a breakdown of the benefits:
- Improved User Experience: Customers can quickly find what they’re looking for. Want to see the cheapest items first? Done. Looking for the newest arrivals? Easy.
- Increased Sales: Happy customers are more likely to buy. Intuitive sorting leads to easier product discovery and ultimately, more conversions.
- Control over Product Presentation: You can highlight specific products or collections by setting a default sorting method. For example, you might want to showcase your newest products during a launch.
- Mobile Optimization: On smaller screens, well-sorted products are even more important as customers have less space to scroll through.
- Default sorting (custom ordering + name): This uses the “Menu Order” attribute which you can set individually for each product and then sorts alphabetically.
- Sort by popularity: Orders products based on the number of sales. Popular products are displayed first.
- Sort by average rating: Displays products based on average customer ratings. Higher-rated products appear first.
- Sort by latest: Shows the most recently published products first. Great for showcasing Explore this article on How To Set Auto Payment On Woocommerce new arrivals.
- Sort by price: low to high: Orders products from the lowest to the highest price.
- Sort by price: high to low: Orders products from the highest to the lowest price.
Understanding the Default WooCommerce Sorting Options
Out of the box, WooCommerce provides a set of default sorting options. Here’s a quick rundown:
These options are usually displayed in a dropdown menu at the top of your shop page and category pages.
Where to Find WooCommerce Sorting Settings
Fortunately, you don’t need to dive into code to access the basic sorting settings. Here’s where to find them:
1. Go to WordPress Dashboard > Appearance > Customize.
2. In the Customizer, find and click WooCommerce > Product Catalog.
3. Under the Default product sorting dropdown, you’ll find the options listed above.
Choose the sorting option you want as your *default*. This is the order that products will be displayed in when a customer first lands on your shop or category page.
Example: If you are launching a new line of products, you would likely set the default sorting to “Sort by latest.”
Changing the Order of Sorting Options
The WooCommerce Customizer allows you to select *which* sorting options are available to customers, but not the order they appear in the dropdown. To adjust the *order*, you’ll need a bit of code. Don’t worry, it’s not as scary as it sounds!
Here’s the code snippet you’ll use (you’ll need to add this to your theme’s `functions.php` file or use a code snippets plugin):
add_filter( 'woocommerce_catalog_orderby', 'woo_custom_product_sorting' );
function woo_custom_product_sorting( $sortby ) {
$sortby[‘popularity’] = ‘Sort by popularity’;
$sortby[‘rating’] = ‘Sort by average rating’;
$sortby[‘date’] = ‘Sort by latest’;
$sortby[‘price’] = ‘Sort by price: low to high’;
$sortby[‘price-desc’] = ‘Sort by price: high to low’;
$sortby[‘menu_order’] = ‘Default sorting (custom ordering + name)’; // Keep default option for last
return $sortby;
}
Explanation:
- `add_filter( ‘woocommerce_catalog_orderby’, ‘woo_custom_product_sorting’ );`: This line tells WordPress that we’re modifying the product sorting options.
- `function woo_custom_product_sorting( $sortby ) { … }`: This defines our custom function.
- `$sortby[‘popularity’] = ‘Sort by popularity’;`: This line redefines the “Sort by popularity” option.
- The order in which you list these determines the order they appear Discover insights on How To Create Invoice In Woocommerce in the dropdown.
- `$sortby[‘menu_order’]` This is the original woocommerce default sorting parameter. When added to your custom sort order array, it allows the use of the “menu_order” value set in each product to take precedence.
How to Use the Code Snippet:
1. Backup your website! This is important before making *any* code changes.
2. Install a code snippets plugin: A popular option is “Code Snippets.” This allows you to add PHP code without directly editing your theme files. This is safer and easier to manage.
3. Add a new snippet: In the Code Snippets plugin, click “Add New.”
4. Paste the code: Copy and paste the code snippet above into the snippet editor.
5. Customize the order: Rearrange the lines inside the `$sortby` array to change the order of the sorting options. For instance, to put “Sort by latest” at the top, move that line to the beginning of the list.
6. Activate the snippet: Click “Save Changes” and then “Activate.”
7. Test your changes: Visit your shop page to see the new sorting order.
Example: Let’s say you want the dropdown to look like this:
1. Sort by latest
2. Sort by popularity
3. Sort by price: low to high
4. Sort by price: high to low
5. Sort by average rating
6. Default sorting (custom ordering + name)
Your code snippet would look like this:
add_filter( 'woocommerce_catalog_orderby', 'woo_custom_product_sorting' );
function woo_custom_product_sorting( $sortby ) {
$sortby[‘date’] = ‘Sort by latest’;
$sortby[‘popularity’] = ‘Sort by popularity’;
$sortby[‘price’] = ‘Sort by price: low to high’;
$sortby[‘price-desc’] = ‘Sort by price: high to low’;
$sortby[‘rating’] = ‘Sort by average rating’;
$sortby[‘menu_order’] = ‘Default sorting (custom ordering + name)’;
return $sortby;
}
Removing Sorting Options
Sometimes, you might want to *remove* certain sorting options. Maybe “Sort by average rating” isn’t relevant to your store because you don’t have many product reviews.
Here’s how to remove sorting options using another code snippet (again, add this to your `functions.php` file or use a code snippets plugin):
add_filter( 'woocommerce_catalog_orderby', 'woo_remove_sorting_options' );
function woo_remove_sorting_options( $sortby ) {
unset( $sortby[‘popularity’] ); // Remove “Sort by popularity”
unset( $sortby[‘rating’] ); // Remove “Sort by average rating”
// Add more unset() lines for other options you want to remove
return $sortby;
}
Explanation:
- `unset( $sortby[‘popularity’] );`: This line removes the “Sort by popularity” option from the array.
Example: To remove “Sort by popularity” and “Sort by average rating”, you’d use the code above. To remove “Sort by price: high to low” as Read more about How To Remove An Existing Facebook Connection From Woocommerce well, you’d add another line: `unset( $sortby[‘price-desc’] );`.
Adding Custom Sorting Options (Advanced)
For the more adventurous, you can even add your own custom sorting options based on product attributes, custom fields, or other criteria. This requires a deeper understanding of PHP and WooCommerce hooks.
Here’s a simplified example to give you an idea. This example adds a sorting option based on a custom field called “_my_custom_field”.
add_filter( 'woocommerce_catalog_orderby', 'woo_add_custom_sorting' ); add_filter( 'woocommerce_get_catalog_ordering_args', 'woo_get_custom_sorting_args' );
function woo_add_custom_sorting( $sortby ) {
$sortby[‘my_custom_field’] = ‘Sort by Custom Field’;
return $sortby;
}
function woo_get_custom_sorting_args( $args ) {
$orderby_value = isset( $_GET[‘orderby’] ) ? wc_clean( $_GET[‘orderby’] ) : apply_filters( ‘woocommerce_default_catalog_orderby’, get_option( ‘woocommerce_default_catalog_orderby’ Read more about How To Set Product As Featured In Woocommerce ) );
if ( ‘my_custom_field’ == $orderby_value ) {
$args[‘orderby’] = ‘meta_value_num’; // Order by numeric meta value
$args[‘meta_key’] = ‘_my_custom_field’; // The custom field key
}
return $args;
}
Important: This is a very simplified example. You’ll need to adapt the code based on the type of custom field and how you want to sort the products. Consult with a developer if you’re unsure.
Testing and Refining Your Sorting
Once you’ve implemented your desired sorting options, test, test, test!
- Browse your store as a customer.
- Try different sorting options to make sure they work as expected.
- Ask for feedback from friends or colleagues.
- Monitor your sales and user behavior to see if the changes are having a positive impact.
By carefully configuring your WooCommerce sorting options, you can create a more enjoyable and efficient shopping experience for your customers, leading to increased sales and customer satisfaction. Good luck!
