How to use Uncle Chuckles’ Checkout block

Uncle Chuckles’ Checkout block is an extension for WooCommerce that allows you to place a checkout form on any page. Additionally, as well as offering some controls over the content and appearance of the checkout, you can optionally add an order bump product.

This plugin is mainly intended for sites that use WooCommerce to handle the sale of products, but aren’t set up as an online store. So instead of having pages of products that users can browse through, sites that sell products through standalone sales pages will benefit from this plugin. Online stores will be better served using WooCommerce’s standard checkout.

If you’ve not already downloaded a copy of Uncle Chuckles Checkout plugin, you can get your free copy here. I’ve also got an article to walk you through how to install a downloaded plugin.

Let me show you how to use this block on your own site.

You can search for the UC Checkout block in the block inserter. Note in the screenshot that the block icon is grayed out. This is because you can only insert one Checkout block per page and the block has already been inserted into the page.

Appearance

The first panel is Appearance and this has a few controls that apply to how the checkout forms are displayed. You have to click to open this panel. It is closed by default as you can use this block without changing any of these settings.

Each setting is activated or deactivated with the toggle switches.

Sequential Checkout

Normally, the WooCommerce checkout is presented as a single form. When Sequential Checkout is activated, the billing and, if required, shipping details forms are split up.

Chuckles has read a few reports that splitting checkouts into a few steps can reduce cart abandonments. This will likely be related to the principle of micro-commitments which claims that once someone has taken one small step (in this case entering their email address), a widely held human desire to remain consistent in behavior means checkout completions will increase.

This control is available if you want to test that principle in practice.

Hide Coupon Option

Depending on how WooCommerce is configured and the products in the cart, a checkout form may include controls to enter a coupon code. If you want to ensure a form never offers coupon controls, activate this switch.

Remove Phone Number Field

By default, checkout forms include a required field for the customer’s phone number. If you don’t need their phone number, toggle this on to remove the field.

Remove Company Field

If you’re selling to businesses, having their company name may be useful. For businesses selling to consumers, activating this to hide the company field probably makes sense.

Remove Additional Information Field

WooCommerce adds a general field for customers to add any useful information with their order. That might be customization data or, in the case of physical products, a note for delivery staff, such as “beware, the dog often lies in wait on the porch roof”. If you don’t want to receive notes from customers, toggle this on.

Display Forms in One Column

Checkout normally displays customer information forms on the left and order details on the right, assuming a wide enough screen. You can turn this on to force the checkout into a single column. This may be useful if you already have another column alongside the checkout, such as a list of user testimonials.

Settings

This checkout has been designed for businesses driving traffic to sales pages selling a specific product. This isn’t really suitable for sites where customers are browsing and selecting from a variety of products. That said you could allow customers to select other products, but the checkout must have a main product selected that is automatically added when the page loads.

The checkout will not load if a product has not been selected.

Use Custom Thank You Page

WooCommerce uses the same thank you page for all products after every purchase. This displays the product and order information to the buyer. If you want to display specific information to your customers immediately after a purchase, you can create a custom thank you page.

When the toggle is active, a text field to enter the ID of the custom page appears. You can get the ID of your custom page by opening it in the editor and looking at the information in the address bar.

Somewhere after the question mark, you will see post=. The number that appears after that is the ID of the page. In the example above, the page’s ID is 375.

Link Countdown Campaign

If you’ve installed the Countdown block plugin, you can link a countdown with the checkout. That means that the discount available when the countdown is active will not be applied to the order if the countdown has completed.

When the Link Countdown Campaign is toggled on, a new field labelled Countdown Campaign ID appears. The ID you enter here is actually the ID of the page that the Countdown block has been added to. To find the ID, open the page in the editor.

Somewhere after the question mark, you will see post=. The number that appears after that is the ID of the page. In the example above, the page’s ID is 375.

The product that has been added to the Countdown block will be automatically added to the checkout when the page loads.

Main Product ID

This will not be visible if a Countdown Campaign has been linked to the Checkout block. In that case, the product from the countdown will be added.

If you’re not linking a countdown, this is the ID number of the product that will be automatically added to the checkout.

One way to find the ID of a product is to go to the Products screen in admin and find the product. When you hover over the product, some links and the ID appear.

If you’re on a touch screen device, you may have to open the product and then look at the URL of the page. It should end with a string of text like post.php?post=174&action=edit. The number that appears after post= is the product ID.

Just enter the ID number into the Main Product ID field and it will automatically be added to the checkout when it loads.

Clear Cart on Checkout Load

If your site sells multiple products, you may want to turn on Clear Cart on Checkout Load. Because products may remain in a user’s cart across sessions, when someone views your checkout form, there may be additional products in it that can’t be deleted.

When activated, this setting will empty the user’s cart completely before adding the main product.

Add Order Bump

An order bump is a tactic for increasing the average cart value by offering customers an additional related product at the point of paying. This needs to be a product that should appeal to customers based on the main product they’re buying. When activated, two more panels will appear.

Order Bump Details

This first panel allows you to specify the content of the order bump box.

Product ID

You need to enter the ID of the product being offered as the order bump. You can find the ID in the same ways described above for the Main Product ID.

Image

Adding an image is optional. Click the button and upload an image or select from the Media Library. If you change your mind, the Clear image link will remove the image.

Heading

Enter a heading to appear at the top of the box.

Product/Offer Description

You should keep the text for the order bump offer short, but descriptive.

Set Discount Price

In most cases, order bumps will offer a product at a lower price. If you add a product to your site specifically to be an order bump, you can set the price in the product edit screen and use that in the order bump box.

If the product is sold separately at full price, you can set a discount price. This will override the normal price for purchases made this checkout form only.

Order Bump Appearance

You have some control over the appearance of the order bump box. Your instinct will probably be to make this look stylish to blend in with the appearance of your site. However, making it clash and stand out will probably be a more rewarding approach.

These controls should be self-explanatory and you can see how they affect the appearance of the order bump box in real time.