We already saw a lot of examples e.g. hiding checkout fields if a product is virtual or hiding checkout fields if a checkbox is manually checked… but this time I want to hide a field dynamically – automatically – based on whether another checkout field is empty or no value is entered in it.
In this example, I will demonstrate how to hide the “billing phone” if “billing company” is empty or no information is entered. Of course, you also have to disable the mandatory attribute for the billing phone from the Customizer settings, otherwise checkout validation will fail. You can readapt this snippet to any other checkout field combo – just identify the IDs and change jQuery accordingly. Enjoy! Continue reading WooCommerce: Dynamically Hide / Show Checkout Field
We already saw how to hide Order Notes on the WooCommerce checkout page. This time around, however, our goal is to “move” them – and specifically remove them from their default position (under the shipping form) and add them back under the billing form.
As you can imagine, this is a combo snippet: (1) we remove them (and we’ll use the snippet as per the link above) and (2) we create a new billing field. Finally, (3) we also need to “save” this new field value into the original order notes custom field meta.
If this is difficult to understand don’t worry – just copy/paste the snippet into your functions.php and see magic happen. Enjoy! Continue reading WooCommerce: Move Order Notes @ Checkout
By default, the WooCommerce Checkout page redirects you back to the (empty) Cart page in case there are no products in the Cart.
Now, there are times when you still need users to see the Checkout page and avoid this redirect. And thankfully, WooCommerce provides us with two filters that we can use to immediately disable this default behavior. Enjoy! Continue reading WooCommerce: Show Checkout Even If Cart Is Empty
Here’s a super quick snippet you can use to rename the WooCommerce checkout “state” field label for both billing & shipping.
Of course you can learn by example and apply the same snippet to other checkout fields, all yopu need to change is the field ID. Enjoy! Continue reading WooCommerce: Rename “State” Label @ Checkout
I’m surprised WooCommerce doesn’t offer this field out of the box. Most ecommerce websites actually require a shipping phone to organize delivery and communicate with the end customer in case there are problems.
Thankfully, there is a hook (filter) for that. It’s called “woocommerce_checkout_fields” and can be used to remove, move or add checkout fields quickly. And here’s how to add, for example, a new shipping field called “shipping_phone”. Enjoy! Continue reading WooCommerce: Add Shipping Phone @ Checkout
If you want to increase your AOV (Average Order Value), you can definitely start from the WooCommerce Checkout page.
A client asked me to place a “Donation Area” close to the “Place Order” button (so at the bottom of the page, once customers are ready to pay) to drive more awareness around this add-on. All I had to do was creating hidden products with a donation value, use my own “Custom Add to Cart URL” guide to create add to cart links and print an HTML box right above the checkout button by using my WooCommerce Visual Hook Guide for the Checkout Page. Enjoy! Continue reading WooCommerce: Add Upsell Area @ Checkout Page
This is a very specific function. Sometimes, you need to “set” a checkout field value upon order creation (because it was not required and left empty for example). In some other cases, you might want to override what the customer input if you have certain requirements.
Either way, overriding the checkout fields on order creation is super easy. Here’s how it’s done – enjoy! Continue reading WooCommerce: Set Checkout Field Value @ Order Creation
If you’re familiar with the upcoming Gutenberg editor, you’ll know there have been a million doubts in regard to accessibility. So, accessibility matters – and WooCommerce has a few issues as well.
One interesting accessibility fix is the error notification system on the checkout page. Yes, the missing fields error show on top of the page when trying to place an order, but once you scroll down to fill them out again you might need a reminder of which field is missing without having to scroll back up to check the error.
This is quite difficult to explain, so take a look at the screenshot. The suggestion here is to also add “inline” error notifications (“XYZ is a required field“) right above each field, so that the user knows exactly what to do. So, let’s see how it’s done. Continue reading WooCommerce: Display Required Field Errors “Inline” @ Checkout
Coupons: the good, the bad and the ugly. WooCommerce coupon codes are great to convert more sales – but sometimes they get users to pause / stop placing the order until they find a coupon code online (you did it too, I know).
One good workaround that the internet giants such as Amazon and eBay have implemented is to hide the coupon form until an email is entered, or alternatively to move the coupon code to the bottom of the Cart page. This is a very smart move, and gets the user to concentrate on the Cart / Checkout details before entering or searching for a coupon.
So the question is – how to move the coupon code form in the Cart page and remove it from the Checkout page? Well, as usual, a bit of PHP can help us. Here’s how it’s done! Continue reading WooCommerce: Move / Remove Coupon Form @ Cart & Checkout
This is your ultimate guide – complete with shortcodes, snippets and workarounds – to completely skip the Cart page and have both cart table and checkout form on the same page.
But first… why’d you want to do this? Well, if you sell high ticket products (i.e. on average, you sell approximately one product per order), if you want to save an additional step (two steps convert better than three: “Add to Cart” >
“Cart Page” > “Checkout Page” – and this is not rocket science), if your custom workflow and ecommerce objectives require you to manage Cart and Checkout all together, well, this tutorial is for you.
There is a mix of shortcodes, settings and PHP snippets you can use to make this work out of the box. And trust me, this is easier than you think.
While many developers decide to turn the checkout process into a “Multi-Step Checkout” (ehm, not sure why – the more steps the more likely it is to have a cart abandonment), in here we’ll see the exact opposite.
So, how do they do it?
Well, here’s the complete, easy, step by step guide to put Cart & Checkout on the same page. Give it a go, do some WooCommerce testing and tracking, and see if it converts better 🙂 Continue reading WooCommerce: Put Cart & Checkout on the Same Page
This is a great WooCommerce snippet (or plugin, if you wish to call it like that) for those who want to provide conditional checkout fees. For example, you might need to display custom checkout radio buttons to pick premium packaging types, gift wrapping options, specific services or whatever can increase your AOV (Average Order Value).
Radio button selection must work with “Ajax” – which means as soon as the radio button is chosen, checkout must refresh in order to display the updated fees and totals.
Something similar (and also more complex, such as offering additional products) is achieved by the WooCommerce Checkout Add-Ons Plugin sold on the official WooCommerce.com marketplace. But in this case, we want to take a look at custom coding so you’ve got something to play with! Enjoy. Continue reading WooCommerce: Add Checkout Fees Based on Custom Radio Button
If you sell downloadable/virtual products and need to simplify your WooCommerce checkout when such product type is in the Cart, you’ve come to the right place!
Here’s a simple snippet to check if there are only “virtual” products in the Cart and if yes, all the billing fields and order notes are hidden (but name and email address). Go test this on your development environment and let me know if this works! Continue reading WooCommerce: Hide Checkout Billing Fields if Virtual Product @ Cart
The “Place Order” button is the call to action you want ALL customers to take, right? Well, changing its label to a more specific, custom message could mean a small increase in sales conversion.
Thankfully, you can try this with as low as 4 lines of PHP, even if you don’t know coding. Just copy and paste the snippet by following the instructions below and give your unique store a unique checkout message 🙂 Continue reading WooCommerce: Rename “Place Order” Button @ Checkout
When going legal… you need proof. Accepting the “Terms and Conditions” on the checkout is required in order to placer an order – but how can you, WooCommerce store admin, “prove” that the Terms and Conditions were actually ticked by the customer?
One of the solutions might be to save such acceptance in the database and print the acceptance on the order admin (and maybe on the customer invoice as well). So, here’s a quick PHP snippet you can simply copy and paste in your child theme’s functions.php file in order to (1) save and (2) print the choice on the Single Order Admin page. Enjoy! Continue reading WooCommerce: Save “Terms & Conditions” Acceptance @ Checkout
If you decide to delete or reorder checkout fields, you probably also need to change the checkout field with “autofocus”. In plain English, this is the checkout field where the keyboard cursor goes automatically to on checkout page load (by default, this is the Billing First Name).
As usual, changing this default behavior is very easy, even if you’re not familiar with PHP. In the example below, I’m removing the autofocus from Billing First Name and assigning it to the Billing Email field instead.
Copy the snippet, test it on your development environment and only then push it to your live website. Enjoy! Continue reading WooCommerce: Change Autofocus Field @ Checkout
Adding content to the WooCommerce Checkout page is very easy.
All you need is to identify the position where you want to show your content (by using my WooCommerce Checkout Visual Hook Guide) and then create a short PHP function that prints on screen the content you need.
Here’s how you can add a “calendar” field on the WooCommerce checkout page, let people decide the delivery date, and save this value in the order.
It took me ages to implement this for a client (it was much more complex, with available dates, different calendars based on different shipping zones, max weight per day, etc) so I thought of sharing the basic snippet with you! Enjoy 🙂 Continue reading WooCommerce: Display Order Delivery Date @ Checkout
Talking about UX optimization, the WooCommerce checkout is where you should focus most of your time. The checkout page of an ecommerce website is one of the main reasons for shopping cart abandonment – additional hidden charges, lack of trust, confusion and also, too many fields to fill out.
Today, we will see how to turn the “Address 2” field into a dropdown. This is if you sell to specific areas and you want to minimize the writing time – why not let customers pick from a list instead? Continue reading WooCommerce: Turn Address Checkout Field Into Drop-down
When my blog readers become official Business Bloomer supporters, a few custom fields are conditionally displayed on the WooCommerce checkout (thanks to this snippet or this other snippet).
For example I show a custom user Twitter field. Thanks to the snippets, this is automatically saved into the WordPress User Profile page. But as I love to thank each Business Bloomer supporter on Twitter, I wanted to generate an additional email reminder (to myself, or to an assistant’s email address for example) with the Twitter username I should be thanking. You might need something like this if you need to send a new customer email address to a coworker. Or maybe a new address to a dropshipper…
So, how do you send a custom email with some user information, after such user completes the checkout and a new WooCommerce order is created? Continue reading WooCommerce: Send Checkout User Info to Email Recipient
Yet another million dollar question… not! In fact, the answer is pretty damn easy: you should use both payment gateways on your WooCommerce checkout (sorry about the spoiler). And here’s the proof. Continue reading Should I use PayPal or Stripe @ WooCommerce Checkout?