Checkout Page Archives - Page 4 of 9

WooCommerce: The Elusive Nature of 1-Click Checkout

Increasing sales and conversion rates is one of the major goals of every eCommerce store owner. However, it’s no secret that you can only achieve it by attaining a peak level of user and customer experience.

While at the beginning of the dot com online shopping era, customers were elated with the mere fact that they could buy anything they desired from the comfort of their homes – no matter the payment method or how long the delivery takes. Customers today are very particular about their preferences and expectations – especially when it comes to checkout.

Checkout is an essential factor in improving customer experience as it’s where your customers finalize their sales and pay for the products or services you offer. For example, Amazon – one of the biggest eCommerce giants, provides an optimal and one-click checkout experience to its customers.

While many eCommerce companies still cling to the multi-step checkout process – one-click checkout delivers simplicity and speed in the customer checkout process. The key is to make checkouts smooth and quick – eliminating the hassle of entering card details repeatedly for your customers. Out of 69.80% of cart abandonment rate – 18% of customers abandon their carts because of a long and complicated checkout process.

The solution? PeachPay, the one-stop-shop checkout & payment plugin for WooCommerce.

An instant and less complicated checkout process significantly impacts conversion rates and boosts your sales. So, in this article, we’ll see how you can use and enable PeachPay – an excellent WooCommerce-funded checkout & payment plugin, to boost conversions and sales.

But first, let’s quickly see how a one-click checkout solution will benefit your WooCommerce store.

WooCommerce: Add a WordPress Customizer Setting

If you’ve taken the ConfigureWoo online course, you’ll know that WooCommerce adds its own “WordPress Customizer” section called “WooCommerce”, indeed. From there you can manage some settings such as the store notice, product images, checkout fields and so on.

What if you want to add your own settings, and let yourself or your client toggle options or type input values, so that this can be applied to your current WooCommerce website? Well, that’s quite doable, so in this post we’ll see how they do it. Enjoy!

WooCommerce: Update Order Field Value After a Successful Order

We’ve already seen how to update user meta after a successful order, but this time our goal is to “correct” or “edit” a checkout field value after the order is placed.

You could for example add a phone number prefix if it’s not there, and by doing so, correct the phone number before sending it to your courier. Likewise, you could remove punctuation, trim spaces, format accents, and do any manipulation you desire on whatever order field.

So, here’s how they do it. Enjoy!

WooCommerce: Checkout Test Automation 101

Testing the WooCommerce checkout is extremely important for your ecommerce business.

Every time you install a new plugin or update WordPress you might run into issues: for example, the cart and payment pages could stop working until you fix the problem.

You don’t want to lose sales and undermine your website reputation, do you? So you must test all the WooCommerce processes on a regular basis, also called “end to end” (E2E) testing.

But how can you do that without wasting too time?

Spoiler alert: simply create an automated test, and let the robot test your WooCommerce website on a regular basis, so that you never have to worry about doing it manually.

Luckily for you, there are some great tools – such as the two you will soon read about – and WooCommerce professionals that can do it for you on a daily or whatever basis.

Here’s your quick introduction to setting up your checkout test automation.

Cheers to a checkout page that works 365 days a year.

WooCommerce: Multiple Stripe Accounts (Solved)

The WooCommerce plugin fully integrates with the WooCommerce Stripe Payment Gateway plugin, developed by Automattic itself. With this free plugin, Stripe payment gateway can be enabled via the WooCommerce settings and once your Stripe “Live Publishable Key” and “Live Secret Key” are set, your WooCommerce shop is ready to take credit card payments powered by Stripe.

Now, there is some documentation online which explains, with a little bit of code, how to switch Stripe account programmatically and conditionally i.e. for a given product ID or product category slug – same as what we’ve seen recently with PayPal Standard (here’s the tutorial for using different PayPal accounts inside a single WooCommerce installation). For example, you may want to use a Stripe account for digital sales and a different one for physical products.

Unlike PayPal Standard, however, online documentation and snippets are quite out of date and require, often, to create a custom Class which is always a difficult task in PHP programming. Thankfully, there are new WooCommerce Stripe hooks and therefore it’s possible to use different / multiple Stripe accounts in a single WooCommerce installation.

Please read the disclaimer below and – only then – enjoy!

WooCommerce: Multiple PayPal Accounts (Solved)

The WooCommerce plugin comes with its own free version of PayPal Standard. PayPal can be enabled via the WooCommerce settings and once your PayPal email is entered your WooCommerce shop is ready to take PayPal payments.

Now, there is extensive documentation online which explains, with a little bit of code, how to switch PayPal account programmatically and conditionally i.e. for a given product ID or product category slug. For example, you may want to use a PayPal account for consulting services, another for online courses and another for physical products.

By adding this simple code and hooking into woocommerce_paypal_args is indeed possible to use different / multiple PayPal Standard accounts in a single WooCommerce installation.

However, there is an outstanding problem with “IPN Validation“: once you tell WooCommerce to use a different PayPal email account, the WooCommerce order is correctly placed, but its status goes “on hold” because IPN validation on the PayPal end fails (and that’s because you’re using a different PayPal account).

So, here’s the fully working version, included the IPN validation fix. Please read the disclaimer below and – only then – enjoy!

WooCommerce: Maxlength and Minlength for Checkout Fields

If you’re familiar with HTML, you can add “maxlength” and “minlength” attributes to an input field in order to force its value to be min X and max Y characters long. This is all good and easy, so we might as well see what happens on the WooCommerce Checkout page once we apply such attributes to a given custom field.

Spoiler alert: maxlength works, while minlength does not. Hence, forcing a given checkout field to have a minimum length is actually quite impossible, unless we validate the posted data (a field input value that is not long enough) once the checkout is submitted. That’s a bummer, and in this article I will also explain how to contact WooCommerce so they can improve a functionality / fix a bug.

Enjoy!

WooCommerce: How to Customize Checkout For Conversions

I had the honor to speak at WCEU 2020 thanks to WooCommerce, who hosted me in their Sponsor track. It was a short and sweet lightning talk on the first day (Friday), called “Customizing The WooCommerce Checkout To Improve Conversions“, followed by a live coding session on Saturday.

Here’s the video recording of the lightning talk, as well as a few PHP and CSS snippets you can copy/paste to improve your WooCommerce Checkout and immediately expect an increase in conversion rate. So, enjoy the video and then go test the snippets you find below!

WooCommerce: Show SKU @ Cart, Checkout, Order & Emails

When SKU matters to the end user, displaying it in the Cart page, Checkout page, Thank you page, My Account View Order page and Order Emails under the item name is a must.

Ideal for B2B businesses and international brands, this simple customization can help you learn how to add any sort of content under the Cart/Checkout/Order item names. Simply use the same hook and try “getting” something different than SKU with this guide. Enjoy!

WooCommerce: Dynamically Hide / Show Checkout Field

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 has a specific value.

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 input IDs and change jQuery accordingly. Enjoy!

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!

WooCommerce: Show Checkout Even If Cart Is Empty

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!

WooCommerce: Rename “State” Label @ Checkout

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!

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!

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!