Checkout Page Archives - Page 2 of 10

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.

How to re-order shipping options on the WooCommerce checkout?

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.

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!