Skip to content


Extensive Documentation for PowerPack & WooPack to help you with common questions and issues.

  1. Home
  2. Docs
  3. WooPack
  4. Modules
  5. Checkout
  6. How to Create a 2-column Checkout Page?

How to Create a 2-column Checkout Page?

Creating 2 column Checkout page aligns all the input fields on one column and all the checkout related details on the second column making the checkout page more readable and well arranged.

Here are the steps to create a 2 Column Check Out Page-

Step 1: Create a New Page and Launch the Page Builder after filling the Name Field and other details.

Step 2: Click on Add Content Button and then under the header- WooPack Modules, drag and drop the Checkout Module onto the page.

Step 3: When the Settings show up, select the Layout as Two Column Layout.

Step 4: Now to adjust the width of the columns, use the 2 fields below the layout dropdown to adjust the width by simply entering the width (in %). If you wish to change the width for responsive devices. Click on the Desktop Icon to the left of the fields, this will change the device and you can change the width of that responsive device respectively. Click on the same icon to toggle through the responsive devices. You can see the changes in the width you make to the responsive devices in real-time too.

Step 5: Make all the other necessary changes and click on the save button. When you are done, click on the Publish Changes button to make the page live.