Checkout Page
Unit tested for security the CommerceLab Shop checkout is one of the most versatile checkout sytems available on the market. LIke all Joomla articles your CommerceLab Shop checkout page is just like any other YOOtheme enabled article. This makes it 100% customizable with any available YOOtheme elelments and dynamic content. Get creative with your customer checkout experience. It's easiest to setup your checkout if you have products in it we advise you to have a least one product ready to test the functions.
Navigating to your checkout page to start designing
In the sidebar of Joomla navigate to to your CommerceLab Dashboard
Components >> CommerceLab Shop >> Dashboard
Then navigate to and click "Page Builder" to see the dropdown, then click "checkout".
YOOtheme Pagebuilder will open and go directly to your checkout page
Element positioning is done via drag and drop on the left and you can see the changes you make live on the right.
By default, we've laid out a simple store checkout for you to get started when you first intalled the component. Feel free to change this as you'd like.
Note: Your shop with the default configuration is only steps away from taking orders.
Custom shop checkout elements
Depending on your shop needs you can also add these elements anywhere else on your site including your cart, product pages or anywhere else for that matter to display cart information, allow users to login or enter a coupon code.
Each element is loaded with settings if you'd like to have a deepr look at the element settings click the link below.
Custom shop checkout elements
Let's walk through the basics of the checkout elements that you can use and if their needed or not to complete a checkout.
Cart Items element
This element shows the cart items a customer are planning purchase. You can adjust quantities or remove items prior to checking out.
Cart Summary Element
This element shows your calculated pricing totals of product pricing, taxes & discounts.
Not required complete checkout - The checkout will complete without this element but it's highly recommended.
* Shipping totals are hidden until a address is added.
* Discount codes will are hidden untill a discount code is entered.
The Tax and pricing layout can be adjusted to stay compliant for just about any shop around the world.
User Form Element
This element allows users to login to their account, register an account, or checkout as a guest. You can choose what to display in the settings. Example you only want guest checkout or you require users to register.
Not Required to complete a checkout - If you do not have this element on your checkout page and you have configred it in your settings properly. The checkout can complete and the customer will default to guest.
Note: This element can be used in place of the core Joomla login module. you can use it anywhere in your site as many times as you'd like.
Address Form Element
This element allows users to add their shipping a billing information. There are many settings and style options to choose from depending on your checkout page layout. As well as ordering what to show first billing or shipping and the order in which the fields display as well as size.
Required to complete a checkout - You will need this element on your checkout page to complete the checkout as it is linked to your chosen payment gateways.
Checkout Notes Element
This element allows users to add notes to their order thatw ill display to you in the order details in your CommerceLab Shop dashboard. Choose the size add plaeholder text easily in the settings.
Not required to complete a checkout - It is not mandatory to have checkout notes in your checkout.
Coupon Field Element
This element allows users to add discount codes you might make for promotions or users upon checkout. That you make in your CommerceLab Shop.
Not required to complete a checkout - It is not mandatory to have the coupon fields element to complete a checkout. Add it only if you need.
Terms Checkbox Element
This element makes your T&Cs mandatory before completing the checkout and links to your terms and conditions page automatically.
Not required to complete a checkout - It is not mandatory to have the Terms and Conditions to complete a checkout
As you've seen you can get away with a very minimial checkout or add every element
Each module is packed with settings for 100% custmization from titles to margins. You can cusmize just about any aspect of these elements.
Payment Gateways
Offline Pay Element
Complete the checkout without taking payment the order will be marked as pending in your orders dashboard untill you accept payment and change the order status to completed.
Stripe Element
Use stripe API to process orders. Easily manage your payment the setuptakes no more than a 15 minutes to start taking payments.
If your ready to start setting up your Stripe payment gateway click the link below
Paypal Element
Start quick and process your orders using Paypal. You can take payments from anywhere in the world. Quickly.
If your ready to start setting up your Paypal payment gateway click the link below
One Page or Multi-Page checkout.
There really are no limits to the the checkout page layouts. You can make a one page checkout. or multipl page checkouts to create a fully immersive checkout for your customers.
One Page Checkout
Simply drag and drop, configure your elements and and style your checkout easily.
Multi Page checkout
Multipage checkout flows are possible as all the checkout elements work independently of each other.
Change the checkout page link in your CommerceLab Configuration settings to direct users to the first step of your checkout
This will begin the checkout process. Then add the elements to each page you'd like the process to be laid out. it's that simple. Style each page with YOOtheme elements like any other page.
In the case of you using anayltics and metrics on shopping sales funnel tracking and checkout conversions, this makes quick work of adding code to the steps.
Enjoy the freedom to create immersive checkout expireinces for your customers!
Last updated