Posted on 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 1

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 2

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 3

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 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 4

 

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.

 

Posted on Leave a comment

How To Set Woocommerce Shipping Rates By Country

How To Set Woocommerce Shipping Rates By Country 5

The goal

With the introduction of shipping zones, creating shipping rates by country is super easy. We are going to learn how to create flat rates shipping for two different countries in this post.

The setup

For this example, we are going to create flat shipping rate for Vietnam and Germany. The store is located in Vietnam so the flat rate for this country is $5. Shipping to Germany will be higher, $15 in our case.

The implementation

Let’s go to WooCommerce->Settings->Shipping and click on Add shipping zone.

Add a shipping zone for a country

Let’s go ahead and enter zone name and zone regions. In the image above, we created a shipping zone for Germany. Now, let’s go ahead and click on Add shipping method for this zone. We are going to create one flat rate shipping method for each zone.

How To Set Woocommerce Shipping Rates By Country 6

Click on add shipping method, you will get a shipping method like below. Click on the edit button to enter its details:

How To Set Woocommerce Shipping Rates By Country 7

flat rate shipping for country

Click on Save changes and you are done for Germany. Let’s do the same for Vietnam. You’ll get something like this after creating flat shipping for these two countries.

flat rate shipping for two countries Vietnam and Germany

Now you are done. Let’s place test order and see how the shipping based on country works.

Place a test order

Now we have a test order. Let’s go to the cart page, you will see the appropriate shipping rate applied:

shipping rate by country applied

As you can see, the shipping fee is $5, which is exactly what we set when we created the shipping method for Vietnam.

Wait! It doesn’t work for me

If you find the method above doesn’t work for your store, chances are some other plugins or custom code has modified one of the shipping hooks. (`woocommerce_package_rates` for example). In such case, you may need to find the plugin that does that and deactivate it for this method to work.

Conclusion

As you can see, you can easily set flat shipping for each country. You are not limited to shipping based on countries though. If you want a simpler shipping structure, you can set a flat rate for regions like Asia/Africa… However, doing so reduce the level of control over your shipping rates. The choice is yours.

Posted on 17 Comments

Woocommerce Weight Based Shipping Without Plugin

Woocommerce Weight Based Shipping Without Plugin 8

Having a weight based shipping fee structure is very common in stores. However, this option is not support by default in WooCommerce. If you want to have weight-based shipping, you may need to use a plugin or you can go without one. However, without a plugin, you need to enter some code in the function.php file of your theme.

Are you ready? Let’s learn how to setup WooCommerce weight based shipping for free!

Some cautions before continuing

To enable WooCommerce weight based shipping, the first thing you need to do is to make sure your products to have weight. It is not a requirement, however, if your products don’t have weight, what’s the point of using weight-based shipping method? Some of your products don’t have weight is OK.

There is another caution you need to know that is which shipping zone is applied when calculating the shipping fee. If you have multiple shipping zones and one zone cover the other (for example, Vietnam is in Asia and you have two shipping zones, one for Vietnam and one for Asia), you need to know that the first shipping zone is applied.

Take a look at this screenshot:

Shipping zones order. Drag to top to have higher priority

The one at the top will be applied (Asia), not Vietnam 2. If you want to apply the shipping zone Vietnam 2, you need to hold the hamburger icon (underlined red) and drag it to the top position.

Our WooCommerce weight based shipping setup

In our example, we are going to have three weight based shipping tier:

  • For packages under 10kg, we charge $10
  • We will charge $20 for packages under 20kg (but more than 10kg)
  • And finally, for packages over 20kg, we charge $50

There is no limit on how many tiers you can set. You can have very complex tiers hierarchy. It all depends on you.

Setting up the shipping tiers in WooCommerce shipping settings

We are going to create a shipping zone that and three shipping tiers. You can proceed as follow:

Step 1: Create a new shipping zone by going to WooCommerce->Settings->Shipping zones and click on Add shipping zone. You then enter the name and regions that that you want to use the shipping tiers we are going to create.

Create shipping zone

Step 2: Create three flat rate shipping tiers

Now you can click on Add shipping method and select flat rate:

Add a flat-rate tier

Click on the Add shipping method button. You will see there is an option like this appears. Click on Edit.

Edit a flat rate tier

Step 3: Now, enter the details for the tier. As mentioned, we are going to create three tiers. In the image below, we create the last tier, shipping fee for packages that is more than 20kg. You can enter anything in method title. Note that this title will be displayed to your customer when they checkout:

Enter details for the flat rate tier

After repeating step 2 and 3 two more times, we have something like this:

All available tiers

Enter a code snippet in your theme’s functions.php

It is recommended to create a child theme and enter the code snippet in the functions.php file of that theme. However, if you just want to see the result, you can paste the code in your current theme’s functions.php file.

Now, let’s go to your theme functions.php file and enter this code:

add_filter( 'woocommerce_package_rates', 'binary_carpenter_weight_based_shipping_tiers', 10, 2 );
   
function binary_carpenter_weight_based_shipping_tiers( $rates, $package ) {
     

    if ( WC()->cart->cart_contents_weight <= 10 ) {
      
    foreach($rates as $key => $value)
    {
      if ($value->cost != 10)
        unset($rates[$key]);
        
    }
       
    } elseif ( WC()->cart->cart_contents_weight <= 20 ) {
       
    foreach($rates as $key => $value)
    {
      if ($value->cost != 20)
        unset($rates[$key]);
        
    }
       
    } else {
       
        foreach($rates as $key => $value)
    {
      if ($value->cost != 50)
        unset($rates[$key]);
        
    }
       
    }
   
  return $rates;
   
}

See the result in action

Now, you can add some products with weight to your cart and see the shipping tiers applied. In the example below, my total weight is 270kg and you can see that the highest tier is applied:

Woocommerce Weight Based Shipping Without Plugin 9

Use WooCommerce weight based shipping with local pickup

There are times you would want to add another method, local pickup for example. Then, you can replace the code above with this:

add_filter( 'woocommerce_package_rates', 'binary_carpenter_weight_based_shipping_tiers', 10, 2 );

function binary_carpenter_weight_based_shipping_tiers( $rates, $package ) {


    if ( WC()->cart->cart_contents_weight <= 10 ) {

        foreach($rates as $key => $value )
        {

            if ($value->cost != 10  && $value->method_id != 'local_pickup')
                unset($rates[$key]);

        }

    } else if ( WC()->cart->cart_contents_weight <= 20 ) {

        foreach($rates as $key => $value)
        {


            if ($value->cost != 20 && $value->method_id != 'local_pickup')
                unset($rates[$key]);

        }

    } else {


        foreach($rates as $key => $value)
        {

            if ($value->cost != 50  && $value->method_id != 'local_pickup')
                unset($rates[$key]);

        }

    }

    return $rates;

}

As you can see, in each if condition inside foreach, we check if the method has method_id as ‘local_pickup’. If it has, then we keep that method.

Now, on the cart page, you can see that the customer has another choice for shipping:

weight based shipping with local pickup

Conclusion

As you can see, setting up WooCommerce weight based shipping is quite simple with a little modification. If you find this post useful, please comment and share. Do you think this method can be improved? Please let me know.

Posted on Leave a comment

Create and verify password in PHP with new hashing functions

Previously, when creating a login system, I usually take users’ password input and md5 it and store in the database. Doing so seemed to be sufficient enough. However, no one can be sure that their system is not vulnerable to attacks. In the worst case when your site gets hacked, your database is stolen, using weak hashing algorithm on users’ passwords may enable hackers to easily decode such fields. Thus, since PHP 5.5, there are new functions available to help you create an verify password hash easily. Let’s learn what are they and how to use them.

Creating a password hash with password_hash

Creating a password hash in PHP > 5.5 is very simple.

$hash = password_hash('easy-password', PASSWORD_DEFAULT, ['cost' => 12]);

and if you echo the hash, you’ll see something similar to this:

echo "hash is: {$hash}";

Create and verify password in PHP with new hashing functions 10

If you run the script again (reload the browser in my case), you’ll get a new hash string (still same password input!):

Create and verify password in PHP with new hashing functions 11

This is quite strange for people who are familiar to md5. In md5, for one input, there is one output. In this case, one input generates multiple outputs. This makes the effort to create a dictionary to map easily-to-guess passwords and their hashes become worthless.

password_hash takes 3 parameters:

  1. The raw password. This is what the users enter along with their email/id to login to your application
  2. The hashing algorithms. There are a few of them you can find out here.
  3. Additional options. Additional options which most of the time consists of the cost option. In the example, I used cost = 12. Higher cost provides higher security but takes more time.

Verify the password with password_verify

To verify the validity of a password hash, we’ll use password_verify. Consider the case of user login, they will provide the raw password (without hashing). Our application will get the hash password in the database and verify if the raw password and the hash match.

If you used md5 before, the code may look like this:

if ( md5($raw_user_input) == $password_hash_in_database )
{
//ok to login
}

However, if you hash the password using password_hash, you’ll use password_verify to verify.

 

if (password_verify($raw_user_input, $password_hash_in_database )
{
//ok to login
}

For example, in my case:

$verified = password_verify('easy-password', '$2y$12$06uHkyogkUveLLLVIFhvsOFzpBrYkZ8XIegVdwj0RtE/zI/dzfHnq');

echo "verify is: {$verified}";

The output is:

Create and verify password in PHP with new hashing functions 12

You can see that the hash was successfully verified.

That’s what I learned today. This is a part of 7 days challenges to learn one topic every day. Thanks for reading