WooCommerce Featured Category

Last night, my friend Silly from Nevada asked me about how to create an online store. My first thought about it is to use WordPress and WooCommerce for it.

The reason is simple, all of them is free to use and very simple to use. And you know what? I’m feel to be a WordPress sales person :), right now she is a new WordPress user.

For the theme, she use a free theme from WooCommerce. Since it is a free theme, there are a lot of option that you can’t have compared to the premium themes.

What she want is to displaying a specific category on the front page, to help the customer to navigate easily.

Maybe you also want this feature implemented into your own theme. To have a specific category displayed on the front page, the only way is by adding an option to your product category.

To do it, you have to open and edit a file of your theme named functions.php. At the very end of it (before you see this sign ?>), put this code:

/************* WooCommerce Featured Category **************/

add_action($custom_taxonomy.'_add_form_fields', 'colabs_add_cat_field');
add_action($custom_taxonomy.'_edit_form_fields', 'colabs_edit_cat_field', 10,2);
add_action('created_'.$custom_taxonomy, 'colabs_cat_field_save', 10,3);
add_action('edited_'.$custom_taxonomy, 'colabs_cat_field_save', 10,3);

function colabs_add_cat_field() {
  wp_enqueue_script( 'thickbox' );
  wp_enqueue_style( 'thickbox' );
  <div class="form-field">
    <label for="cat-featured">Featured</label>
    <input id="cat-featured" style="width:5%;" type="checkbox" value="true" name="cat_featured">
    <span>Use as featured category.</span>

function colabs_edit_cat_field( $term, $taxonomy ) {
  wp_enqueue_script( 'thickbox' );
  wp_enqueue_style( 'thickbox' );
  $checked ='';
  $cat_featured   = get_option('cat_featured_'.$term->term_id);
  if ('true'==$cat_featured)$checked = 'checked="checked"';
  <tr class="form-field">
    <th scope="row" valign="top"><label>Featured</label></th>
      <input id="cat_featured" style="width:auto;" type="checkbox" <?php echo $checked;?> value="true" name="cat_featured"/>
      <label for="cat_featured">Use as featured category.</label>

function colabs_cat_field_save( $term_id, $tt_id ) {
    if( $_POST['cat_featured'] ): $cat_featured = 'true'; else: $cat_featured = 'false'; endif;
    update_option('cat_featured_'.$term_id, $cat_featured );

Once you made it, your new option already created. Now, the problem is how to displaying the product category at your page.

To do it, you can put this code at any file you want the featured category displayed (index.php is recommended):

	global $custom_taxonomy, $custom_posttype,$custom_taxonomy,$plugin;
	if  ($taxonomies) {
		foreach ($taxonomies  as $taxonomy ) {
			$cat_featured ='false';
			$cat_featured   = get_option('cat_featured_'.$taxonomy->term_id);
			if ('true'==$cat_featured){
			$thumbnail_id   = get_woocommerce_term_meta( $taxonomy->term_id, 'thumbnail_id', true );
			$image = wp_get_attachment_url( $thumbnail_id );

			$height = (2 == $i) ? 399 : 195;

			if( 'woo' == $plugin ) {
				$imgsrc = vt_resize( $thumbnail_id, '', 373, $height, true );
				$imgsrc = $imgsrc['url'];

				if( !$imgsrc ) {
					$imgsrc = 'http://placehold.it/373x'.$height;
				$imgsrc = '<img src="'. $imgsrc .'">';
			} else {}

			if( !$imgsrc ) {
				$imgsrc = '<img src="http://placehold.it/373x'.$height.'">';

			echo '<div class=category-block>';
			echo '<a href="'. get_term_link($taxonomy->slug, $custom_taxonomy) .'">';
			echo $imgsrc;
			echo 	'<div class="block-text">';
			echo 		'<h4 class="cat-title">'.$taxonomy->name.'</h4>';
			echo 		'<div class="more">'. __('See Collection', 'colabsthemes') .' <i class="icon-caret-right"></i></div>';
			echo 	'</div>';
			echo '</a>';
			echo '</div>';

And done!


  • i’m not yet create the CSS code, so you have to made it your own
  • the featured product category will not be displayed unless that category already have a published product on it

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s