AeroCheckout- Custom WooCommerce Checkout Pages

  1. Home
  2. Docs
  3. AeroCheckout- Custom WooCommerce Checkout Pages
  4. Embed the Checkout Form
  5. Create and Embed the Checkout form in Popup / LightBox

Create and Embed the Checkout form in Popup / LightBox

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.

Let’s start with the setup of an embeded checkout page on WP page using LightBox

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’ lightbox=’yes’]”. Here “xxxx” is your specific post id and lightbox=”Yes” to enable the lightbox feature for checkout form.

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. Now to display embed form on click of a button or an anchor link, create a button and add class “wfacp_modal_open” to this button.

4. You can now show your embed form in the modal popup on click of button.

 

How can we help?