Here is how to set up a WooCommerce Checkout page.

  1. Inside Oxygen Builder, Click "Add" > "Library" > "Design Sets"> scroll down and select "Oxyelements WooCommerce".
  2. Go to "Pages" and scroll down to the bottom click "Checkout".

With this template loaded you are ready to go.

 

We have changed the two-column layout from the standard WooCommerce layout, to improve the UX and hopefully create some more conversions.

This is done with some custom CSS we have made.

You can find that CSS here in the "Checkout CSS" Code Block.

Protip: If you prefer, you can copy out this CSS and put it into a Stylesheet and combine it, if that is something you like. (And then delete the code block).

 

Not all web shops use coupons, there for we have made it easy for you to hide it.

We have made a code block, which contains the CSS for hiding the Coupon Field.

And of course, if you have a plugin that actually hides the field, that doesn't really matter.

But in this case, we just hid it with CSS.

If you want to use the coupon field, all you have to do is delete the code block and it will show the coupon field once again.

 

Click "Save" when you have decided which setup you want.

 

To learn more about

Oxyelements WooCommerce Design Set