Category: WooCommerce Tutorials

Posted on by — 1 Comment

How To Hide “Have a coupon? Click here to enter your code” On WooCommerce Checkout page

Coupon is a great way to make your customers happy. It is recommended that you use coupons when applicable. From my experience, having a coupon, even with a small discount can make the buying experience more pleasant. However, there are some stores, websites don’t use coupon. Take a consultant for example, she provides service at fix price per hour and normally, don’t offer discount. If she uses WooCommerce, on her checkout page, her customers see the message: “Have a coupon? Click here to enter your code” anyway. So, how can she remove that message?

have-coupon-message-on-checkout-page

How To Hide “Have a coupon? Click here to enter your code” on your checkout page

Some people may suggest you use CSS to hide the div that contains the message. While this method does the job, I would not recommend it. The reason is using CSS only hides the message, not remove it completely. In addition, WooCommerce has an option to disable that message, why don’t we use that?

So, to disable the message, you can go to WooCommerce->General and scroll down to the Enable Coupon section. You’ll see there is a checkbox there to let you enable and disable the use of coupons:

disable the use of coupons

As you can guess now, if you want to hide the message “Have a coupon? Click here to enter your code”, you should uncheck the checkbox “Enable the use of coupon codes”.

Next, scroll to the bottom and click on Save changes and you are done.

Conclusion

So, using coupons can be very effective for stores. However, you may not find it is applicable for your product. If you want to disable the use coupon on the checkout page, WooCommerce supports that by default and you can enable and disable it in WooCommerce settings.

Posted on by — 3 Comments

How To Get Product Type In WooCommerce

When developing plugins for WooCommerce, sometimes, knowing the product’s type is very important. The funny thing about WooCommerce is if you create a product from the class “WC_Product” and run:

$product->get_type();

The result is always simple.

This sounds confusing, doesn’t it? I feel the same way.

Get WooCommerce Product Type Using WC_Product_Factory

Since version 3.0, there is a convenient static method in WC_Product_Factory class that helps you get the type of product quickly:

WC_Product_Factory::get_product_type($product_id);

If the product is valid, you will get the product type as string (simple, variable…)

If the above method doesn’t work, let’s continue.

Getting product type using taxonomy

If you want the get_type method to return the correct type of the product, you need to create the product with the appropriate class. For example, for the get_type function to return ‘variable’, you need to create the product with the following syntax:

$product = new WC_Product_Variable($product_id);

However, how do you know what class to use when first creating the product?

The answer lies in the following code:

$terms = get_the_terms($this->product->get_id(), 'product_type');
$product_type = (!empty($terms)) ? sanitize_title(current($terms)->name) : 'simple';

As you can see from the code, it gets the taxonomy ‘product_type’ of the product and return the taxonomy name if exist, otherwise, it returns ‘simple’.

So, if you have the same problem, this is the code to use.

Posted on by — 1 Comment

How To Set Woocommerce Custom Shipping Cost Per Product

How To Set Woocommerce Custom Shipping Cost Per Product 1

The goal

Learn how to set custom shipping cost per product in WooCommerce.

The method

We are going to use WooCommerce shipping class to set different shipping cost per product.

What is a WooCommerce shipping class

This is the definition of shipping class on WooCommerce documentation. I think it’s clear enough:

Shipping classes can be used to group products of similar type and used by some shipping methods, such as Flat Rate Shipping, to provide different rates to different classes of product.

For example, for a specific shipping zone, when you select a shipping method, inside the shipping method, you can set many shipping classes. Each class can have different cost. This makes it very easy for us to set different shipping cost for each product.

How to set custom shipping cost per product using shipping classes

This is our setup: We have two products, a hat and a vase. A vase requires a more careful shipping method because it’s fragile while a hat can use less secure shipping method. Now, we are going to create two shipping classes:

  1. Fragile product shipping
  2. Normal product shipping

As you can guess, the vase will use the first class, the hat will use the second.

Add shipping classes

Let’s go to WooCommerce->Settings->Shipping class and add these two classes:

add new shipping class

Let click on the “Add shipping class” at the bottom right. You will see there are input boxes appear for you to enter the details. Don’t worry if you don’t see the place to enter shipping cost. We’ll do it later in shipping zones.

How To Set Woocommerce Custom Shipping Cost Per Product 2

Now click on Save Shipping classes and you are done.

Our next step is to create a zone and add shipping methods (if you haven’t got any).

Add shipping zone and shipping method

Let’s click on Shipping zones and click on Add shipping zone. You’ll see an interface appears to enter the zone details. In my example, I use Asia as my zone but you can use any other zones if you like.

add shipping zone

Now click on Add shipping method.

We are going to use the flat rate method.

Now, click on the edit link under the flat rate method:

How To Set Woocommerce Custom Shipping Cost Per Product 3

setting cost for shipping class

Here you can see that there are settings to enter Shipping class costs. In this example, I set 20 for the Fragile product shipping class and 5 for Normal product shipping.

Now, click on Save changes, click Save changes again on the add shipping zone screen and you are done with setting up shipping classes.

Set shipping class per product

Finally, we are going to set the shipping class for our products.

setting shipping class

Let’s go to the product data area (right under the product description area) and click on shipping. When you click on the “Shipping class” drop down, you’ll see the two options we’ve just created. Select Fragile product shipping for the vase and Normal product shipping for the hat.

Now, let’s add vase and hat to cart and go to the cart page. You’ll see the shipping cost is added accordingly:

shipping cost for vase
Shipping cost for vase

shipping cost for hat
Shipping cost for hat

shipping cost for both
shipping cost for both

Conclusion

As you can see, using shipping class can let us setup some flexible shipping for our product. There is no limit of number of shipping classes you can create so you can easily have many shipping options.

Posted on by — 4 Comments

The Easiest Way To Remove The Add To Cart Button In Woocommerce

The Easiest Way To Remove The Add To Cart Button In Woocommerce 4

If you ever want to remove the “Add to cart” button in WooCommerce, there are quite a few ways. We are going to learn the easiest and fastest way to do so in this post.

The easy and safe method to remove the add to cart button in WooCommerce

The simplest way to remove the add to cart button is to hide it. The beauty of this method is you set it once and don’t have to worry about WooCommerce updates. We are going to set a CSS rule to hide the button.

First, go to your product page, right click on the add to cart button and select inspect:

inspect-the-add-to-cart-button

Now, there is a panel appears. It depends on your browser setting that the panel appears at the right or the bottom. In my case, it’s at the bottom:

The Easiest Way To Remove The Add To Cart Button In Woocommerce 5

Now, you can see that the element is a button (by looking at the <button opening tag). We pay attention to the class attribute. This button has three classes:

  • single_add_to_cart_button
  • button
  • alt

Now, let’s go to your dashboard, Click on Appearance->Customize.

The Easiest Way To Remove The Add To Cart Button In Woocommerce 6

You may have to scroll down a bit to see the tab Additional CSS. Let’s click on it and you’ll see a box to enter your code:

additional css box

Now, go to the bottom of that box and enter the following code:

.single_add_to_cart_button.button.alt {
    display: none;
}

If you also want to hide the quantity input, you will also need to put the following code (in addition to the code above):

form .quantity {
    display: none;
}

 

Please note that there is no spaces between the classes. Let’s see the result:

hide add to cart button woocommerce

As you can see, once I put the code in the box, the button Add to cart disappeared.

Conclusion

There are more methods to hide the add to cart button. However, this is the fastest method and anyone can do it without worrying about breaking the site. If you ever want to see the Add to cart button again, you can go to the Additional CSS box and remove the code you’ve just entered.

Want to customize your add to cart button such as:

  • Add cart icon to it
  • Add a spinning icon when the button is clicked
  • Change the button’s background color
  • Set an image as button’s background

Then, you’ll find this plugin is a perfect fit. Check Ultimate add to cart button plugin out

Posted on by — 2 Comments

How To Change The Add To Cart Button Text In WooCommerce

Add to cart is a very generic term that used on many stores around the world. However, at times, you want to change it to something else, “Buy now” for example. In this post, I’m going to show you how to do just that with a simple code in your functions.php theme file.

Using a plugin is much more easier. You can download this WooCommerce Add To Cart button customizer to adjust the text, the look and feel of the buttons on your stores.

The goal

We are going to change the text of your add to cart button to Buy now.

How to change Add to cart to buy now

Let’s open your functions.php file (you can go to Appearance->Editor and select the functions.php file). At the end of that file enter the following code:

add_filter('woocommerce_product_single_add_to_cart_text', 'binary_carpenter_replace_single_text');

function binary_carpenter_replace_single_text()
{
    return 'Buy now';
}

The result

Now, let’s see the result:

How To Change The Add To Cart Button Text In WooCommerce 7

 

How about adding icon and image to the button

You may wonder can you add icon and images to the button (for example the cart icon). The answer is yes, you can but you probably need fontawesome for the icon and upload your image to your host before you can use that. Also, there are a lot more work to be done that just a simple code to add such features. You may need to use a plugin for that.

Conclusion

As you can see, you can change the add to cart text on the button quite easily. However, this method doesn’t offer more flexibility than that. If you want to have icon and image on the button, you probably need something more powerful such as a plugin.