Checkout Page Archives - Business Bloomer

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!

WooCommerce: Add a New Country For Billing/Shipping

There are times when the WooCommerce countries database is simply not enough. While the WooCommerce team is usually very fast at updating its code (though, the newest country is apparently South Sudan, which became independent in 2011, the year WooCommerce launched!), you may need to DIY in certain cases.

Think of Northern Ireland for example. It’s not a “country”, however most Irish businesses would ship to Northern Ireland and not to “UK”, so having “Northern Ireland” in the Checkout page country dropdowns may help.

In this edge case study, we’ll basically take a look at how to add a custom country, how to make sure this custom country shows at checkout as a possible option (and in the shipping zones admin section), and also how to assign to it a custom list of states. You never know!

WooCommerce: Donation / Fundraising Plugins

Are you looking for ways to raise funds for a charity event or a non-profit organization? There are a multitude number of ways to go about it.

You can host an exclusive or virtual fundraising event, run email campaigns to collect funds, or even encourage friends and families to contribute their parts to the fund. However, these ways require a lot of legwork, including finding a place to host fundraising events, inviting guests, or hiring an email strategist to run marketing campaigns – which is time-consuming and expensive.

The solution? Collecting online donations via WordPress or WooCommerce plugins to effectively raise funds for special causes, such as charities, non-profits, or relief funds.

This article shares the best, easy-to-use, affordable WooCommerce fundraising and donations plugins you can use. Let’s get started!

WooCommerce: Populate Checkout Fields From URL

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!

WooCommerce: Purchasing Power Parity (PPP) Discounts

Since… today, Business Bloomer online courses are affordable for everyone.

It’s unfortunate that digital products (such as our WooCommerce online courses) are priced in USD dollars but there is no adjustment for less privileged countries.

This is a pity because content should be accessible to ALL WooCommerce developers around the world, no matter their income level. I receive dozens of emails per month from amazing people who can’t really afford a USD 397 course because they make that amount of money in 4 months if they’re lucky.

So, let’s change this. Here comes Purchasing Power Parity (PPP) to the rescue.

PPP is a special metric that tells us the real “purchasing power” of a given country. Take a basket of identical goods, pay in your local currency in your own country; purchase the same items in USD in the United States. Compare that difference to the actual exchange rate. Now you really have an idea of how much a country can afford to pay for that basket of goods.

Let’s talk in plain English. Are you from India? You may get up to 75% off our online courses. Are you from South Africa? Maybe a 59% discount! Are you from Argentina? 61% off on average. Are you from Norway? No discount, sorry (it seems you do better than the US). And so on…

In this post, I’ll go through a quick PPP math example to give you some context, and then I’ll tell you how I implemented PPP discounts in this same WooCommerce website.

Want to help me test the PPP discount functionality which is currently in beta? Add a course to cart e.g. CustomizeWoo PRO, select your billing country at checkout, and leave a comment below with the discount you got, if any.

Enjoy!

WooCommerce: Change Product Quantity @ Checkout Page

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!

WooCommerce: Rename “Place Order” Based on Chosen Payment Gateway

We’ve already seen how to rename the “Place Order” button on the WooCommerce Checkout page, but today I want to find a way to rename it dynamically and conditionally i.e. based on the payment gateway that is selected while checking out.

The snippet requires the payment gateway “ID” – here’s a quick tut in case you don’t know how to retrieve that: How to Find WooCommerce Payment Gateway ID

Other than that, it’s pretty simple logic. Enjoy!

WooCommerce: How to Enable WooCommerce Payments

Payments on your eCommerce store are the most important touchpoint between your customers and business sales. Hence, an optimum payment solution that’s seamless, quick, and secure plays a critical role in ensuring a quality customer experience.

Over 17% of customers abandon their carts because of concerns with payment security, and 13% abandon them because the price is in a foreign currency. Thus, it’s vital to choose a payment method that accepts global currencies and ensures a secure checkout – while making the checkout process easy for your customers.

However, from including digital wallets to third-party payment solutions and managing transactions – choosing a suitable payment solution that facilitates this process for your WooCommerce store can get challenging. This is where WooCommerce Payments comes into the picture.

In early May 2020, WooCommerce released its new version WooCommerce 4.1, with two new features – including WooCommerce Payments, which provides a simplified way to accept and manage payments in your store.

This article shares more about WooCommerce Payments, their pros and cons, and an easy way to enable them on your WooCommerce store.

WooCommerce: Retain Field Values @ Checkout Reload

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).

Enhoy!

WooCommerce: How To Enable “Buy Now Pay Later”

Several eCommerce businesses are increasingly adopting flexible payment solutions – understanding customer needs and demands. Because in today’s digital world of Apple Pay and UPI solutions – a rigid approach toward payment solutions costs businesses a huge deal of sales, customers, and lost revenue.

48% of customers prefer online stores that accept multiple payment methods. In addition, Sezzle’s report suggests that the product’s over-cost is the primary reason behind 55% of abandoned carts. Hence, a flexible payment solution can help reduce cart abandonment and improve your store’s sales in these situations.

And one such highly flexible and customer-friendly payment solution that allows your customers on a tight budget to buy the products they want is – Buy Now, Pay Later (BNPL).

BNPL is a perfect payment solution that seamlessly integrates with WooCommerce and doesn’t require customers to pass a credit check or pay interest.

So, in this article, we share the top BNPL solutions to integrate with your WooCommerce store. A growing number of BNPL options, including some of those appearing in this list, can easily be configured through PeachPay, a one-stop-shop checkout & payment solution for WooCommerce stores.

But before we get ahead of ourselves, let’s learn more about this type of payment option and its benefits for your store’s sales and overall growth.

WooCommerce: Only Allow to Buy a Product Once

In the era of online courses, subscriptions, custom-made products and product personalization, it may happen a scenario where a user can only purchase a product once in their lifetime.

In this short tutorial, we will see how this is done.Clearly, the user must be logged in in order for the code to trigger, so this applies to stores that require checkout login in order to proceed with the order.

Enjoy!

WooCommerce: Display Customer Address @ Order Pay

The WooCommerce Order Pay page URL is generated by the store admin while creating a manual order from the backend. This URL is then forwarded onto the client, where they can pay for the order and complete their purchase.

The other annoying thing about the order pay page, together with strict page permissions, is the fact that the Order Pay page shows no customer billing/shipping address whatsoever. The customer needs to trust in you 100000%, because they’re about to submit a payment without knowing whether they’re paying for the right thing.

Let’s see how we can add the billing/shipping customer address at the top of the Order Pay page. Please note that printing personal data on a public URL is dangerous, so you need to make sure you don’t share the Order Pay URL with anyone but the customer in such case.

So, here’s a quick fix for you. Enjoy!

WooCommerce: How to Enable Distraction-free Checkout

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.

WooCommerce: Automatically Register Guest Checkouts

A disclaimer first: please make sure this is legal in your country and also that your checkout visitors are aware they will become registered customers without explicit consent (i.e. without ticking a “create an account on this site” checkbox).

So, yeah, there is a way to turn guest checkouts into registered customer ones. Also, there is a neat WooCommerce function to bulk add all past guest orders to a new customer (wc_update_new_customer_past_orders).

Of course, “Allow customers to place orders without an account” must be enabled in your WooCommerce settings, otherwise you’re not allowing guest checkouts and the snippet will be irrelevant.

So, here’s the fix. Enjoy!

WooCommerce: How to Build a One-Product Website

Crocs started by selling just foam clogs, and now they’re a billion-dollar company. Casper earned millions selling only mattresses, while Sara Blakely became one of the youngest self-made female billionaires with Spanx, which sold only underclothes initially.

Can you guess what all these brands have in common? It’s that they started off by selling just one product, built their entire brand around it, and yet became successful.

Today, most eCommerce businesses sell multiple products – because of the presumption that the more products you offer, the higher chances of converting visitors and making a sale. But from managing operations to inventory, a store with many products comes with its own problems.

On the other hand, selling just one product can streamline your store’s operations and make inventory management and handling orders easy.

It allows you to focus all your energy and resources on creating, marketing and improving a single product. If done correctly, this can help you build a significant brand value – as people will start associating your store with your flagship product, making you an expert in your market and helping you stand out from your competitors.

Given its benefits, creating a one-product store is an excellent idea – all you practically need is the right product for your customer’s needs and a solid, easy-to-navigate website.

Lucky for you, this article will help you with the latter, taking you through all the steps of creating a fantastic WooCommerce website for your one-product store.

Let’s begin!

Join 75,000+ Monthly Readers & 16,500+ Subscribers.

Become a Business Bloomer Supporter.