WooCommerce Featured Products Ultimate Guide

One of the best way to setup a collection of rock-star products in WooCommerce is to set them as featured product. WooCommerce featured products are not different from regular products in terms of features, shipping, functionalities. Any product can be a featured in WooCommerce and the decision is totally up to you (it’s different from best selling products, which are determined by your customers). In this post, I’m going to show you:

  1. Three ways to make a product as featured product
  2. How to remove a product from being a featured product
  3. How to display the featured products via shortcode
  4. How to display featured products in a slider

Sounds cool? Let’s get started.

Three ways to make a featured product in WooCommerce

Mark a product as featured product in Products list

The first way to make a product as featured product in WooCommerce is to go to Products->All products:

Most of the time, you can see the column without a title but stars. That’s the featured column. Simply click on the start to mark it as featured product.

When you click on the star, the blank star will be filled and the filled star will be blank:

As you can see, it takes a moment for the status to update since the page need to reload. That’s the quickest way to mark a product as featured product or not.

Oh, I don’t see the stars column!!!

If you don’t see that column (with the stars), simply click on Screen Options button (at the top right of your screen corner) and check the box says Featured:

Make sure you hit the apply button to see the changes.

Mark a product as featured product in Quick Edit

The second way to make a product become featured product is through the quick edit menu. Under every product, you will see the Quick Edit link at the right of Edit link. Click on that and you’ll see this:

Simply click on the Featured checkbox to make it featured product. Uncheck it to remove it from featured products.

Mark product as WooCommerce featured product in product’s edit page

The third and final way to make a product featured product is through its edit page.

In the product Edit page (you get to this page either by click the Edit link under the product in Products page or the Edit product option at the top of the product page), look at the top right (in the Publish box), there is an option called Catalog visibility:

Let’s click on the Edit link under Catalog visibility, you’ll see this:

Well, you probably know what to do next. Simply check the box says: This is a featured product and then click OK.

Display featured products anywhere with WooCommerce shortcode

To display the list of featured products, you can use the shortcode below:

[products limit="4" columns="2" visibility="featured" ]

What this shortcode does is it will show 4 products in two columns and products are featured products.

Now, if you want to increase or decrease the number of featured products per row, simply modify the number in the columns field.

For example, you can display all WooCommerce featured products available in your store in 3 columns, you can use the shortcode below:

[products columns="3" visibility="featured" ]

Simply removing the limit field make the shortcodes display all products.

Where to place this shortcode? You might ask? You can put this shortcode anywhere in your pages/posts.

Display featured products in sidebar

With the shortcode, you can display any kind of products anywhere, including in the sidebar. So, I’m going to use the shortcode above (three products, no limit) to put on my sidebar.

Let’s go to Appearance->Widget and drag in a text widget and paste the shortcode in:

display featured products in a sidebar

Now, if I go and view my website, I’ll see the featured products on the sidebar. Since the sidebar is narrow, there is only one product per line and all the products stack one each other to form a very tall column:

woocommerce featured products in the sidebar

At this point, you may wonder if we can display the featured product in a slider so the user can swipe left and right without scrolling very long. Well, of course we can. However, we need a plugin for that. Fortunately, I’ve made a plugin to help you display not just the featured products but all kind of WooCommerce products in a slider. You can checkout the WooCommerce Slider Plugin here

Conclusion

Featured products can offer some flexibility to the way you show your products to your visitors. The good thing about the featured products is you can control what products are featured, unlike best selling products. Using featured products right can increase sales for your store. If you have questions related to this topic, don’t hesitate to leave a comment below.

 

 

Want One More WooCommerce Secrets?

I never spam, only quality info that benefits you!

The Ultimate Guide To WooCommerce Grouped Products

Alongside simple product, variable and affiliate product, grouped product is one of the four default product type of WooCommerce. Knowing how to use WooCommerce grouped product can help you deliver much more flexible product choices for your customers. In this post, let’s discover what WooCommerce Grouped product is and how it can help you grow your store.

 

What is WooCommerce grouped product?

Grouped product, as its name suggest, is a product that consists of a group of other products. You can think of grouped product as a container of other WooCommerce products. In real life, you see grouped products under the name of combo, set… For example, a BBQ combo may have one dish or tuna, two beer and two dishes of beef. Those individual can be sold individually. However, the guys at the marketing department may suggest that we create these combos to improve sales for our stores.

Why do you want to use grouped product instead of simple product

One good reason to use grouped product is to increase sales of more than one single item as mentioned above. Another good use case of group product is to sell products that usually go together. Computer set is an example. Many times people buy individual parts like monitor, keyboard, mouse… However, the people are very frequently shop for computer set instead of shopping individually.

How to create a grouped product

Creating a grouped product is very simple, especially with WooCommerce. Here are the steps to create a simple grouped product. Let’s go ahead and create a computer set:

First, let’s go to Products -> Add new

create a grouped product in woocommerce

Now, when you change the product type to Grouped product, you will see the field for price and sale price disappear! Don’t freak out. It makes sense since the price of the grouped product is the combination of its children’s price. You will also see the shipping tab disappear for the same reason.

Other than that, you will see that grouped product is similar to simple product. You can enter short description, long description, adding products feature images, gallery images as usual.

enter details for grouped product

After entering all the needed data, it’s time to publish the grouped product and have a look at its product page:

woocommerce grouped product

You may notice that there isn’t an add to cart button. The reason is simple. There isn’t anything to purchase yet. The next step is to add child products to this grouped product.

 

How to add single products into  a grouped product

Adding single products to a grouped products is simple. You need to make sure that you have all the individual products ready first. In this example, I have four simple products ready to add as below:

simple products in a grouped product

 

Now, let’s go to our newly created WooCommerce grouped product, then scroll down, click on Product data tab if it hasn’t been expanded already. Finally, click on Linked product:

adding simple products to grouped products - step 1

Now, let’s click on the Grouped products input box and start typing the product name. You will see the suggestions as you type:

adding simple products to grouped products - type suggestions

As you can see, as I typed UHD, the suggestion for the screen appear. Just click on the result to have it added to the grouped product.

After add all the products to the grouped product, you will see it appears like this:

adding simple products to grouped products - step 3

Hit the update button and let’s see the grouped product page:

woocommerce grouped product with child products

As you can see that, all child products are listed here. For the customer, he just need to enter the number of items per child product and begin to check out.

But wait!

Isn’t it silly to make the customer enter the number of parts when most of the time, the number should be 1?

You only need

  • one monitor
  • one keyboard
  • one case

per computer.

Well, if you ever wonder the same thing, you may want a different type of product called product bundle.

 

 

Use variable product in grouped product

At this point, you now how to create a grouped product and add single child products to that grouped product. You may wonder, can you add variable products to the grouped product instead of simple products? The answer is yes. However, without using any plugin, you may end up with something like this:

variable product inside grouped product

When you click on the select options button, you will get the that variable product page and you add the product to cart from that variable product’s page.

I’m not sure about you but that flow is not convenient for the customer.

So, it’s definitely possible to use variable product inside grouped product. However, in my personal opinion, it is not very convenient for your customers to go to extra steps to add the product to cart.

Ordering child products inside grouped product

In my example, you can see that the Samsung monitor is listed first then the case, then the keyboard and finally the mouse. You may wonder, how does WooCommerce sort these products and how can  you change their order?

For example, I want to list the mouse first, then the keyboard, then the monitor and finally the case, how can I do that?

It actually very simple.

Now, go to our grouped product and go to Product Data->Linked products:

You’ll notice the child products are in a list. You maybe surprised to find that every items on that list is draggable!

So, let’s re-arrange our child products:

After clicking on update product, I can see the product page with new ordering:

new products order in woocommerce grouped products

Show images for single products

At this point, your WooCommerce grouped product is looking good. However, you may notice that individual products in the grouped product don’t have product’s image. What if you want to add the products’ thumbnail just before the product name?

It’s time to add some code. You know where to put the custom code? In a child theme, of course. You must remember to add additional code in a child theme. You don’t know what a child theme is? Check out my ultimate guide to child theme in WordPress. Don’t worry, it’s short.

Now, let’s enter the following code at the end of your child theme functions.php file:

add_action( 'woocommerce_grouped_product_list_before_label', 'bc_woocommerce_grouped_product_thumbnail' );

function bc_woocommerce_grouped_product_thumbnail( $product ) {
    $attachment_url = wp_get_attachment_image_src($product->get_image_id(), 'thumbnail', false)[0];
    ?>
    <td class="label">
        <img src="<?php echo $attachment_url; ?>" />
    </td>
    <?php
}

Then save the file. Now, if you view the grouped product page, you’ll see this:

display single product thumbnail in grouped product with woocommerce

It looks better, doesn’t it?

Now, what if you want to display the thumbnail before the quantity box?

No problem, let’s replace the old code with this one:

add_action( 'woocommerce_grouped_product_list_before_quantity', 'bc_woocommerce_grouped_product_thumbnail' );

function bc_woocommerce_grouped_product_thumbnail( $product ) {
    $attachment_url = wp_get_attachment_image_src($product->get_image_id(), 'thumbnail', false)[0];
    ?>
    <td class="label">
        <img src="<?php echo $attachment_url; ?>" />
    </td>
    <?php
}

The only change is the part after add_action. In the previous code, the text right after the opening ( is ‘woocommerce_grouped_product_list_before_label’. Now it is: ‘woocommerce_grouped_product_list_before_quantity’

As you can guess, the thumbnail is now at the beginning of the row:

product image before quantity box in woocommerce grouped product

Conclusion

I hope you feel more comfortable with grouped product now. Grouped product is great for grouping simple products together in WooCommerce. You can use variable products in WooCommerce grouped products. However, due to the inconvenient checkout flow as shown above, I would suggest you use simple products only. You can also search for a plugin that  let you select the variable product right on the grouped product page. Doing so will greatly improve the customers’ experience on your website.

Want One More WooCommerce Secrets?

I never spam, only quality info that benefits you!