There are so many functions that help WooCommerce to change the way the Product Category pages work by default. This page is a collection of various snippets I’ve used on various projects. Most of them can simply be dropped-in to your functions.php file, but a few do require your to make small changes depending on your exact needs. For more information on using your theme’s function.php file, read this article first.
There’s also a very nice Plugin from the WordPress repository that can help with this if you aren’t one for adding functions to your theme.
Removing "Order By" Drop-Down on WooCommerce Category Pages
It doesn’t always make sense to have a drop-down select field that allows users to sort products in different ways. This is especially true if you only have a few products. Use the code below to eliminate the drop-down sorting option.
// Remove "Order By" Drop-down
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
Set Product Per Page Display Number
You can adjust how many products are displayed per category page. Here, we’ll be setting it to display 15 products per page. Change the number 15 to your desired number.
// Set Product Per Page Display Number
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 15;' ), 20 );
Set Default Order By To Alphabetical
If you’d like to order your products sorting order to alphabetical, use the following code:
// Set Default Order By to Alphabetical
add_filter( 'woocommerce_composite_component_default_orderby', 'wc_cp_sort_by_title', 10, 3 );
function wc_cp_sort_by_title( $default_sort_function, $component_id, $composite ) {
return 'orderby';
}
Change The Number Of Products Per Row
On some occasions, you may need to change the number of products that fit per each row on your product category pages. Using the following code will limit it to 3 products per row. Simply use this code and change the 3 to whatever number works best for your web site.
// Change The Number Of Products Per Row
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 3; // 3 products per row
}
}
Hide or Change "Free!" Price Label for $0 Products
When you set a regular price for a product to $0.00, it will be displayed as “Free!”. You can remove that using the following code.
// Hide or Change "Free!" Price Label for $0 Products
add_filter( 'woocommerce_variable_free_price_html', 'hide_free_price' );
add_filter( 'woocommerce_free_price_html', 'hide_free_price' );
add_filter( 'woocommerce_variation_free_price_html', 'hide_free_price' );
function hide_free_price($price){
return '';
}
Or, if you prefer to change the word to something else, you can add your verbiage in the return value like this. Simply replace the words “Here’s My New Label” in the example below to whatever you would like it it to read.
// Hide or Change "Free!" Price Label for $0 Products
add_filter( 'woocommerce_variable_free_price_html', 'hide_free_price' );
add_filter( 'woocommerce_free_price_html', 'hide_free_price' );
add_filter( 'woocommerce_variation_free_price_html', 'hide_free_price' );
function hide_free_price($price){
return 'Here's My New Label';
}
Remove Breadcrumbs From WooCommerce
Breadcrumbs typically help add to a good user experience; however, there are instances where you may not want or need them on your WooCommerce pages. Simply drop-in the following function to remove them from your eCommerce pages.
// Remove Breadcrumbs From WooCommerce
add_action( 'init', 'jk_remove_wc_breadcrumbs' );
function jk_remove_wc_breadcrumbs() {
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}
There's a WordPress Plugin For That!
If you don’t mind using an extra Plugin on your web site, there’s a very nice one named WooCommerce Product Archive Customiser created by James Koster who has 20 plugins in the WordPress Plugin repository.
This is super simple to use. Install it and use checkboxes to enable or disable various features or select fields to change product column numbers and products per page settings.
This Plugin allows for easy changes to the following WooCommerce settings
- Change Product number in columns
- Change Products per page
- Display product count
- Display product sorting
- Display sale flashes
- Display add to cart buttons
- Display product image
- Display prices
- Display ratings
- Display new badge
- Display categories
- Display stock
