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:
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:
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.
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:
Now, go to the bottom of that box and enter the following code:
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:
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 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 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.
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.
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.
Click on add shipping method, you will get a shipping method like below. Click on the edit button to enter its details:
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.
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:
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.
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:
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.
Step 2: Create three flat rate shipping tiers
Now you can click on Add shipping method and select flat rate:
Click on the Add shipping method button. You will see there is an option like this appears. Click on Edit.
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:
After repeating step 2 and 3 two more times, we have something like this:
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:
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:
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.
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.
and if you echo the hash, you’ll see something similar to this:
echo "hash is: {$hash}";
If you run the script again (reload the browser in my case), you’ll get a new hash string (still same password input!):
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:
The raw password. This is what the users enter along with their email/id to login to your application
The hashing algorithms. There are a few of them you can find out here.
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:
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
Are you a dev? Checkout programming tutorials here: datmt.com
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.