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:

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.