---
title: "Advanced Checkout"
description: "Buy, install and enable the Advanced Checkout app for J2Commerce, then set up its menu item and modules."
url: "https://docs.j2commerce.com/apps/advanced-checkout/advanced-checkout-guide"
markdown_url: "https://docs.j2commerce.com/apps/advanced-checkout/advanced-checkout-guide.md"
last_updated: "2026-10-23T03:36:49+00:00"
version: "J2Store 4"
breadcrumbs:
  - title: "Home"
    url: "https://docs.j2commerce.com/"
  - title: "Apps"
    url: "https://docs.j2commerce.com/apps"
  - title: "Advanced Checkout"
    url: "https://docs.j2commerce.com/apps/advanced-checkout"
  - title: "Advanced Checkout"
    url: "https://docs.j2commerce.com/apps/advanced-checkout/advanced-checkout-guide"
---

# Advanced Checkout

## Requirements

1. PHP 8.1.0 +
2. Joomla! 4.x/ Joomla! 5.x +
3. J2Commerce / J2Store 4.x +

## Purchase the App

**Step 1:** Go to our [J2Commerce website](https://www.j2commerce.com/extensions) > Extensions > Apps

**Step 2:** Go to Extensions > Apps > Locate the Advanced Checkout App > click View Details > Add to cart > Checkout.

**Step 3:** Go to your My Downloads or My Account under your profile button at the top right corner and search for the app. Click Available Versions > View Files > Download Now

## Install the App

Use the Joomla! installer to install the app. Go to System > Install > Extensions > install the app

![Joomla System Dashboard with System in the sidebar and the Extensions link under Install highlighted](https://docs.j2commerce.com/images/docs/shared/product-category-installer-1.webp)

## Enable the App

Select J2Commerce > Apps > Advanced Checkout

Enable the app by clicking on the 'X'. It will turn into a checkmark.

![J2Commerce All Apps list with J2Commerce in the sidebar and Apps menu highlighted, and the enabled status check for Advanced Checkout highlighted](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-enable1.webp)

Click on "Open App" or the Title to start setting up the app.

![J2Commerce All Apps list with the Open App button highlighted on the Advanced Checkout row, which is enabled](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-open1.webp)

## Setting up the Menu

Before you set up the parameters, you need to set up the menu for it.

**Step 1:** Go to Menus > Main Menu > Checkout

![Joomla Menus: Items (Main Menu) list with Menus and Main Menu highlighted in the sidebar and the Checkout menu item highlighted at the bottom](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-checkout-menu.webp)

**Step 2:** Switch the Template Style from the -Use-Default- to Cassiopeia-Default

![Menus: Edit Item for Checkout, Details tab: Template Style set to Cassiopeia - Default, with a note to switch from Use Default](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-checkout-menu1.webp)

## Setting up the Modules

### Creating a New Module

Go to Content > Site Module > New

![Joomla Modules (Site) list with Content and Site Modules highlighted in the sidebar and the New button highlighted](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-login-new.webp)

### Module Tab

![Login module, Module tab: Position j2c-login, Login Redirection Page set to Checkout, Logout Redirection Page set to Home, Status Published](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-login-module1.webp)

**Title:** Name the module, Login.

**Position:** Type **j2c-login** in the dropdown.

**Login Redirection Page:** Select the location you wish to redirect the customers after logging in. In many cases, it's the Checkout Page.

**Logout Redirection Page:** Select the location you wish to redirect the customers after they complete their order.

### Menu Assignment Tab

![Login module, Menu Assignment tab: Module Assignment set to Only on the pages selected, with the Checkout menu item checked](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-login-menu.webp)

**Module Assignment:** Select Only on the pages selected

**Menu Selection:** Select Checkout

### Advanced Tab

![Login module, Advanced tab highlighted: Layout set to sidebar and Module Style set to none, both highlighted](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-login-advanced.webp)

**Layout:** Select Sidebar

**Module Style:** Select None

The Login Module is complete. Make sure it's enabled by clicking on the 'x' and turning it into a checkmark. It will now show up in the checkout cart.

![Joomla Site Modules list with the Login module in position j2c-login enabled (green check), with its status and title highlighted](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-login-enable.webp)

## Advanced Cart Module

Follow the same steps from creating the Login Module.

Go to Content > Site Module > New

### Module Tab

![Advanced Cart module, Module tab: Position set to j2c-checkout-sidebar, Status Published, payment icons MasterCard, Visa, American Express, Discover, PayPal](https://docs.j2commerce.com/images/docs/shared/advanced-cart-module-tab1.webp)

**Title:** Name the module, J2Commerce Advanced Cart

**Position:** Type **j2c-checkout-sidebar** in the dropdown

**Loading Indicator:** The Bootstrap 5 spinner class is used when reloading the advanced cart contents.

**Store Menu Link:** Advanced Cart J2Commerce ajax-based cart module.

**Shopping Cart Menu Link:** Select the menu item for the shopping cart page.

**Checkout Menu Link:** Select the menu item for the checkout page.

**Show Payment Icons:** Select yes to enable payment icons (helps add additional trust endicia to the checkout process).

**Select Payment Icons:** Select all of the payment options you want to offer

### Menu Assignment Tab

![Advanced Cart module, Menu Assignment tab: Module Assignment set to Only on the pages selected, with the Checkout menu item checked](https://docs.j2commerce.com/images/docs/shared/advanced-cart-menu-tab1.webp)

**Module Assignment:** Only on the pages selected

**Menu Selection:** Select 'Checkout'

### Settings Tab

![Advanced Cart module, Settings tab highlighted: Show Shipping Progress No, Show Upsell Options No, SKU, quantity, image, base price, coupon and gift card forms Yes](https://docs.j2commerce.com/images/docs/shared/advanced-cart-settings-tab1.webp)

**Show Shipping Progress:** Select yes to show the shipping progress indicator in the modal cart.

**Free Shipping Amount:** Enter the minimum amount needed to qualify for free shipping. No currency sign - only number value. (No free shipping message will appear if left empty)

**Show Upsell Options:** Future option coming in a later version.

**Show Product SKU:** Select 'Yes' to display the product SKU.

**Show Quantity Field:** Select yes to display the quantity field. Select NO if you are selling digital products or other items that don't require quantities over 1 per item.

**Show Product Image:** Select yes to display the product's thumbnail image.

**Show Base Price:** Select yes to display the product's base price when a lower (sale) price is offered.

**Show Coupon Form:** Show coupon form in modal cart?

**Show Gift Card Form:** Show gift card form in modal cart?

**Show Subtotals:** Select yes to show cart subtotals.

### Advanced Tab

![Advanced Cart module, Advanced tab highlighted: Layout set to checkout, Caching Use Global, Cache Time 900, Module Tag div, Header Tag h3](https://docs.j2commerce.com/images/docs/shared/advanced-cart-advanced-tab1.webp)

**Layout:** Select Checkout

**Module Style:** Select None

## Setting up the Checkout Page

Go back into the Advanced Checkout App and open it.

![J2Commerce All Apps list with J2Commerce in the sidebar, Apps in the top menu and the Advanced Checkout app title highlighted](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-setup1.webp)

### Basic Tab

![Advanced Checkout app settings, Basic tab highlighted: store icons, header, footer, breadcrumbs and steps set to Yes, with Top Text and Bottom Text fields highlighted](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-basic1.webp)

**Enable Store Icons:** Set this to no if you wish to use your own icon set. (You will need to replace the store icons with your own via layout overrides.)

**Enable Checkout Header:** If set as Yes, then you can add a custom header at the top of your checkout page. The location to attach the header image can be found on the Style tab.

**Enable Checkout Footer:** If set as Yes, then you can add a custom footer at the bottom of your checkout page. The location to attach the header image can be found on the Style tab.

**Enable Checkout Breadcrumbs:** The breadcrumbs allow the customer to know which step during checkout they are on and how many more steps they need to complete. See image below.

![Checkout page with the step breadcrumbs highlighted: Account, Shipping, Payment and Confirm, with Payment as the current step](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-breadcrumbs.webp)

**Enable Checkout Steps:** If set as Yes, it will enable the previous steps to show up at the top of each page, allowing the customer to verify the information is correct or edit the previous page. See image below

![Checkout Payment step with the account, billing and shipping summary rows highlighted, each with a Log Out or Change link](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-steps.webp)

**Phone 1:** Customer service or general company phone number used in disclaimer text and checkout footer.

**Top Text:** Add any needed text to the top of the checkout. Use this sparingly, as anything that is not critical to the conversion of the sale will most likely hurt it. See image below.

![Checkout page with the four-step progress bar and the Top Text Goes Here line highlighted above the account summary, showing where the Top Text setting appears](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-basic-settings3.webp)

**Bottom Text:** Add any needed text to the bottom of the checkout. Usually needed if the site needs to display a site-wide disclaimer. See image below.

![Checkout page footer with the Bottom Text Goes Here line highlighted above the copyright and phone number, showing where the Bottom Text setting appears](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-basic-settings2.webp)

### Style Tab

![Advanced Checkout app, Style tab highlighted: container class Yes, color fields for primary, header and footer, header and favicon images, Custom CSS field](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-style2.webp)

**Enable Container Class:** Select Yes to enable the Bootstrap 5 container element on the checkout and confirmation pages. Use this if your Cassiopeia template is set to Fluid layout and you wish to center the checkout with the Bootstrap-defined max-width.

**Primary Color:** Select the primary (main) color to match your site template style.

**Secondary Color:** Select the secondary color to match your site template style.

**Primary Button Color:** This is the color for the main checkout button on each page

**Sale Badge Color:** Select the badge color for the 'Save X%' badge that displays after discounted prices. Select a darker contrasting background color as the text is white.

**Body Text Color:** Select the text color you wish to use for the checkout body.

**Header Background:** Select the background color you wish to use for the top header of the checkout page. If your logo is dark, use a white or light colored background.

**Header Text Color:** Select the text color you wish to use. Make sure it contrasts with the background color for accessibility.

**Footer Background:** Select the background color you wish to use for the bottom footer of the checkout page.

**Footer Text Color:** Select the text color you wish to use. Make sure it contrasts with the background color for accessibility.

**Checkout Header:** 1900px x 100px png, jpg, webp images to use for the checkout header.

**Favicon Image:** 64px x 64px png, jpg, webp images to use for the browser tab icon (in place of the default Joomla! icon.

***The screenshot below shows an example of the Header and Favicon***

![Browser checkout page with the favicon letter in the tab and the checkout header banner area highlighted above the four-step progress bar](https://docs.j2commerce.com/images/docs/shared/favicon-header2.webp)

**Custom CSS:** Add any custom CSS for the checkout page. DO NOT INCLUDE THE < STYLE > TAGS. The default for the header is 25px high. You can customize the height by changing the pixels and add additional CSS code to customize the cart. See image below.

![Advanced Checkout Style tab, Custom CSS field with the max-height 25px rule for the checkout header image highlighted](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-style3.webp)

## How to Change the Safe & Secure Language

The screenshot below shows how to change the Safe and Secure message to personalize it to the client's website.

The screenshot below shows the Safe and Secure link, which is located at the bottom of the Checkout page

![Checkout page with the Secure Checkout Shopping is always safe and secure link highlighted under the Select Shipping Address button](https://docs.j2commerce.com/images/docs/shared/safe-and-secure.webp)

**Step 1:** Go to Settings > Manage > Language Overrides

![Joomla System Dashboard with System, the Manage group and the Language Overrides link highlighted](https://docs.j2commerce.com/images/docs/shared/safe-and-secure-languare1.webp)

**Step 2:** Select Language and Client drop-down > Click on English (United Kingdom) - Administrator > New

![Joomla Languages: Overrides list showing the saved message, with the New button and the English (United Kingdom) - Administrator selector highlighted](https://docs.j2commerce.com/images/docs/shared/safe-and-secure-languare2.webp)

### Safe and Secure Link

Once you click New, it's time to customize it.

![Languages: Edit Override form with the Safe and Secure link text constant, its Text value, and the Constant search and result highlighted](https://docs.j2commerce.com/images/docs/shared/safe-and-secure-languare3.webp)

**Step 1: Language Constant:** Enter the following language string PLG_J2STORE_APP_ADVANCEDCHECKOUT_SECURE_TEXT

**Step 2: Search For:** Select Constant

**Step 3:** **Search Text:** Enter the same Language string from step 1 > click Search PLG_J2STORE_APP_ADVANCEDCHECKOUT_SECURE_TEXT

**Step 4: Search Results:** Once you click in the gray box, it will automatically transfer the editable language into the Text box

**Step 5: Text:** Change any of the information you wish

The Screenshot below shows the final look

![Checkout page with the Secure Checkout Shopping is always safe and secure link highlighted under the Select Shipping Address button](https://docs.j2commerce.com/images/docs/shared/safe-and-secure2.webp)

### Safe and Secure Modal Title

Follow the same steps from step 2 above: (Select Language and Client drop-down > Click on English (United Kingdom) - Administrator > New)

![Languages: Create a New Override form for the secure modal title constant with Text set to Information Secure, search and result highlighted](https://docs.j2commerce.com/images/docs/shared/safe-and-secure-languare4.webp)

**Step 1: Language Constant:** Enter the following language string PLG_J2STORE_APP_ADVANCEDCHECKOUT_SECURE_MODAL_TITLE

**Step 2: Search For:** Select Constant

**Step 3:** Search Text: Enter the same Language string from step 1 > click Search PLG_J2STORE_APP_ADVANCEDCHECKOUT_SECURE_MODAL_TITLE

**Step 4: Search Results:** Once you click in the gray box, it will automatically transfer the editable language into the Text box

**Step 5: Text:** Change any of the information you wish

### Safe and Secure Modal Content

Follow the same steps from step 2 above: (Select Language and Client drop-down> Click on English (United Kingdom) - Administrator > New)

![Languages: Create a New Override form for the secure modal text constant, with its Text and the matching search result highlighted](https://docs.j2commerce.com/images/docs/shared/safe-and-secure-languare5.webp)

**Step 1: Language Constant:** Enter the following language string PLG_J2STORE_APP_ADVANCEDCHECKOUT_SECURE_MODAL_TEXT

**Step 2: Search For:** Select Constant

**Step 3:** Search Text: Enter the same Language string from step 1 > click Search PLG_J2STORE_APP_ADVANCEDCHECKOUT_SECURE_MODAL_TEXT

**Step 4: Search Results:** Once you click in the gray box, it will automatically transfer the editable language into the Text box

**Step 5: Text:** Change any of the information you wish

The Screenshot below shows the final look of the Modal Title and Content

![Checkout page modal titled Information Secure, with the title and the customized body text and phone number highlighted](https://docs.j2commerce.com/images/docs/shared/safe-and-secure1.webp)

## Setting up the Confirmation Page

### Confirmation Page Tab

![Advanced Checkout app, Confirmation Page tab highlighted: Enable Address Map Yes, Google API Key hidden, Contact Page Link, Successful and Failed Order Messages](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-confirmation3.webp)

**Enable Address Map:** Select Yes to display a map of the customer's shipping address on the confirmation page. You will need to create and enter your Google Developer Console API in the field below.

![Order confirmation page with Confirmed status and a highlighted Google map of the customer's shipping address above the order items](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-confirmation4.webp)

**Google API Key:** Enter your Google API key here. ***To obtain an API Key follow the instructions at the end of this document.***

**Contact Page Link:** Select the Contact Page menu link to ensure customers have an easy way to contact you if they encounter issues with their order.

**My Profile Link:** Select the menu link for the J2Commerce My Profile page. Selecting the menu link will enable a button option for the customer to visit their profile page after a successful order (confirmation page).

**Successful Order Message:** Enter the text to display for the message displayed on successful order confirmations. (Can be language strings as well.)

**Failed Order Message:** Enter the text to display for the message displayed on failed order confirmations. (Can be language strings as well.)

*The screenshot below shows a successful Confirmation page on the frontend*

*If the order is unsuccessful, then the map will disappear, and the customer will see the Failed Order Message you entered*

![Order confirmation page with the address map and the "Your order has been successfully placed!" message highlighted, above customer information and View My Account button](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-confirmation5.webp)

## How to Obtain Your Google API Key

**Step 1:** Visit [https://console.cloud.google.com/apis/dashboard](https://console.cloud.google.com/apis/dashboard)

**Step 2:** Select Create project

![Google Cloud APIs & Services page asking to select a project, with Enabled APIs & services and the Create project button highlighted](https://docs.j2commerce.com/images/docs/shared/google-api-2.webp)

**Step 3:** Name your project and select the location > Create

![Google Cloud New Project form with the Project name and Location (No organization) fields and the Create button highlighted](https://docs.j2commerce.com/images/docs/shared/google-api-3.webp)

**Step 4:** Select 'Enable APIS and Services'

![Google Cloud Console APIs & Services dashboard with the Enable APIs and services button highlighted at the top](https://docs.j2commerce.com/images/docs/shared/google-api-1.webp)

**Step 5:** Type Geocoding in the search bar

![Google Cloud API Library welcome page with the Search for APIs & Services box highlighted](https://docs.j2commerce.com/images/docs/shared/google-api-4.webp)

**Step 6:** Select Geocoding API and Maps Javascript API. You have to select them and follow steps 7-8 one at a time.

![Google Cloud API Library search results for "geocoding api" with Geocoding API and Maps JavaScript API highlighted](https://docs.j2commerce.com/images/docs/shared/google-api-5.webp)

**Step 7:** Make sure to enable Key Restrictions > Websites for your API Key to prevent unauthorized use.

![Google Cloud Geocoding API product details page with the Enable button highlighted](https://docs.j2commerce.com/images/docs/shared/google-api-6.webp)

**Step 8:** Select Save and Continue > Enter your Credit Card for billing purposes

## Template Settings

Go to System > Site Template Styles

![Joomla System Dashboard with System in the sidebar, the Templates group and the Site Template Styles link highlighted](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-template.webp)

Click on Cassiopeia - Default to open it

![Joomla Templates: Styles (Site) list with the Cassiopeia - Default style highlighted as the default for all pages](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-cassiopeia.webp)

Open the Advanced tab. Make sure Brand is turned off and Layout is on Fluid. Save and Close

![Joomla Templates: Edit Style for Cassiopeia - Default, Advanced tab: Brand set to No and Layout set to Fluid, both highlighted](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-cassiopeia-advanced.webp)

## Frontend

The screenshot below shows how your cart will appear without purchasing and installing the Advanced Cart Module.

![Checkout Account step with billing address choices, Top Text and Bottom Text shown, without the Advanced Cart sidebar](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-frontend1.webp)

The screenshot below shows how your cart will appear after purchasing and installing the Advanced Cart Module. To learn more about the Advanced Cart Module, visit: [https://docs.j2commerce.com/advanced-cart/advanced-cart-guide](https://docs.j2commerce.com/index.php?option=com_content&view=article&id=199&catid=11)

![Checkout Account step with the Advanced Cart order summary on the right: Gold Watch, Apply Coupon Code, Apply Voucher / Gift Card Code and payment icons](https://docs.j2commerce.com/images/docs/shared/advanced-checkout-frontend2.webp)