Using Font Awesome Icons for WooCommerce Grid / List Toggle

While working on an eCommerce project the design called for using Font Awesome icons for the Grid/List Toggle button. If you aren’t familiar with James Koster‘s plugin, it’s great – I highly recommend it.

What I needed was a way to modify the basic toggle button output. The output wasn’t initially filterable, so I submitted a pull request that was merged into the plugin as of version 1.1.0. It adds filters for all the output stings, see these examples.

This update is great for a lot of purposes, but we’ll focus on my mission to start: using Font Awesome Icons!

How It’s Done

To replace the existing Dashicons with FontAwesome icons, we’ll use the gridlist_toggle_button_output filter. This filter passes three arguments: $ouptut, $grid_view, and $list_view. The $output argument is the output string we’ll be modifying, of course.

The $grid_view and $list_view arguments provide us the translated outputs for the “Grid View” and “List View” strings. These are important: if you’re using icons as the title attribute of the link, which might be used for your theme’s styling, or if you want to output an internationalized string for your buttons. If you want to drop these strings, or completely replace any outputted text (and provide translations), you can drop the two “view” arguments. Otherwise, we can use them in a similar fashion without worrying about translating them.

This snippet modifies the original output string, replacing the Dashicons with Font Awesome icons and flipping the icon order:

<?php
/**
* Filter the Gridlist button output, use Font Awesome Icons instead.
*
* Requires Grid/List plugin version 1.1.0 or greater
*
* @param string $output The output value
* @param string $grid_view The translated 'Grid View' string
* @param string $list_view The Translated 'List View' string
*
* @return string $output The filtered output value
*/
add_filter( 'gridlist_toggle_button_output', 'jdn_filter_gridlist_button_output', 10, 3 );
function jdn_filter_gridlist_button_output( $output, $grid_view, $list_view ) {
return sprintf( '<nav class="gridlist-toggle"><a href="#" id="list" title="%2$s"><i class="fa fa-list"></i> <em>%2$s</em></a><a href="#" id="grid" title="%1$s"><i class="fa fa-th"></i> <em>%1$s</em></a></nav>', $grid_view, $list_view );
}

Hope you find this useful, feel free to share your customization ideas via gist or questions in the comments. Big thanks to James Koster for the Grid / List plugin.

*Also, if you’re loving the Font Awesome icons, check out their new version and consider buying a license.

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <b> <blockquote cite=""> <cite> <em> <i> <strike> <strong> . If you'd like to include code in your post, please post it to http://gist.github.com and include a link.