Share a functional plug-in that improves the shopping cart process: CheckoutWC.

We use WordPress to build an independent website. The demo site is a TOC site for electric bicycles. We are now going to simulate a customer’s shopping process. When he sees a product, he may enter it to buy it after entering. Add to the cart, and then let’s go to the cart.

If the user feels that the product meets his needs, he will enter the checkout page, which is what we call the checkout page.

Woocommerce default checkout interface:

The default checkout page of Woocommerce has a lot of form content that needs to be filled in. For example, he needs to fill in his name, including his country, street, etc., and some others. Because there is so much content to fill in, many Customers will find it very troublesome.

1 Woocmmerce theme default checkout form

For such a checkout page, we usually use some plug-ins to improve its process. That is, the plug-in checkoutWC we are going to share with you today. We also use this plug-in to find our installation plug-in directly in the background. Click to upload the plug-in, select the file, and then go directly to install the highest version. Click to open the installation. After the installation is successful, we activate it.

CheckoutWC plugin installation:

After the installation is successful, we can see below that there is an extra function button like checkoutWC. It has many settings. First, we enter its start interface. What we provide here is a commercial version. It has been activated directly, so you don’t need to worry about it. This is the activation code for the first step to activate it.

2 Checkoutwc activation captcha e1713624944136

Select the checkout template:

Then, select a template for our checkout page. We click directly to select a template. Then, it has some checkout template files built into this plug-in. We can just choose the style we like here.

3 CheckoutWC Template Selection

Checkout page demo:

It provides 5 templates here, so we can preview one of these templates at will. For example, if we look at the second one after opening it, our checkout page will display this effect and the effect we just saw.

3 CheckoutWC Template Preview e1713625087246

The content of this form will appear very concise. It divides the entire checkout process into several steps. For example, the first step is to fill in the order address. After filling it out, we will enter the payment module. Previously, these order addresses and payment modules, including some other content, were placed on one page, so customers would find it very complicated. We have divided it into several steps, so users will find it very simple to operate.

Checkout template settings:

This is one of the templates, so you can choose the template you need. For example, let’s choose the template below. You can take a look. For example, we can activate this template directly. After activation, we can enter. The next step is to click design:

5 CheckoutWC Template Style Settings

For the template we selected, we can also set the content inside. For example, we can upload a logo to it. Okay, the next one is the content of our form. We see the name of our form. There is a name on the top of the form and written content below the form. We use the templates it provides. For example, if we preview the templates, these templates put the name directly in the form, so the overall look is different. It will be so messy and it will look simpler, so our setting item is mainly for one of the names above, we just choose the first float.

Then the next one is the Footer Text. When we see this form after entering this interface, it is equivalent to changing it. It does not have our regular WordPress header and bottom, so we must separate the information on these sides. Set it up, then the bottom now displays our copyright information by default, so here you can fill in other content you want and then there are some other settings below, such as our font, which is our checkout page, if you are not satisfied with these fonts, you can choose other fonts. Then there are some below, including our background color, text color, etc. You can set these.

We have just selected a template and set the logo and our colors. The next one is that we can preview it. This preview is the template style we currently selected, and it is this style. It is divided into three steps. The first is the shopping cart, and the second is filling in the user’s order information. It is very refreshing to fill in here.

6 CheckoutWC Checkout Flow e1713625236501

For example, fill in its first and last name, including its address, select its country below, etc., and then you can see a product it selected on the right. Of course, you can also adjust the quantity of this product, and then its price will also change accordingly. After filling this out, you can proceed to the next step, which is the preview’s content.

Then open it, that is, directly open the content we just set. We just previewed it, and it did not take effect. We can only open it and save it. Now we go back to our homepage, then we enter the checkout page, enter our shopping cart, and then we enter checkout. It will take effect so that our entire page will look very refreshing, and then the user will check out. It can reduce the number of abandoned orders when the transaction is completed, which is the main function of this plug-in.

Of course, in addition to this function, this plug-in also comes with some other functions. For example, if we continue to look down, the first one is the start, and the second one is the template we just mentioned. You can choose the template here.

Pages page setup:

The third one is our pages. Our pages are mainly for modifying some components on the entire page of our shopping cart. For example, you can close the shopping cart process, or you can close the shipping process for it.

7 CheckoutWC Page Module Settings e1713625345171

Normally, it has 4 steps: the first is to enter the shopping cart, the second is to fill in its order information, and the third is to choose its shipping method. Many times, when we are building an independent website, our shipping costs may be of various types, such as free or expedited shipping. Then, he can choose his mailing method, and the following is the payment. method, you can turn it off here according to your own actual situation.

The following two enable one-page shopping, and the following one enables one-page shopping. It is the same as before. We check it and then click Save. In this case, it will set our steps as one step. We see that all the content is filled in on one page, but this method is similar to our previous method, so we generally do not open it, and then other orders can also be reviewed. After he submits the order, If there is no way to pay, we need to review it before it can be paid. Under normal circumstances, we will not set it up like this.

Checkout effect demo:

The following is some registration process. We enter an incognito mode, select a product, add the product to the shopping cart, and checkout directly. You will find that there is a place to fill in the personal information above:

8 CheckoutWC Visitor Status Display Method

The place for personal information is that he can fill in an email here. After filling it out, we will consider it registered. Here, we can set it to activate it as a user directly. Of course, you can also use the default none. There is no void. The same is true for itself so that we can set up a user for Wukongmen. He can place orders only after registering, or he can place orders if he is in guest status. Normally, we are all in guest status.

The shopping process of foreign consumers is different from that of our domestic consumers. Our domestic consumers usually register as members first and then go to buy things. However, for foreign users, for an independent website, you are If there is no registered user, he does not want to register first and then buy it. He wants to be a tourist, so fill in his delivery address, and you can just send it to him directly.

The next one is a matching method. As we just said, he can register as a member and buy things. Then, the purchase order will be placed with the registered user. Another way is that he is a tourist and then goes to buy something. Then, when he purchases something, he must provide an email address. Currently, it will automatically use this email address as its user and assign the order to the user, so that’s an activation state.

Shopping cart list:

There are some other instructions below. For example, the first is the notification information of his order, and the next is adding a coupon. For example, when we purchase, we see a piece of text here. When it is clicked, Here you can enter a discount coupon, which means it is used as a link. It is a form state if you do not use it as a link. For example, if we refresh it, now we see that it is a form, but this One possibility may cause the user to make some misoperations because if he does not have a coupon, he does not know what to fill in, so we will hide it normally.

9 CheckoutWC Coupon Hide as Link Format

The next one is to hide its optional content. For example, we have some content that is not required in this form so that we can hide it. For example, in his company, this is not required. , we can hide it. After hiding it, the content inside will become less, and the user’s input will be smoother. There are some others below that you can check out. Then we see a place here where we can enter its first name, last name, address, and some other content. Here you can turn it off or reduce it, such as Phone, if it is not a required field, just turn it off.

The following are some entrances for quickly inputting their address. For example, we can directly call its Google address. Normal foreign users will generally have a Google email address, so Google is an account, and it will fill in the account. An address, then if it is logged in to a Google account, directly fill in the address of the Google account. However, this method may cause his delivery address to be different, so we will not enter it under normal circumstances. It turns on.

The Mobile setting is mainly for the mobile phone. For example, on the mobile phone, we can activate coupons or the logo of his credit card. Generally, we can default to it.

The last one is an order payment. CheckoutWC is a plug-in. It can be used for all orders. Maybe you are not a product, so it can also be activated. On that page, you can directly use a checkout process like checkout. We usually do this. product, so there is no need to open this.

When the filling is completed, we can send him an email. Then, this email is linked to our woocommerce. Normally, if a consumer purchases a product in the store created by our WordPress, we usually send him an email telling him that we have received your order, so after he completes all the checkout inputs, we can directly set it to a processing status.

10 CheckoutWC order status after completion

The next one is to activate Google Maps. You must apply for an API for Google Maps. When we are independent, we often need to use some of Google’s content, such as Google Maps API, Google Translate API, or others. Google content, such as Google verification, so what does this Google Map mean? When a user purchases this product, he can see the user’s address in the order, displayed using a Google map, and we can hook it up.

The next one is in its user center. For example, if we return to our independent station’s homepage, we see a user center to click in, but it may be different for different templates. Here, we click on our order.

Of course, we don’t have an order here. Under normal circumstances, if he has an order, he can see his order status here, which is what it means, and then click Save.

Cart Summary is a setting for our shopping column. In the shopping column, we saw that the shopping column we just checked out is his shopping column. Then, you can make some settings in the shopping column, such as whether we allow him to modify it. Variables, the so-called variables, are to modify the color and size of the product and whether to add a delete button to these attributes.

12 CheckoutWC Shopping Cart Product Removal Function

Privacy Agreement page settings:

For example, it cannot delete a product now so that you can add a delete button. After he reaches this point and feels dissatisfied with his product, he can delete it. This button will directly help you delete it; this is also based on your own situation.

13 CheckoutWC Shopping Agreement Settings

The next one is whether to activate its sales price. We see here its actual payment price. If there are some products, we may set two prices: one is the market price, and the other is the sales price. Generally, depending on your situation, there will be one discount, depending on whether we need to activate our sales price.

Then, for another product in the cart, can it be clicked to return to its product page? The first thing is to close it to prevent users from abandoning the order because, under normal circumstances, in this step, we eliminate interference, and there is only one. The purpose is to allow users to check out quickly. This plug-in has been taken into consideration for us. Then, in our shopping cart, we display a short data. The so-called short data is the data of our products, for example, inside There are SKUs, etc. If you use the empty default one, a lot of content may interfere with users, so we use a short one. The following one is to add an agreement. The so-called shopping agreement is generally used when building an independent website, for some cross-border For customers in different countries, we need to add a shopping agreement, so just create a page in the accessories and select it here.