Easy Pricing Table

Introduction

Easy Pricing Table is a powerful and flexible Joomla module that allows you to create professional pricing tables with unlimited plans, complete style control, and rich interactive features. Perfect for showcasing service plans, product pricing, subscription options, and comparison tables.

Key Highlights:

• Full Joomla 4, 5 & 6 Compatibility
• Unlimited Pricing Plans
• Complete Style Control
• Advanced Typography Options
• Rich Content Features
• Professional Animations
• Responsive Design
• Modern WebAssetManager Support

Installation

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package from your account.

System Requirements

• Joomla Version: 4.x, 5.x, or 6.x
• PHP Version: 8.0 or higher

Note: This module uses pure CSS for all animations and effects. No JavaScript or jQuery is required for frontend functionality.

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• For Joomla 4/5/6: Go to System > Install > Extensions. You can either drag and drop or browse for the file to install.

A success message will be displayed once the installation is complete. The module will appear in Content > Site Modules.

Enabling the Module

After installation, navigate to Extensions > Modules, search for "Easy Pricing Table", and click on it to enable and configure the module.

Layout and Appearance

Access the module settings by navigating to Extensions > Modules, and find Easy Pricing Table in the list.

Layout Configuration

• Container Max Width: Set the maximum width of the pricing table container (e.g., 1200px, 90%, 100%). The tables will automatically adjust and wrap based on available space. Leave empty for full width. Default: 1200px
• Border Radius: Set the border radius for pricing tables (e.g., 12px, 8px, 0px). This controls how rounded the corners are. Default: 12px
• Enable Border Radius: Enable or disable border radius on pricing tables. When disabled, tables will have sharp corners. Default: Enabled
• Enable Shadow: Enable or disable box shadow on pricing tables. When disabled, tables will have no shadow effect. Default: Enabled

Hover Effects

• Hover Effect: Select a hover effect animation for pricing tables when users hover over them. Choose from 10 professional effects:
• None - No hover effect
• Lift - Table lifts up on hover (default)
• Scale - Table scales up on hover
• Glow - Table glows on hover
• Slide - Table slides up on hover
• Rotate - Table rotates slightly on hover
• Shrink - Table shrinks slightly on hover
• Bounce - Table bounces on hover
• Pulse - Table pulses on hover
• Tilt - Table tilts on hover
• All hover effects use smooth cubic-bezier transitions for professional animations.

Price Glow Effect

• Enable Price Glow Effect: Enable or disable the glowing circle effect that appears in the center of the price section when hovering over a pricing table. When disabled, the price section will have no glow animation on hover. Default: Enabled

Feature Icons

• Enable Feature Icons: Enable or disable FontAwesome icons that appear next to each feature in the pricing table. When disabled, no icons will be displayed. Default: Enabled
• Feature Icon Class: Enter the FontAwesome icon class name (e.g., fa-check, fa-star, fa-check-circle). You can use any FontAwesome icon. Examples: fa-check, fa-check-circle, fa-star, fa-heart, fa-thumbs-up. Default: fa-check
• Feature Icon Color: Set the color for the feature icons. Choose a color that matches your design theme. Default: #2ecc71 (green)
• Icons are always visible (not just on hover) and automatically load FontAwesome from Joomla's asset manager or CDN fallback.

Typography

• Table Text Color: Set the default text color for the pricing table content. Individual table sections can override this color. Default: #999999 (gray)

Colors and Typography

Configure all colors and typography settings (font sizes and colors) for each element in the pricing tables.

Typography Settings

Configure font size and color for each element in the pricing table. Leave empty to use default styles.

• Plan Header Font Size: Set the font size for the plan header/title (e.g., 24px, 1.5em, 2rem). Default: 24px
• Plan Header Color: Set the text color for the plan header/title. Leave empty to use the header text color from individual plan settings. Default: #ffffff
• Plan Details Font Size: Set the font size for the plan details/subtitle (e.g., 14px, 0.9em, 1rem). Default: 14px
• Plan Details Color: Set the text color for the plan details/subtitle. Leave empty to use the header text color from individual plan settings. Default: #e0e7ff
• Price Section Font Size: Set the font size for the price section (e.g., 18px, 1.2em, 1.5rem). Default: 18px
• Price Section Color: Set the text color for the price section. Leave empty to use the header text color from individual plan settings. Default: #ffffff
• Original Price Font Size: Set the font size for the original price (strikethrough price) (e.g., 16px, 1em, 1.1rem). Default: 16px
• Original Price Color: Set the text color for the original price. Leave empty to use the header text color from individual plan settings. Default: #cbd5e1
• Offer Price Font Size: Set the font size for the offer price (main price) (e.g., 32px, 2em, 2.5rem). Default: 32px
• Offer Price Color: Set the text color for the offer price. Leave empty to use the header text color from individual plan settings. Default: #ffffff
• Features Font Size: Set the font size for the features list items (e.g., 14px, 0.9em, 1rem). Default: 14px
• Features Color: Set the text color for the features list items. Leave empty to use the default table text color. Default: #64748b
• Button Font Size: Set the font size for the Buy Now button (e.g., 16px, 1em, 1.1rem). Default: 16px
• Button Color: Set the text color for the Buy Now button. Leave empty to use the header text color from individual plan settings. Default: #ffffff

Plan-Specific Colors

When "Use Plan Colors for Typography" is enabled in individual plan settings, the plan's own colors will override the global typography colors above.

Pricing Plans

Adding Pricing Plans

Click the Add button in the "Pricing Plans" fieldset to add a new pricing plan. You can add unlimited plans to a single module instance.

Plan Configuration

• Plan Title: Enter the title of the pricing plan (e.g., Basic, Pro, Enterprise). This appears in the plan header.
• Plan Short Details: Enter a short description or subtitle for the plan. This appears below the plan title in the header.
• Use Plan Colors for Typography: Enable to use this plan's individual colors (Table Header Text Color and Table Highlight Color) for typography instead of the global typography colors. When disabled, global typography colors will be used.
• Table Header Color: Select the background color for the plan header section. Default: #2563eb
• Table Header Text Color: Select the text color for the plan header section. Choose a color that contrasts well with the header background. This color will be used for typography when 'Use Plan Colors for Typography' is enabled. Default: #ffffff
• Table Highlight Color: Select the highlight color used for the price section and call-to-action buttons. This color will be used as background for price and button sections. Default: #3b82f6

Pricing Configuration

• Original Price: Enter the original price that will be displayed with a strikethrough (e.g., $99). Leave empty if not using a discounted price.
• Offer Price: Enter the current offer price (e.g., $79). This is the main price displayed prominently.

Features List

• Labels: Enter the features or benefits included in this plan, one per line. Each line will be displayed as a separate feature item. If feature icons are enabled, FontAwesome icons will appear next to each feature. Example:

  Feature 1
  Feature 2
  Feature 3

Call-to-Action Button

• Buy Now Text: Enter the text for the call-to-action button (e.g., Buy Now, Get Started, Subscribe).
• Buy Now Link: Enter the URL where the Buy Now button should link to (e.g., /checkout, /purchase, or full URL).

Advanced Settings

Advanced Configuration

• Module Class Suffix: Add a custom CSS class suffix to the module for additional styling. This allows you to target this specific module instance with custom CSS. Leave empty if not needed.
• Custom CSS: Add custom CSS rules to further customize the appearance of the pricing tables. These styles will be applied in addition to the default module styles. Useful for advanced styling and theme integration.

Module Assignment

• Module Position: Choose a position where you want the module to appear (e.g., position-7, pricing, content-top).
• Menu Assignment: Ensure the module is assigned to the desired menu items under the Menu Assignment tab.
• Module Status: Set the status to Published to make the module visible on the frontend.
• Access Level: Set the access level to control who can see the module (Public, Registered, Special, etc.).

Features

Key Features

• Unlimited Pricing Plans: Create an unlimited number of pricing plans using the intuitive repeatable subform interface. Each plan can be configured independently.
• 10 Professional Hover Effects: Choose from 10 smooth hover animations (lift, scale, glow, slide, rotate, shrink, bounce, pulse, tilt, none) with cubic-bezier transitions for professional animations.
• FontAwesome Feature Icons: Add FontAwesome icons next to each feature with customizable icon class and color. Icons are always visible and automatically load FontAwesome.
• Complete Style Control: Set custom header colors, header text colors, and highlight colors for each pricing plan. Advanced typography control with individual font size and color for each element.
• Rich Content Features: Add unlimited features to each plan, display original and offer prices, and add custom call-to-action buttons.
• Professional Animations: Beautiful hover animations, smooth shadow transitions, price glow effects, and automatic striped patterns for feature items.
• Advanced Typography System: Complete control over font size and color for plan header, plan details, price section, original price, offer price, features, and buttons.
• Plan-Specific Color Override: Option to use plan colors instead of global typography colors for individual plans.
• Layout Controls: Toggle border radius and shadows, set container width, and customize every visual aspect.
• Fully Responsive Design: Fully responsive design that adapts beautifully to smartphones, tablets, and desktop screens.
• Custom Width Control: Set the maximum width of the pricing table container. Tables automatically adjust and wrap based on available space.
• Modern CSS Grid Layout: Built with modern CSS Grid for automatic responsive column layout.
• Joomla 4, 5 & 6 Compatible: Full support for all modern Joomla versions with WebAssetManager for optimal performance.
• Cross-Browser Compatible: Works perfectly across all modern browsers including Chrome, Firefox, Safari, Edge, and Opera.
• Enhanced Security: Built with security best practices including input sanitization and XSS prevention.

FAQ

• How many pricing plans can I add?

  • You can add an unlimited number of pricing plans to a single module instance. Use the "Add" button in the Pricing Plans fieldset to add new plans.

• Can I use different colors for each plan?

  • Yes, each pricing plan can have its own header color, header text color, and highlight color. Configure these in the individual plan settings. You can also enable "Use Plan Colors for Typography" to override global typography colors.

• How do I add features to a plan?

  • In the "Features List" field, enter each feature on a separate line. Each line will be displayed as a separate feature item in the pricing table. If feature icons are enabled, FontAwesome icons will appear next to each feature.

• How do I customize feature icons?

  • Enable "Enable Feature Icons" in Layout & Appearance settings, then set the "Feature Icon Class" (e.g., fa-check, fa-star) and "Feature Icon Color". Icons are always visible and use FontAwesome.

• What hover effects are available?

  • Choose from 10 professional hover effects: None, Lift, Scale, Glow, Slide, Rotate, Shrink, Bounce, Pulse, and Tilt. All effects use smooth transitions for professional animations.

• Can I show both original and offer prices?

  • Yes, enter the original price in the "Original Price" field (it will display with strikethrough) and the offer price in the "Offer Price" field.

• How do I customize typography for each element?

  • In the "Colors & Typography" fieldset, configure font size and color for each element individually: plan header, plan details, price section, original price, offer price, features, and button.

• How does the container width work?

  • Set the maximum width of the pricing table container (e.g., 1200px, 90%). The tables will automatically adjust and wrap based on available space using CSS Grid.

• Can I disable border radius or shadows?

  • Yes, use the "Enable Border Radius" and "Enable Shadow" toggles in Layout & Appearance settings to enable or disable these effects.

• Can I disable the price glow effect?

  • Yes, use the "Enable Price Glow Effect" toggle in Layout & Appearance settings to enable or disable the glowing circle animation in price sections.

• Is the module responsive?

  • Yes, the module is fully responsive and adapts to different screen sizes. On mobile devices, pricing tables adjust width automatically.

• Can I add custom CSS?

  • Yes, use the "Custom CSS" field in Advanced Settings to add your own CSS rules. You can also use the module class suffix for targeted styling.

• How do I style individual plans differently?

  • Each plan has its own color settings (header color, header text color, highlight color). You can also use custom CSS with the plan-specific classes (jx-pricing-item-{moduleId}-{index}).

Troubleshooting

• Pricing Tables Not Displaying: Check that the module is published, assigned to the correct menu items or pages, and that the module position exists in your template. Verify module access levels match your user's access level.
• Plans Not Showing: Ensure you have added at least one pricing plan using the "Add" button. Check that the plan has a title entered.
• Colors Not Applying: Verify that you have selected colors for each plan (header color, header text color, highlight color). Check browser console for CSS errors. Clear Joomla cache and browser cache.
• Typography Not Working: Ensure you have configured typography settings in the Colors & Typography fieldset. Check that font sizes and colors are properly configured. If "Use Plan Colors for Typography" is enabled, plan colors will override global typography colors.
• Feature Icons Not Showing: Verify that "Enable Feature Icons" is set to Yes. Check that FontAwesome is loading (check browser console). The module automatically loads FontAwesome from Joomla or CDN fallback.
• Hover Effects Not Working: Verify that a hover effect is selected in Layout & Appearance settings. Check browser console for CSS errors. Ensure shadows are enabled if using shadow-based effects.
• Features Not Displaying: Check that you have entered features in the "Features List" field, one per line. Ensure there are no empty lines or formatting issues.
• Buttons Not Clickable: Verify that you have entered both "Buy Now Text" and "Buy Now Link" for the button. Check that the URL is correct and accessible.
• Responsive Issues: Check that your template supports responsive design. Verify that custom CSS is not overriding responsive styles. Test on different devices and screen sizes.
• Styling Issues: Check if your template's CSS is overriding the module styles. Use browser developer tools to inspect elements. Add custom CSS via the Custom CSS field or your template's custom CSS file.
• Layout Issues: Verify that the container width is set correctly. The tables use CSS Grid and will automatically adjust based on available space.
• Price Glow Not Working: Verify that "Enable Price Glow Effect" is set to Yes. The glow effect appears on hover over the pricing table.