Checkout Page Archives - Business Bloomer

WooCommerce: Prevent Orders From Blacklisted Email Addresses

In some cases, you may need to block certain customers from completing orders on your WooCommerce store.

This could be due to fraud prevention, policy violations, or simply wanting to prevent repeat offenders from making purchases. Thankfully, WooCommerce provides the flexibility to implement an email blacklist with just a few lines of code.

In this tutorial, I’ll show you how to add a simple email blacklist using a custom function that checks the customer’s email at checkout. By adding these 8 lines of PHP to your theme’s functions.php file, you’ll be able to prevent orders from specific email addresses efficiently. Enjoy!

WooCommerce: Add Checkout Fee Based On Shipping Class

Whether you’re dealing with bulky items, fragile goods, or specific shipping items, you can leverage WooCommerce’s flexibility and implement a fee structure that accurately reflects shipping complexities, improves profit margins, and enhances overall order management.

This tutorial gives you a practical solution – dynamically adding checkout fees based on whether a given shipping class is in the cart.

Enjoy!

WooCommerce: Add Checkout Payment Section Heading

There are a couple of reasons why the default WooCommerce checkout page doesn’t have a separate heading for the payment section.

One is about design; WooCommerce might be aiming for a clean and uncluttered checkout process. A dedicated heading might add visual weight to the page, potentially making it feel more complex. By omitting the heading, they keep the focus on the actual payment fields.

The other is about logic: the order of information on the checkout page is designed to be logical. Shipping information naturally follows the billing address section, and most users inherently understand this as the payment section.

However, the lack of a heading can be a point of contention. Some users might prefer a clearer distinction between sections. And a call to action above the payment options can maybe help you convert better.

Let’s do it.

WooCommerce: Add Shipping Rate Description @ Cart & Checkout Page

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!

WooCommerce: No Default Shipping @ 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.

Enjoy!

WooCommerce: No Default Payment @ 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!

WooCommerce: Read-only Checkout Fields

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.

Enjoy!

WooCommerce: Super Simple EU Vat Number Validation (VIES)

As an EU merchant dealing with VAT customers, I often find myself doing manual checks on the VIES VAT number validation website. Thankfully most of my customers are outside the EU so I don’t use the tool often, but still, for a developer this is just a waste of time!

By studying the available options on various online forums, I found a super simple workaround that doesn’t even require signing up for an API.

In fact, you can simply visit an URL and get the response straight away – which means we can access the same URL via PHP, get the response, and possibly return an error on the WooCommerce Checkout page in case the number is not valid.

Read on to find out how I use this validation on this same website.

WooCommerce: Add Hyperlink to Shipping Method Label @ Cart & Checkout

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!

WooCommerce: Checkout Anti-Spam Honeypot

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!

WooCommerce: Disable Payment Gateway By Product Type

Ever wondered if you could toggle payment gateways based on whether a given “product type” is in the WooCommerce Cart? For example, disable PayPal if there are simple subscription products, or enable Stripe only when there are variable products?

Well, with this simple code (and the 2 examples) you find below, you can manage to achieve just that. The second example regards the WooCommerce Subscriptions plugin, as this requires some plugin-specific functions to check for the product type. Enjoy!

WooCommerce: Easily Get Cart, Checkout, Account, Product URLs

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!

WooCommerce: Refresh Checkout Upon Any Input Field Change

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!

WooCommerce Dynamic Pricing: BOGO, Buy X Get Y & Conditional Discounts

Offering promotions is a great way to attract customers and increase sales in your online store. Some promotion strategies that have proven effective are the Buy One Get One Free (BOGO), Buy X Get Y, and WooCommerce dynamic pricing.

Taking this into account, you may want to offer reduced prices to your users in these various circumstances:

Run a flash sale for a limited time.
Encourage your customers to buy specific products in a clearance sale.
Offer product bundles to big spenders.
Add free shipping when someone makes a bulk purchase.
Automatically add gift items as part of your store’s loyalty program.

Without dedicated plugins, these strategies might be utterly difficult to conduct. To save yourself from the coding hassle, you should pick a WooCommerce dynamic pricing plugin to quickly get it up and running.

In this blog post, we will discuss how to create a BOGO promotion, Buy X Get Y, and dynamic pricing rules in WooCommerce based on user conditions. And it requires no coding knowledge. Let’s dive in.

WooCommerce: Close Button @ WooCommerce Checkout Notices

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!

WooCommerce: Edit “Ship to a Different Address?” @ Checkout

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!

WooCommerce: Turn Checkout Into a Quote System

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.

Enjoy!

WooCommerce: Hide “View Cart” Button @ Mini-Cart

Your goal as a WooCommerce entrepreneur is… to get paid!

We’ve already seen how to put Cart and Checkout on the same page to save your customers a step and go straight to the purchase page – but no matter if you still have a Cart page or not, you may be interested in hiding the “View Cart” button from the cart widget dropdown, so that customers can go straight to the Checkout page and convert.

Here’s a super quick snippet to achieve just that. Enjoy!

WooCommerce Subscriptions: Display Start-End Dates @ Cart & Checkout

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!

WooCommerce: Upload File @ Checkout Page

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!