AeroCheckout- Custom WooCommerce Checkout Pages

  1. Home
  2. Docs
  3. AeroCheckout- Custom WooCommerce Checkout Pages
  4. Elementor
  5. How to Export/Import an Existing Checkout Page Built Using Elementor from One Site to the Other

How to Export/Import an Existing Checkout Page Built Using Elementor from One Site to the Other

Consider that you have two websites – site A and site B.

Assume that you already have a checkout page built using Elementor in site A.

Now, you want to have the same checkout page in site B without having to build the page again from scratch.

This is where exporting and importing of checkout pages come into play.

Aero lets you export an existing checkout page from one site and import it on another.

In this documentation, we’ll see how you can do that.

To understand it better, let’s consider these for our reference:

Site A / staging site – from where you want to export your checkout page
Site B / production site – where you want to import and use the exported checkout page

So there are two steps broadly:

Step #1: Export the checkout form and the Elementor template from site A – This will involve exporting the checkout form and the Elementor template separately from site A. For exporting the Elementor template, we’ll have to first save the design in the Elementor library and then export it.

Step #2: Import the checkout form and Elementor template in site B – This will involve importing the exported checkout form and Elementor template on site B.

Follow along.

Step 1: Export the checkout form

On the AeroCheckout interface, hover the cursor over the checkout page in site A that you want to use in site B.

You’ll see a bunch of options. Click on ‘Export’.

The checkout form and associated settings will get downloaded (exported).

Step 2: Export the specific Elementor Template

In site A, open the checkout page that you’ve built using Elementor.

Click on the arrow icon next to the ‘Update’ button.

Select the ‘Save as Template’ option.

Next, name your template and hit the ‘Save’ button.

This template is now saved in the Elementor library.

Now search this template under the ‘My Templates’ tab in Elementor and export it.

A JSON file gets downloaded.

Step 3: First Import the checkout form in site B

Go to site B where you want to import the exported checkout form.

Navigate to WooFunnels > Checkouts and hit the ‘Import’ button.

Here, drag and drop the downloaded file for the checkout form and click on the ‘Upload Exported File’ button.

You’ll see a success message when your checkout form gets imported successfully.

So when you click on the ‘Go to AeroCheckout Pages’ button you’ll see a new checkout page has been created which contains the checkout form you just imported.

Now let’s move on to importing the layout and design of the template.

Step 4: Import and insert the saved template

In site B, click on the checkout page which you just imported.

Under the ‘Design’ tab, hit the ‘Edit’ button.

On the blank Elementor page, click on the ‘Add Template’ icon.

Next, click on the ‘Import’ icon to import the JSON file you exported from site B in the previous step.

Then drag and drop the JSON file.

Under the ‘My Templates’ tab, you’ll now see the template that you just imported.

Choose the right one from the list and click on the ‘Insert’ button to insert it.

Next, you’ll see a popup that asks for confirmation to override the previous settings.

Click on ‘Yes’.

Now you’ll see the chosen template appearing in the Elementor interface.

There you go!

That’s how you can import a checkout page built using Elementor from one site and use it on another.

How to change page template layout

There might be a case when you’re not able to see the imported template in the desired layout and you see something like this:

This is because the selected page template layout is not the right one.

To change the page template layout, click on the gear icon on the bottom bar in Elementor.

Next, select the ‘WooFunnels Canvas For Page Builder’ layout from the drop-down under Page Layout option.

That’s how you can fix this issue.

If you’re still unable to get the desired results, raise a support ticket and we’ll be happy to help you out.