AeroCheckout- Custom WooCommerce Checkout Pages

  1. Home
  2. Docs
  3. AeroCheckout- Custom WooCommerce Checkout Pages
  4. Embed the Checkout Form
  5. Create and Embed Checkout Form

Create and Embed Checkout Form

AeroCheckout provides you the feature to add a checkout form on any WordPress page created by WordPress standard pages or a designed by a page builder.

You just need to design a product page and paste the shortcode provided by AeroCheckout Custom Pages.

For this, you need to follow these simple steps and create as many as required pages which contains product details and checkout page on one single page. These pages also called as One Page Checkout Page.

Watch this video for a step by step demonstration:

Let’s start with the setup of aanembedded checkout page on WP page.

Add a New Checkout Page

1. From AeroCheckout dashboard, click on Add New button.

2. Enter Name of the page. This is for administrative purposes and is not visible to users.

3. Press Create and you will be redirected to Checkout Builder

Add a product 

1. Click on Add A product

2. Select Product to be added to checkout page

3. Enter discount percentage and increase quantity if required

4. Press Save

Build the form

1. By default the form with basic fields come up

2. You can add or remove new fields

3. You can also create it into multi steps if you want to

Select the Embed Checkout Form

1. You need to select the radio buttton “Embed The Checkout Form” to create this one page checkout form.

Note: Make sure you have AeroCheckout’s Pro OR Business Plan which provides you addon to install this feature. Not available in Basic Plan.

 

2. Click on Activate Button to use this template for your checkout page.

3. You will notice a new section below it “Shortcode For Embed Form”

4. Copy the shortcode “[wfacp_forms id=’xxxx’]”. Here “xxxx” is your specific post id.

Paste the Shortcode on webpage

1. Open any page of your site. Let’s say create a new page.

2. Paste the shortcode in Text Editor view of wysiwyg editor OR any a builder within Shortcode/ Text Editor element like this.

3. Publish the page to check this page on browser.

You will notice the WooCommerce Checkout page is displaying on the webpage with a basic setup. have a look it.

Customize the Checkout Form

Aero Checkout allows you to edit form fields with the form settings panel on left side of screen as shown.

 

1. Click on Pencil Icon on top of form  to open the Form Settings panel to update the checkout form content and settings.

2. You can change color, font size, form width, heading /subheading content, Steps content and many more options.

 

And one page checkout help you get the ROI your business needs to thrive, not just survive.

Take a look at the order form from Grand Cardone:

 

Want to experience the checkout form in action? Visit our demo site to see the Embed Form and page desiged by Elementor page builder.

Exclude the Slug from Cache (Recommended)

If you are using any cache Plugin, you need to exclude the Embeded checkout page URL.

Step 1: Note down the slug of your checkout page from here

Step 2: Open the settings of your cache plugin. Find out the Exclude option within the settings and add the slug there.

To get the details of exclusion process follow this link and apply step by step to work embed checkout page seamlessly.

Embed form as a Default Checkout form  (optional)

If you want to set the embeded form as a default checkout for your shop products, you can set easily by selecting a checkbox available on your page where you pasted the embed code [wfacp_forms id=’6787′].

Locate for this checkbox on the same page –

By enabling this checkbox, you will able to see this page name into the list of available checkout pages, here-

When you set the page as a Override Default Checkout page, the embed form page would be the default for your all products purchased from shop/ category pages.

How can we help?