Display WordPress and WooCommerce Tags as Lists

Last updated August 5th, 2022 at 11:10 am

WordPress tag widgets display tags in a tag cloud by default. Here’s how to override that default behavior; specifically, how to display WordPress and WooCommerce tags as lists.

For the Standard WordPress Tag Cloud Widget

Since WordPress 4.4, the functioning of the widget_tag_cloud_args filter hook (see here) changed in a way that I cannot adequately explain. However, what I do know is that the addition of the 'echo' => false argument somehow (counterintuitively, if you ask me) removed all the structural wrappers of the tag cloud unless one explicitly set the value of the 'echo' argument to false.

The short answer is that without passing 'echo' => false to the filter, the result is (in WordPress 4.4+) that your tag cloud (or list) will hug the left margin of the sidebar (and any title you enter in the widget will not appear). This is because the tag listing is being echoed, rather than returned for processing. Again, I wish I understood why. If you can explain this, please comment below.

The code snippet should be added to your theme’s (or child theme’s) functions.php or in a plugin. I tend to put these in a file in the mu-plugins folder.

Version One:

This version works. Note the added 'echo' => false line.

add_filter('widget_tag_cloud_args','nwb_tag_cloud_filter');
function nwb_tag_cloud_filter($args) {
	$args = array(
		'smallest' => 14, 
		'largest' => 14, 
		'format' => 'list', 
		'unit' => 'px', 
		'echo' => false, 
		);
	return $args;
}

Version Two:

This version, offered by afainu in the WordPress support forums, also works and may be preferable. That’s because it uses WordPress’ enhanced version of array_merge(), thus maintaining, rather than overwriting, the defaults.

add_filter('widget_tag_cloud_args','nwb_tag_cloud_filter');
function nwb_tag_cloud_filter($args) {
	$my_args = array(
		'smallest' => 14, 
		'largest' => 14, 
		'format' => 'list', 
		'unit' => 'px', 
		);
	$args = wp_parse_args( $args, $my_args );
	return $args;
}

For the WooCommerce Product Tags Widget

To convert the WooCommerce Product Tags Widget display from tag cloud to list, use something like this. The key here is the taxonomy argument, whose value must correspond to the slug for the WooCommerce product tag (‘product_tag’, by default).

add_filter('woocommerce_product_tag_cloud_widget_args', 'nwb_woo_tag_cloud_filter');
function nwb_woo_tag_cloud_filter($args) {
	$args = array(
		'smallest' => 14, 
		'largest' => 14, 
		'format' => 'list', 
		'taxonomy' => 'product_tag', 
		'unit' => 'px', 
		);
	return $args;
}