WordPress Custom Functions For WooCommerce Product Category Page

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
• Set Product Per Page Display Number
• Set Default Order By To Alphabetical
• Change The Number Of Products Per Row
• Change or Remove Price Label from “Free!” for $0 Products
• Remove Breadcrumbs From WooCommerce

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 );

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 );

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';
}

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
	}
}

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';
}

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 );
}