Posted on Leave a comment

#1 Plugin To Customize WooCommerce Related Products

WooCommerce related products, in case you are not aware are the products that displayed at the end of any single product page. By default, WooCommerce get related products for any product by looking for products in the current product’s categories. In addition, products that share the same tag(s) are considered related.

Let’s take a look at the default display of WooCommerce related products in my demo site ( running WooCommerce 3.7.0 & Storefront).

Default woocommerce related products display

In my case here, I’m viewing a dress and the related products are also dressed since they are from the same category.

What if you want to change the products that display in this section. Maybe you want:

  • Show products from different categories
  • Pick some specific products to display in the related product section of this product
  • Set a different set of related products for one or a few products only

Let me show you how to do that with my new plugin BC Ultimate Related Products.

Before we begin, here are the product categories on my demo site:

List of categories

Set related products for a category from other categories

Let’s dig into our first case. For example, I want that when people view products of Dress, in the related products section, products from Jeans and Hoodies are shown.

I know this may not make sense. This is just a demonstration of the way the plugin works.

Let’s go to the BC Ultimate Related Products screen. Here is what we have:

Set related products for a category from other categories

To achieve what we need in this case, we only focus on the first section: Pick related products for category by categories

Here is what we are going to do. First, as we need to set two categories as related, let’s click the leftmost plus sign to add another category select box:

Add new related category

Now we have the structure set up, let’s configure the categories.

As you can remember, we need to display products from Jeans and Hoodies as related products when viewing products from Dress. So, here is the correct setting:

Selecting related product category

Save the settings and view one product from Dress category. Here is what we have:

Related products display correctly

As you can see, we have successfully complete the case. Products from Jeans and hoodies are shown in the related products section.

Let’s try another case.

Select specific products as WooCommerce related products for a category

In this case, instead of selecting categories for related products, we choose some specific products as related products for all products in a particular category.

If that’s sound confusing, let me give you an example.

Take the Dress category again. This time, we want to setup that when visitors view any product in Dress category, they will see three products that we pick.

Let’s get started.

We are going to focus on the second section of the plugin:

Selecting multiple related products for a category

Similar to the above case, we select Dress in the left. However, on the right, it’s not a select box. Instead, it’s a box where you can search products by typing a few characters. There is no limit on how many products you can select.

Let me pick 3 random products for the sake of demonstration.

Done selecting multiple related products for a category

Save the settings and check one product from Dress category again.

Selected products for category display correctly

As you can see, I got exactly three products in picked displayed here in the related products section.

We have one case left, let’s begin.

Pick WooCommerce related products for a single product

For some reason, I want to treat some products specially. For example, I want to select only two related products for the dress we use from the beginning of this post.

Here is how to achieve that with BC Ultimate Related Products.

Let’s focus on the third section of the plugin.

adding related products for a single product

On the left, there is a box where you can search for products and pick one product. On the right, it’s similar to the #2 case. It’s a product search box where you can pick multiple products.

Let me quickly pick two products as related product for the TSE Cashmere… product.

pick two related products for one product

Let’s save the settings and view the product page:

related products shown

As before, we achieved what we planned!

Conclusion

As you can see, this plugin is very helpful when you want to customize related products section for a category or a single products. Please let me know if you have any questions.

Posted on 5 Comments

The Ultimate Guide to WooCommerce Flat rate Shipping

The Ultimate Guide to WooCommerce Flat rate Shipping 1

WooCommerce flat rate shipping is the easiest shipping method to set up. In this post, let’s find out how to setup flat rate shipping in WooCommerce and see how it fits to your business model.

What is flat rate shipping?

If you have sent a package via post office before, you should be familiar with flat rate shipping. As the name suggests, flat rate shipping impose an uniform shipping price on your package as long as it doesn’t exceed a certain weight or size.

For example, the shipping cost for packages less than 10 kg and 1 cubic meter is $10 per package.

The same idea applies to WooCommerce flat rate shipping.

How to setup flat rate shipping in WooCommerce

By default, WooCommerce has three shipping methods

  • flat rate shipping
  • local pickup
  • free shipping

In order to use one of those method, you need to create a shipping zone first then in the zone, you can add one or more shipping methods, including flat rate.

how to add flat rate shipping to shipping zone in woocommerce

 

After creating one WooCommerce flat rate shipping method as in the above image, you can configure the rate, tax of that shipping method by clicking on the Edit link under “Flat rate”:

configure flat shipping rate and tax

 

As you can notice, there is a toggle button right below the Enabled title. You can enable or disable the shipping method by turn that button on or off.

Can I have multiple flat rate shipping setup?

There is no limit on number of shipping method per zone so you definitely can have multiple flat rate shipping setup, in one zone. You may wonder, why do I need multiple flat rate shipping for one zone?

One good example is you provide standard shipping at a lower rate and priority shipping at higher rate. At the cart page, customers can choose which shipping method they want to use. If they need the products to be delivered fast, they will choose the priority shipping method. Otherwise, they can choose the standard shipping method to save money on shipping.

Let’s set that up:

adding multiple flat rate shipping for one zone

Now, on the cart page, the customers will see all the shipping options available:

flat rate shipping options on cart page

How to add flat rate shipping per item using shipping classes

At this point, you should be comfortable with adding flat rate that applies to all items. What if you want to set a different shipping rate for some particular items? For example, I have a store selling computer hardware. While keyboards, mice can be shipped without much care, monitor requires special packaging and handling. I would like to charge $50 more for monitors. How can I set that up?

First we need to add a shipping class. Adding shipping class in WooCommerce is simple. Let’s go to WooCommerce->Settings->Shipping->Shipping classes and add one:

add a shipping class in woocommerce

Now, the next step would be to go the monitor and assign it the “monitor” shipping class:

assign shipping class to product

Finally, let’s configure the shipping rate for “monitor” shipping class in our shipping methods.

Let’s go to WooCommerce->Settings->Shipping->Shipping zones and edit our zones. Let edit all the enabled flat rate shipping method in that zone and add the additional fee accordingly:

add shipping cost to shipping class

 

Now if I go to the cart, I can see that the shipping cost is higher:

shipping cost updated after using shipping classes

If you remember, the standard shipping was $10 and the priority shipping was $30. Since we added $30 for the “monitor” shipping class, the shipping cost updated accordingly.

WooCommerce flat rate shipping by quantity

If you notice that we have 2 items in cart here. The shipping cost for the “monitor” only calculated once. What if you want to charge the additional shipping cost PER ITEM?

That’s easy, let’s go back to our shipping methods and edit each of them then enter this:

using formula to calculate flat rate shipping cost

Now, if I go to the cart page, surely I’ll see the shipping cost is calculated for all items in cart:

cart udpated after using formula

Hide flat rate shipping if free shipping is enabled

You may want to reward the customers by offering free shipping to all order exceeds $300. In this case, you also want to hide other flat rate shipping methods. What can you do to achieve this?

You’ll need to enter some code. Don’t worry, it won’t be hard.

First thing first, you need to create a child theme if you haven’t got one. Why do you need a child theme? How to create one? Find all the answers here

Now you have your child theme ready. Let’s go to its functions.php file and paste the following code:

function bc_hide_shipping_when_free_is_available( $rates ) {
  $free = array();
  foreach ( $rates as $rate_id => $rate ) {
    if ( 'free_shipping' === $rate->method_id ) {
      $free[ $rate_id ] = $rate;
      break;
    }
  }
  return ! empty( $free ) ? $free : $rates;
}
add_filter( 'woocommerce_package_rates', 'bc_hide_shipping_when_free_is_available', 100 );
add code to functions.php to hide other shipping methods when free shipping available

Click on update file and let’s go to the cart page, you’ll see that if free shipping is available, all other methods are hidden:

other shipping methods hidden when free shipping available

Conclusion

As you can see, flat rate shipping at first seems to be rigid and hard to customize. However, when combine with shipping classes and free shipping method, you can offer very flexible shipping options for your customers. Using WooCommerce shipping classes enables you to set the max shipping fee for an order, set the shipping fee based on the quantity and the total of the cart.