Each payment method on the WooCommerce Checkout page comes with a description right below the label. What if we could achieve something similar for the shipping rates, so that we can explain to the customer the difference between each method?
This question came up today in our private Slack channel for Woo developers, and we were able to write a quick snippet that does the trick. Here’s the complete code – enjoy!
Continue reading WooCommerce: Add Shipping Rate Description @ Cart & Checkout Page
We already saw how to disable the default payment gateway in the WooCommerce Checkout page, so that users are forced to click on one of the options.
Well, we can do the exact same with the shipping methods!
In this way, customers will be forced to actually click on one of the shipping options. This is helpful when you don’t want to have a default shipping, and when your customers often “forget” to pick the correct one and ask to change it once the order has been placed.
Continue reading WooCommerce: No Default Shipping @ Checkout Page
When you land on the WooCommerce Checkout page, one payment option (radio button) will be selected by default. this is defined based on the last payment method (logged in customer), or the payment gateway sorting (logged out customer).
Often it happens, however, that customers forget to change their payment selection, and therefore end up checking out with the wrong payment option. Which means, more admin work.
With this simple snippet, we will inject some JS in the Woo Checkout page, so that on load, all payment method radio inputs will be unchecked. Super easy!
Continue reading WooCommerce: No Default Payment @ Checkout Page
Especially for B2B sites, it’s likely that customers are managed by the store admin and are not allowed to change their billing/shipping address unless they request to update it.
But even if you’re simply curious, there is a way to turn each checkout field into read-only inputs. In this way, the saved billing and shipping address will load, and the logged in customer won’t be able to change any data before checkout.
A little note: country and state are dropdowns, and this means adding the “readonly” attribute won’t stop you from changing the selected value. However, if we turn all fields to input type “text”, this problem will go away. And this is why you find two statements in the snippet below; first we turn the field into a text input, and then we make it read-only.
Continue reading WooCommerce: Read-only Checkout Fields
If a WooCommerce checkout field is set to “not required“, its label will get the “(optional)” suffix. Considering the required fields get the red “*” suffix, you may want to get completely rid of the (optional) string.
Sure, you could be using CSS to hide it… but as usual this is not ideal. With CSS display:none, the string loads and then you hide it; with PHP you avoid the loading in the first place.
So, let’s see how this is done – this snippet is also running on this same website so it should definitely work!
Continue reading WooCommerce: Remove “(optional)” From Checkout Field Labels
I’m using the funnel kits plugin for the checkout page. I have tried different logics but none of them seem to work. We have 4 different shipping options.
- Free shipping
- Local Pickup
- Standard Shipping
- Express Shipping
The local pickup option is the first one that’s showing on the shipping options on checkout. I would like to make it the last option. People get confused thinking it’s a free option. So I would like to have it in the following order.
- Free Shipping
- Standard Shipping
- Express Shipping
- Local Pickup
All I would like to do is move the local pickup option to the last. Please help.
Let’s say you want to help customers understand your shipping rates and benefits right on the WooCommerce Cart and Checkout pages, by adding a link to each shipping option (e.g. “View shipping FAQ“).
As you can see from the first and second screenshot below, if you enter any HTML within the WooCommerce shipping zone -> shipping method settings, this will be stripped out, and HTML tags such as hyperlinks won’t work.
So, how can we add a clickable text link to each shipping method, given that we can’t use the WooCommerce settings? Well, as usual, a quick PHP snippet can help us with that. Enjoy!
Continue reading WooCommerce: Add Hyperlink to Shipping Method Label @ Cart & Checkout
Here’s my second attempt to fight against WooCommerce spam, without installing a captcha plugin. A few posts ago I covered the My Account user registration spam, so today I want to tackle the WooCommerce Checkout, and try to “trick” spam bots.
Of course, this is a workaround and smart bots may understand you’re tricking them. So, feel free to test this first and let me know if it stops spam orders, card testing attacks, and tons of fake user registrations.
Same as the other post, I will be adding a custom hidden checkout field with an empty value. This won’t be visible to the customer, but will be to spam bots, which will try to post a value. My validation code will, however, generate an error if the custom field posts a value, and therefore should prevent most spam bots from going through.
Let me know if it works!
Continue reading WooCommerce: Checkout Anti-Spam Honeypot
By default, WooCommerce adds the “autocomplete” attribute to almost all checkout fields. For example, “billing_phone” has “autocomplete=tel”, “billing_country” has “autocomplete=country” and so on.
When logged out or if the logged in user has never done a purchase before, the WooCommerce Checkout page fields are possibly autofilled by the browser based on saved data / addresses.
Today, we’ll take a look at how to disable this autofill behavior, so that the customer is forced to enter data inside an empty input, and maybe in this way you can apply your custom validation or pattern, such as a specific phone number format. Enjoy!
Continue reading WooCommerce: Disable Checkout Field Autocomplete
Just so you know, there is no need to hardcode WooCommerce URLs in your custom code! In fact, WooCommerce gives us helpful shortcut functions that we can reuse in our code to get cart, checkout, account and product URLs without wondering if they have been modified by the website owner e.g. example.com/cart to example.com/basket.
In this way, you can always make sure you’re getting the correct URLs without wasting time looking for page/product slugs. Enjoy!
Continue reading WooCommerce: Easily Get Cart, Checkout, Account, Product URLs
You may be aware that the WooCommerce Checkout page “order review” section reloads/refreshes every time there is a change of address – in this way shipping, taxes and optional fees are properly recalculated and customers are returned with the correct total.
But in case you add custom checkout fields that may cause a difference in pricing, or you want to keep the checkout UX consistent, or you have some other kinds of logic, it may be useful to refresh the order review section after a change on any checkout field. Enjoy!
Continue reading WooCommerce: Refresh Checkout Upon Any Input Field Change
WooCommerce frontend messages and error notifications display on the Single Product page, Cart page, Checkout page, My Account page and may show on page load or upon a specific user action.
The potential problem is that – same as the WordPress backend – WooCommerce messages can use a lot of vertical space, hence can push useful content further down the page, and possibly disturb the navigation – especially on the Checkout page.
A cool workaround may be to place a dismiss “x” button on the WooCommerce notices, so that customers can quickly close them and gain back some space.
We will use a mix of PHP, JS and CSS in the snippet below in order to achieve our final goal. Enjoy!
Continue reading WooCommerce: Close Button @ WooCommerce Checkout Notices
The “Ship to a Different Address?” checkbox displays on the WooCommerce Checkout page and toggles the shipping form. That’s useful when Billing and Shipping addresses are different, so let’s say every B2C requires the double form.
However, the “Ship to a Different Address?” string may be confusing or may need further clarification, as not all customers are created equal. What about “I’d like to define a different shipping address” or “Ship to a different address than the Billing one“?
Either way, editing the string is super easy, so you can change it to whatever you like. Enjoy!
Continue reading WooCommerce: Edit “Ship to a Different Address?” @ Checkout
There are certainly ways and plugins to turn WooCommerce into a quote engine, but today I want to share a super simple workaround that could be helpful to many.
In a nutshell, we’ll use the same WooCommerce cart/checkout flow, rename a few strings and buttons, enable an offline payment gateway (so there is no actual payment), let the admin revise the order and send back the final invoice, and finally get the customer to pay for their order.
Continue reading WooCommerce: Turn Checkout Into a Quote System
Interestingly enough, when you add a subscription product to the cart, there is no renewal date information unless you scroll to the very bottom and are able to read the very small text below the “recurring total” (see screenshot).
It would be way more helpful if dates (and specifically the WooCommerce subscription start date and end date) showed right under the product name inside the Cart table and in the Checkout page order review, so that the customer knows exactly what they are purchasing before having to figure that out.
So, here’s how it’s done. Enjoy!
Continue reading WooCommerce Subscriptions: Display Start-End Dates @ Cart & Checkout
No matter what you try, but simply adding an HTML input type=”file” won’t work on the WooCommerce Checkout page. I believe this is a security measure and as such, we need to find a workaround.
The only possible solution is to upload the file BEFORE the checkout is submitted, so that upon “Place Order”, the file is already available in the Media section and can be attached to the order as a simple string (URL).
Such upload can happen via Ajax, so that the customer won’t notice anything on the Checkout page – they are actually uploading a file to your website without even noticing it (yes, you need to apply some security measures, of course).
Here’s how it’s done – enjoy!
Continue reading WooCommerce: Upload File @ Checkout Page
On top of adding products to cart via URL and redirect to checkout, there is a way to also fill out the Checkout page input fields within the same link.
This could be super handy when you know the billing/shipping details of a registered or guest customer and want to speed up the order process.
It’s important to note that the URL will need to contain personal data e.g. email address, billing address, phone number, and so on; you need to make sure the URL is only shared with the specific customer (in an email, for example, as content is tailored to the subscriber; or only when the WooCommerce customer is logged in if you’re using the URL behind a website button).
Once that’s clear, let’s go ahead, and let’s see how my WooCommerce snippet works. Enjoy!
Continue reading WooCommerce: Populate Checkout Fields From URL
We covered a lot of WooCommerce Checkout customization in the past – it’s evident that the Checkout is the most important page of any WooCommerce website!
Today we’ll code a nice UX add-on: how do we show product quantity inputs beside each product in the Checkout order table? This is great if people need to adjust their quantities on the checkout before completing their order; also, it’s helpful when you have no Cart page and want to send people straight to Checkout and skip yet another click.
In this post, we’ll see how to add a quantity input beside each product on the Checkout page, and then we’ll code a “listener” to make sure we actually refresh the Checkout and update totals after a quantity change. Enjoy!
Continue reading WooCommerce: Change Product Quantity @ Checkout Page
Go to WooCommerce Checkout as a logged out user. Fill out billing name, surname, address, email and phone. Change your mind and go back to Cart. Return to Checkout. Billing name, surname, email and phone (basically everything but the address) are gone!
But hey, this annoying WooCommerce flaw is about to go away with a few lines of code. Either reload the Checkout page or go back to it later – your info will still be there (as long as you haven’t cleared your cache/cookies and the WooCommerce session hasn’t expired of course).
Continue reading WooCommerce: Retain Field Values @ Checkout Reload
It’s always a sign of success when customers show interest in your products, add them to their carts, and proceed to checkout. But what’s the point if they drop off and leave your site in the middle of the checkout process? Unfortunately, cart abandonment is common, and one of the major reasons behind incomplete purchases is a complicated and distractive checkout procedure.
According to the Baymard Institute research, 26% of online shoppers abandon the carts because of too complicated or too long of a checkout process, significantly impacting the eCommerce sales and revenue – losing $18 billion annually, to be precise.
Losing valuable customers and such a tremendous amount of revenue is no joke – and one of the best ways to prevent this situation is by redesigning the WooCommerce checkout.
The idea is to remove as much clutter and distractions through the checkout procedure – so customers can focus on completing the checkout entirely and end up buying your products.
But first, let’s understand the use of these plugins and how they help your WooCommerce store and eCommerce business.
Continue reading WooCommerce: How to Enable Distraction-free Checkout