Installation Guide

Download the Plugin

After successful payment, you will receive a direct download link for the plugin ZIP file. Download the file to your computer.

Note: The plugin file is named something like plg_vmcustom_multistepcheckout.zip

Access Joomla Administrator

Log in to your Joomla Administrator backend (usually at yoursite.com/administrator).

Make sure you have administrator privileges to install extensions.

Navigate to Extension Manager

In the Joomla Administrator menu, go to:

Extensions → Manage → Install

Or use the quick access: Extensions → Install

Upload the Plugin

In the Extension Manager:

1. Click on the "Upload Package File" tab
2. Click the "Choose File" button
3. Select the downloaded ZIP file from your computer
4. Click "Upload & Install"

Wait for the installation to complete. You should see a success message.

Enable the Plugin

After installation, the plugin needs to be enabled:

1. Go to Extensions → Plugins
2. Search for "MultiStep Checkout"
3. Click on the plugin name to open it
4. Set "Status" to "Enabled"
5. Click "Save" or "Save & Close"

Verify Installation

To verify the plugin is working correctly:

1. Go to your VirtueMart store frontend
2. Add a product to the cart
3. Proceed to checkout
4. You should now see the multi-step checkout interface instead of the default single-page checkout

Important: Make sure you are using the bs5_default cart template in VirtueMart.

Configure Plugin Settings

After enabling the plugin, you can customize its appearance and behavior:

1. Go to Extensions → Plugins
2. Search for "MultiStep Checkout" and click on it to open the plugin settings
3. Configure the following options:

Navigation Type

Choose how the step navigation should be displayed:

• Horizontal Tabs: Steps are displayed as horizontal tabs at the top of the checkout form
• Vertical Progress: Steps are displayed as a vertical progress bar on the side
• Simple Steps: Steps are displayed as simple numbered indicators

Color Scheme

Select a color scheme for the checkout process:

• Default Blue: Uses the standard blue color scheme matching your VirtueMart theme
• Custom Colors: Allows you to set custom colors for active steps, completed steps, and buttons
• Theme Colors: Automatically matches the colors from your Joomla template

Design Options

• Text Active Color: Set the color for active step text (default: #ffffff). You can use hex color codes like #ffffff or color names.
• Corner Radius: Choose the border radius for step elements (options: Small, Medium, Large). This affects how rounded the step indicators appear.
• Element Spacing: Control the spacing between elements (options: Compact, Normal, Spacious). Adjusts the gaps between steps and form elements.
• Hide 'Cart' Page Title (H1): Choose whether to hide the default "Cart" page title on the checkout page. Set to "Yes" to hide it, "No" to display it.
• Custom CSS (Advanced): Add your own custom CSS rules for advanced styling customization. This allows you to override default styles and create unique designs.

Note: After making changes, click "Save" or "Save & Close" to apply your settings. Clear your Joomla cache (System → Clear Cache) to see the changes immediately.