Joshua David Nelson

Bullshit Free WordPress Development

  • Services
  • Code
  • About
  • Contact

Using Font Awesome Icons for WooCommerce Grid / List Toggle

February 14, 2017 by Joshua Nelson

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 );
}
view raw filter-woocommerce-gridlist-toggle-button-output.php hosted with ❤ by GitHub

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.

Filed Under: Beginner, Plugins, WordPress Tutorials Tagged With: font awesome, woocommerce

  • Twitter
  • RSS Feed URL

About Me

I'm a WordPress Engineer. I build sleek, custom websites with WordPress and Genesis.

See my services and my recent work.

Contact me to get your project started.

Gravity Forms Plugin for WordPress Fastest WordPress Hosting

Recent Posts

  • Using Font Awesome Icons for WooCommerce Grid / List Toggle
  • Disable Blog: WordPress Gone Blog-less
  • Category (Taxonomy) Dropdown Filtered By Post Type
  • Weather in WordPress with Dark Sky
  • Fixing Your Deprecated Widget Constructors in WordPress 4.3
  • Twitter
  • RSS Feed URL
  • Code Snippets
  • My Plugins
  • Make a Payment

© Joshua David Nelson | Hand-Forged | WordPress + Genesis | Terms of Service | Legal | Contact