WooCommerce: Move Order Notes @ Checkout

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

WooCommerce: Add Shipping Phone @ 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

WooCommerce: Add Upsell Area @ Checkout Page

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

WooCommerce: 10 Easy Snippets to Increase Your Sales

I had the pleasure to speak at WordCamp Prague 2019. I spoke about “10 PHP Snippets to Increase WooCommerce Sales” and managed to show some simple coding to the audience. Trust me – increasing your WooCommerce sales can also be done with a free, short, easy PHP snippet.

So, given that I want to share all the snippets I talked about, this is a quick recap. Copy them, test them (a must!) and then use them. And let me know if your conversion rate and/or AOV (average order value) increased!

At the bottom of the page you also find my talk slides. Enjoy:)

Continue reading WooCommerce: 10 Easy Snippets to Increase Your Sales

WooCommerce: Display Required Field Errors “Inline” @ Checkout

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

WooCommerce: How to Blacklist Scammers, Emails, IP, Phones?

A WooCommerce email notifications pops up – yet another new order, money, revenue, happiness. However, hold on a second – money is not technically in your bank account until you’re forced to give a refund. Even worse, until you realize not only you had to give a refund, but also getting the item back costs you a fortune. And who knows how many times this is going to happen, mostly when you ship physical products.

Fortunately, there are ways in WooCommerce to blacklist customers, deny purchasing from specific countries, block certain IP addresses and do whatever you can to save money.

In the era of Amazon and online shopping we constantly hear of scams and frauds, so this is definitely a topic that shouldn’t be underestimated. A small plugin investment or a few lines of code could actually make a big difference.

Besides, choosing the correct online payment methods (which should give you some sort of anti-fraud out of the box) and avoiding offline payments (bank transfer, cash on delivery, check) are important measures you should already have in place.

So, moving beyond the actual online payments, there is something else we could do to stop scammers placing an order (yes, even before paying or trying to pay). Prevention is better (and more affordable) than cure, right?

I’ve put together a list of WooCommerce plugins and settings you should look into from today on. And sooner rather than later. Enjoy 🙂 Continue reading WooCommerce: How to Blacklist Scammers, Emails, IP, Phones?

WooCommerce: Move / Remove Coupon Form @ Cart & 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 Checkout 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 remove the coupon form in the Cart page and how to move the same to the bottom of 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

WooCommerce: Disable Theme’s WooCommerce Template Overrides

A client purchased a premium “WooCommerce-ready” WordPress theme. Unfortunately, this theme comes with a /woocommerce folder, which means theme developers completely override WooCommerce template files by copying them to the folder, and customizing each of them by hand to match their design and functionality needs.

As you know from my “How To Become an Advanced WooCommerce Developer?” article, however, themes should NOT come with a /woocommerce folder – instead they should use “hooks” (actions and filters) to amend default WooCommerce plugin layouts and behavior. This is a huge problem for best seller themes and their legacy coding – and also a reason most themes break when you update WooCommerce…

So the question I asked myself was: how can I disable the entire /woocommerce folder (i.e. ALL WooCommerce template overrides) in a given theme or a single template, so that I can use the default WooCommerce ones instead?

Continue reading WooCommerce: Disable Theme’s WooCommerce Template Overrides

WooCommerce: Cart and Checkout on the Same Page

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 (Checkout) page.

But first… why’d you want to do this? Well, if you sell high ticket products (i.e. on average, you sell no more than 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?

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: Cart and Checkout on the Same Page

WooCommerce: Add Checkout Fees Based on Custom Radio Button

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

WooCommerce: Hide Checkout Fields if Virtual Product @ Cart

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, as well as a handy mini-plugin, that checks if there are only “virtual” products in the Cart and hides all the billing fields and order notes (except name and email).

The mini-plugin also allows you to enable this for free virtual orders only, and to move the relevant billing fields under a toggle instead of removing them all together.

Enjoy!

Continue reading WooCommerce: Hide Checkout Fields if Virtual Product @ Cart

WooCommerce: Remove Mini-Cart Widget Dropdown

Less is more (sometimes). On this same website, I’m already forcing max 1 product in the Cart and automatically redirecting users to Checkout upon add to Cart. On top of that, I’ve disabled WooCommerce cart fragments for performance reasons.

As a result, I definitely don’t need the whole “Mini-Cart Widget Dropdown Content”. To test, try to “hover” onto the shopping cart icon on the top right, and you’ll notice there is no cart dropdown.

Well, this is how it’s done – I love when a complex thing is fixed with one simple line of PHP!

Continue reading WooCommerce: Remove Mini-Cart Widget Dropdown

WooCommerce: Rename “Place Order” Button @ Checkout

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