Instant Checkout for WooCommerce – Guide

Instant Checkout for WooCommerce allows you to integrate a scalable shopping cart into your WooCommerce website.

Store Owner’s Guide #

Installation #

Log in to your WordPress Admin Panel.
Navigate to the WordPress Admin Dashboard → Plugins → Add New.
Click on the Upload Plugin button on the top left corner of your screen.
Next, click the Choose file button in the box that appears below.
Select the zip file that you have downloaded and upload it.
Click on the Activate Plugin button.

General Settings #

To access Instant Checkout plugin settings, in the WordPress Admin Dashboard, navigate to WooCommerce > Settings > Instant Checkout.

Within the Instant Checkout tab, users will have two settings options: General and Customization.

General Settings – Configuration #

Within General Settings, the following options are available to configure:

Instant Checkout – Display instant checkout’s side cart on the website.

Auto-open cart – Enable/disable the ability to automatically open when a product is added to the checkout cart.

Product Image – Display the product’s image on the cart’s layout.

Quantity Selector – Enable/disable the quantity selector for products in the cart.

Coupons Field – Display the coupon field in the cart.

Suggestion Cart – Display the suggested or recommended products in the checkout cart.

Suggested Items Title – Display the titles for suggested items.

Select the enable button to enable Instant Checkout plugin functionality.

Widget Cart Support #

To add a widget, the user must add the Instant Checkout widget from the Gutenberg block.

First, enable widget cart support in plugin settings.

Next, navigate to WordPress Admin Dashboard > Appearance > Widgets.
A page will appear where the user can add the desired widget under the desired section.

After selecting the desired section, such as Sidebar, click the + button to add the widget.

Now, select Instant Checkout from the Guttenberg block.

Select the Save button.

Front-End

Before

After

Suggestion Cart #

In order to use the Suggestion Cart option, the user must define the cross-sell for each product. To add cross-sells, navigate to WordPress Admin Dashboard > WooCommerce > Products > All Products.

Select the desired product.

Now, under the Product data section, select Linked Products.

Under the Cross-sells search, select the desired product(s) to link. The cross-sell products will now display on the cart screen.

Layout #

The admin can now change the layout of the Instant Cart.
Navigate to the WordPress Admin Dashboard → Settings → Instant Checkout → General Settings.
By default, the sliding option is selected.
Go to the Layout and select the layout for the instant cart.
It offers two layouts.
- Sliding.
- Popup.

Click on the Save Changes button.

Front-End Impact

Sliding Layout #

Go to the shop.
Add a product to the cart.
Click on the cart icon at the screen’s bottom right side.
The cart will slide open from the right side.

Popup Layout #

Go to the shop.
Add a product to the cart.
Click on the cart icon at the screen’s bottom right side.
The instant cart will pop up.

Allow Fast Checkout #

The users can checkout directly from the instant popup and sliding panel.
To enable Allow Fast Checkout, go to General Settings.
Scroll down to the Allow Fast Checkout.
Click on Enable.

After enabling the Allow Fast Checkout,.click on the save changes button.

Direct Checkout #

Enabling Allow fast checkout will add a Direct checkout option.
Direct checkout allows the user to skip the cart section and takes the user directly to the checkout section in an instant sliding and popup.
To enable Direct checkout, select Enable from the Direct checkout option.

Click on the Save Changes button.

Front-End Impact

Fast Checkout

Go to the shop.
Add a product to the cart.
Click on the cart icon at the screen’s bottom right side.
Click on the Checkout button.
The checkout page will be opened in the sliding or popup layout.

Sliding Layout

Popup Layout

Direct Checkout

Go to the shop.
Add a product to the cart.
Click on the cart icon at the screen’s bottom right side.
The checkout page will be opened in the sliding or popup layout.

Sliding Layout

Popup Layout

Shipping Details #

Users can see and select the shipping details from the cart.
Go to the Shipping Details option in the General Settings to enable shipping details in the cart.
Click on the Enable option in Shipping Details.

Click on the Save Changes button.

Front-End Impact

Go to the shop.
Add a product to the cart.
Click on the cart icon button at the screen’s bottom right side.
The instant cart will open.
Shipping details will be displayed in this panel.

Quick View Variable Products #

The user can add the variation of a variable product directly from the shop page without redirecting to the product page.
Go to the Quick View Variable Product in the General Settings.
Click on the Enable option in Quick View Variable Products.

Click on the Save Changes button.

Front-End Impact

Go to the shop.
Select options button will be available for the variable product.
Click on the Select options.

Select the variation from the drop-down menu.
Click on the Add to Cart button.

Replace Cart Page #

The admin can change the cart page with the instant cart. Whenever the user clicks the cart link, the instant cart will either pop up or sliding will open instead of the default WooCommerce cart page.
Go to the Replace Cart Page option in General Settings to enable the replacement cart.
Click on the Enable option on the Replace Cart Page.

Click on the Save Changes button.

Front-End Impact

Go to the shop.
Add a product to the cart.
Click on the Cart button.
The instant cart will open.

If the cart page is empty.

Replace Checkout Page #

The admin can change the checkout page with instant checkout. Whenever the user clicks the checkout link, the instant checkout either popup or sliding, will open instead of the default WooCommerce checkout page.
Go to the Replace Checkout Page in General Settings to enable the replacement checkout.
Click on the Enable option on the Replace Checkout Page.

Click on the Save Changes button.

Front-End Impact

Go to the shop.
Add a product to the cart.
Click on the checkout button.
The Instant checkout will open.

If your cart is empty, then it will open the cart page.

Customization Settings #

Within the Customization tab, the user can customize the following cart settings:

Select the instant checkout cart’s position on the website (top, middle, or bottom).
Customize the checkout cart icon’s background color.
Customize the checkout cart icon’s color.
Customize the quantity counter’s text color.
Customize the checkout cart’s background color.
Customize the checkout cart’s text color.
Customize the checkout button’s background color.
Customize the checkout button’s text color.

Cart Icon #

The admin can change the cart icon visibility to on product added. This will show the cart icon only when the product is added to the cart. When the cart is empty, the cart icon will not be displayed.
To enable this option, navigate to the Customization tab in Instant Checkout.
Go to Cart Icon and click on the Enable option.

Click on the Save Changes button.

Front-End Impact

Before adding a product, there will be no cart icon.
When we add the product, it will show the cart icon.

Instant Checkout Position #

The admin can change the placement of the cart icon to top, bottom, and middle.
Navigate to the Customization tab in Instant Checkout.
Go to the Instant Checkout Position option.
Select the placement position from the drop-down menu.

Click on the Save Changes button.

Front-End Impact

Top Aligned

Middle Aligned

Bottom Aligned

Instant Checkout Phase #

The admin can change the placement of the cart icon from left to right.
Navigate to the Customization tab in Instant Checkout.
Go to the Instant Checkout Place option.
Select the placement position from the drop-down menu.

Click on the Save Changes button.

Front-End Impact

Right Aligned

Left Aligned

Popup Customization #

The admin can customize the color of the instant popup.
To customize the instant cart button, navigate to the Customization tab in the Instant Checkout.
Go to the Cart Icon BG Color, this will change the background color of the instant cart button.
Click on the color input box, and a color palette will appear.
Choose the color from the color palette.

Next, if the admin wants to change the icon’s color, go to the Cart Icon Color.
To change the counter background color, go to the Counter BG Color.
To change the counter text color, go to the Counter Text Color.

To change the background color of the cart, go to the Cart BG Color.
To change the text color of the cart, go to the Cart Text Color.
To change the button’s color, go to the Buttons BG Color.
To change the button’s text color, go to the Buttons Text Color.

To change the title color of the cart, go to the Cart Title Color.
To change the background color of the title of the cart, go to the Cart Title BG Color.
To change the background color of the item cards, go to the Item BG Color.

Click on the Save Changes button.

Front-End Impact

Instant Cart Button Before

Instant Cart Button After

Cart Before

Cart After

Cart Icon Style #

The admin can change the icon style of the floating cart button and select the icons from the predefined icon styles.
To change the icon, navigate to the Customization tab in the Instant Checkout.
Go to the Floating Cart Icon.
Select the icon style from the list of predefined icons.