JUX Pricing Table - Joomla Extension

How to Set Up JUX Pricing Table for Joomla

JUX Pricing Table is not just for making price cards look nice. In real-world use, this module helps you build a clear pricing block in Joomla for plans, service packages, or plan comparisons, place it in the right template position, and verify that visitors see a clear choice with an obvious action button instead of a set of decorative columns.

In this guide, we will go through installation, the initial check, pricing column setup, display mode selection, button behavior, responsiveness, result validation, and common mistakes. We will also look at when a grid works best, when a slider makes sense, and when a comparison table is the better choice, because these are the key presentation modes highlighted by the developer.

This article does not replace the official documentation or rehash the product page. Its goal is practical: to help you prepare the page safely, avoid losing the module because of the wrong position or menu assignment, keep pricing plans from getting overloaded with unnecessary rows, and decide whether the extension fits your use case before you move on to the download.

What the Module Does and Which Pages It Works Best On

According to JoomlaUX, JUX Pricing Table is a Joomla module for displaying pricing plans, packages, and product comparisons. That distinction matters: the module does not manage payments, orders, users, or subscriptions inside Joomla. Its role is to present options visually so a visitor can quickly compare them and click through to the next step - a request form, contact page, service details page, external payment system, or another internal route on the site.

Typical pages where this kind of module makes sense include:

• An agency services page that needs to present a basic, extended, and custom package.
• A SaaS product or service landing page where visitors need to compare plan limitations.
• A club, school, fitness center, or education site with multiple participation levels.
• A service catalog with fixed packages and a "request a quote" button.
• A product page where pricing is not the final checkout step but still helps visitors understand the scale of the offer.

The real value of the module is not that it shows a large price in a bold font. A good pricing table answers three questions: what is included in the plan, who the plan is for, and where to click next. If a visitor sees only three bright cards with different prices but cannot tell how they differ, the module turns into decoration. But when feature rows, the highlighted plan, and buttons are arranged logically, the block works as a decision-making tool.

JUX Pricing Table is especially useful when the site already has a finished page and you just need to add a standalone module block to it. In Joomla, a module can be assigned to template positions and menu items, so you do not have to hardcode pricing into the text of each article. That reduces the risk of showing different prices or outdated package descriptions on different pages.

There are also cases where a module like this is not enough on its own. If pricing is calculated by formula, depends on user count, region, complex configuration, or additional services, a static table will get overloaded quickly. In that case, it is better to use a calculator, a request form with conditional logic, or a catalog component, and keep JUX Pricing Table for a short comparison block.

Who JUX Pricing Table Is a Good Fit For, and When Another Approach Makes More Sense

This extension is worth considering if you run a Joomla site and need a manageable pricing block without building a custom component. According to the official product page, it supports several display methods: grid layout, slider presentation, and comparison table. That gives you more flexibility than a simple HTML block, while still remaining manageable for an administrator who does not want to edit the template or build custom markup.

A Good Fit for Clear Plans and Service Packages

The module works well for a structure like "three or four options and a clear button." For example, "Starter," "Business," and "Premium," or "One-Time Consultation," "Monthly Support," and "Full Team Package." In these cases, it helps visitors to see differences side by side: limits, number of services, level of support, turnaround time, access to materials, or extra bonuses.

If one plan should be recommended, you can highlight it with color, an icon, visual emphasis, or a text label. But use that carefully. The recommended plan should genuinely be the best fit for the main audience, not simply the most expensive option. Otherwise, the pricing block starts to feel pushy.

A Good Fit for Sites That Need Joomla's Modular Structure

A Joomla module exists inside a system of positions, publishing rules, access levels, and menu assignment. That is useful when the same pricing block should appear only on a services page, below articles in a specific category, or next to a request form. Joomla documentation on module display emphasizes that module behavior depends on the combination of menu assignment and access permission. For a pricing table, that is critical: an incorrect menu assignment often looks like "the module is not working" when in reality it is simply not assigned to the current page.

Possibly Not Enough for Complex Commerce

If you need to accept payments, apply coupons, handle taxes, manage customer accounts, grant access after purchase, or create orders automatically, JUX Pricing Table by itself is not enough. It is not a payment component or a subscription system. It can guide the user to the next action, but it should not be treated as a replacement for VirtueMart, HikaShop, a membership component, or a CRM form.

You should also be careful with very long comparisons. The officially listed comparison table mode is useful for detailed side-by-side evaluation, but on mobile screens a long feature matrix can become hard to read. If you have dozens of rows, it is usually better to show the core differences in cards and move the full comparison matrix into a separate section below or onto a separate page.

What to Check Before Installation

Before installing any Joomla extension, do a quick technical check. It does not take long, but it can save hours of troubleshooting if the module does not appear in the list, does not render on the page, or conflicts with an older template. Official Joomla documentation on extension installation recommends reading the extension documentation before installation, and update-related documentation separately reminds you to back up files and the database before making changes.

Joomla Compatibility and Overall Site State

The JoomlaUX product page lists JUX Pricing Table as compatible with modern Joomla versions, including the current branches shown on the product card. It is not a good idea to lock a version number into an article as if it were permanent, because compatibility changes over time. In practice, this means the following: before installing, open the product page, check the compatibility section, and compare it with your CMS version. If the site is still running on an older Joomla branch, evaluate the migration path, template, and other extensions first.

On a live site, it is better not to install a new module without a staging copy. A minimal safe workflow looks like this:

1. Back up the files and database.
2. Make sure the admin panel opens without errors.
3. Confirm that the active template has clear positions where the module can be displayed.
4. Check whether Joomla cache or third-party caching extensions are enabled.
5. Verify that you have access to the page where the pricing block will be published.

Practical check: if you do not know which template position to use for the pricing block, first enable module position preview in the template settings and inspect the available areas with the ?tp=1 parameter. Turn the preview back off when you are done, especially on a live site.

Prepare the Pricing Content Before You Configure the Module

Do not start with colors. First, build the text structure of your plans in a regular table or document: plan name, short purpose, price or "by request" format, 4 to 7 key differences, button text, and link. If you skip this step, the administrator ends up editing fields directly in the module, comparing options by eye, and easily missing an important row.

For a pricing block, honest differentiation matters. You should not create three plans where almost every row is identical and the real difference is hidden in a small note. A reader should be able to tell within a few seconds why one plan is cheaper, another is the best overall option, and a third is meant for a more complex project. That is not just a design issue - it is also a trust issue.

Installation and the Initial Check in Joomla

JUX Pricing Table is installed as a Joomla extension. The exact path may differ slightly depending on the interface version, but the general process is standard: the administrator uploads the ZIP package through the extension installer, then finds the new module in the site modules list and configures its publishing settings. Joomla installation documentation notes that after installation, module-based extensions appear in the Modules list, where they can be enabled or disabled.

How to Install the Package

The general workflow is:

1. Sign in to the Joomla admin panel with a user account that has extension installation permissions.
2. Open the extension installation section and choose ZIP package upload.
3. Upload the JUX Pricing Table archive obtained from a trusted developer source.
4. Wait for the successful installation message, or record the exact error text if the installation fails.
5. Go to the site modules list and find the pricing table module.

Do not uninstall and reinstall the module several times in a row just because it is not showing on the page. First check whether it is installed in the modules list, whether it is published, whether a position is assigned, and whether the correct menu items are selected. In Joomla, most "invisible" modules are caused not by installation problems but by publishing rules.

Initial Publishing Setup

After creating or opening the module, check the basic Joomla fields:

• Status. The module must be published, or it will not appear on the public site.
• Position. Choose a position that exists in the active template and sits in the right area of the page.
• Access. A typical pricing page usually needs public access if the block should be visible to any visitor.
• Menu Assignment. Specify which menu items should display the module.
• Ordering. If multiple modules share the same position, check their display order.

For testing, it is convenient to publish the module first on a single hidden or internal page. That way, you do not risk accidentally exposing draft pricing on every page of the site. Once everything looks right, move the module to the live menu item or expand its assignment.

How to Build the Plan Structure Before You Configure It

The most common pricing table mistake is starting with design before the offer logic is clear. The module can give you a grid, slider, comparison table, styles, colors, icons, and buttons, but it cannot fix a confusing service package structure. That is why it is worth making a small product map before filling in the fields.

Define the Role of Each Plan

Every pricing plan should have a role. Not "cheap," "mid-tier," and "expensive," but "for getting started," "for ongoing work," "for a complex project," "for a team," or "for a one-time task." That kind of wording helps you choose the plan name, feature rows, and button text. If you cannot explain a plan's role in one sentence, the visitor probably will not understand the difference either.

Example for a services page:

• The "Starter" plan - for a small task that needs a fast launch without complex setup.
• The "Growth" plan - for a site that needs ongoing updates, support, and measurable results.
• The "Team" plan - for a project with multiple stakeholders and a custom scope of work.

Once the roles are clear, it becomes much easier to write honest feature rows. You do not need to list everything. Include only the differences that actually influence the decision.

Limit the Number of Rows

For pricing cards, 4 to 7 rows usually work best. Once there are too many rows, the user starts scanning the block like a table rather than an offer. In detailed comparison table mode, you can include more data, but then you need to group rows - support, limits, integrations, reporting, personalization. If every row is listed in one long run, the matrix quickly becomes noisy.

A good pricing row explains the buyer-facing value, not the internal mechanics of the service. Instead of "up to 10 iterations," you can write "up to 10 revisions within the approved layout" if that is more accurate. Instead of "email support" on a Russian-language site, it is better to write "support by email" unless that phrase is an exact UI label.

Prepare the Button Links

The official JUX Pricing Table page emphasizes a call-to-action button for each plan. That is not a minor detail. The button defines the next step. For each plan, decide in advance where it should lead:

• To a request form with the selected plan.
• To the contact page.
• To a detailed plan description.
• To an external booking or payment service, if that matches the site's workflow.

Do not use the same button text for every plan if the actions are different. "Request a Quote," "Discuss the Project," and "View Details" communicate very different next steps. If all buttons go to the same form, add a plan selection field or a clear instruction in the form so the manager does not have to figure out the intended plan from scratch.

Grid, Slider, and Comparison Table: Which Mode to Choose

One of JUX Pricing Table's strongest points is its flexible display options. The developer explicitly lists grid, slider, and comparison table. These modes are not interchangeable decorations. Each serves a different purpose and comes with different tradeoffs.

Grid Layout for a Quick Side-by-Side Choice

A grid works well when there are only a few plans and the differences can be explained through cards. This is usually the clearest mode for services pages, subscriptions, educational packages, and membership offers. The user sees the plans side by side, compares the price, reads 4 to 7 rows, and clicks the button.

For grid layouts, the following rules help:

• Do not place more than four columns in a single row if a large part of the audience uses laptops and tablets.
• Highlight one recommended plan, not two at once.
• Keep the card heights close to each other, or the comparison starts to feel uneven.
• Move secondary conditions below the block instead of stuffing them into every column.

Slider Presentation for a Larger Number of Packages

A slider makes sense when there are more plans than a grid can comfortably fit, or when the block sits in a narrow area of the page. But a slider is worse for direct comparison because users do not see all options at the same time. It works better for cards with a similar structure than for a complex matrix of differences.

If you use a slider, check three things: whether the arrows or another navigation cue are clearly visible, whether the cards remain readable on mobile, and whether the recommended plan is hidden beyond the first visible slide. If one plan matters most, it should usually appear first or second rather than deep into the carousel.

Comparison Table for Detailed Differences

A comparison table is useful when buyers are choosing based not on price but on features. For example, one plan includes integration, another includes support, and a third includes advanced reporting. In that case, the cards at the top can provide the quick overview, while the comparison table below explains the details.

The main risk is making the table too heavy. If every row contains nothing but check marks and crosses, the user does not understand the actual value. Use short, clear feature names. Do not mix technical limitations, marketing benefits, and legal terms in the same group. It is better to divide the comparison by meaning than to create one long list of rows with no hierarchy.

Detailed Setup After Installation

Once the module is installed and published on a test page, move on to the content setup. The exact interface tabs depend on the product version, so this section does not invent the names of internal fields. Instead, the setup logic is based on confirmed features: display options, styles, color customization, fonts, icons, backend management, and call-to-action buttons.

Fill Out the Plans as a Complete Set

Do not perfect the first plan while the rest are still empty. It is better to fill in all plans quickly with draft content, save the module, and look at the overall rhythm. That makes it much easier to spot where lines are too long, where a price stands out in the wrong way, where a button feels weak, or where more explanation is needed.

For each plan, walk through this checklist:

1. The plan name is clear even without extra context.
2. The short description explains who the plan is for.
3. The price or payment format does not create confusion.
4. The feature list shows differences instead of repeating the same set over and over.
5. The button leads to the correct action.
6. After saving, the plan is visible on the test page.

Choose the Style and Colors After the Text Is Verified

JoomlaUX highlights style diversity and customization freedom: colors, fonts, icons, and other elements can be adjusted to match the brand. In practice, that means you should pick the style only after the text length is clear. A design that looks great with short English phrases can fall apart with longer Russian lines. First verify the real plan names and feature rows, then fine-tune the style.

For a typical site, a safe setup usually looks like this:

• The main color is taken from the site's existing buttons or accent elements instead of being chosen at random.
• The recommended plan is highlighted with a border, heading color, or a small label, but not every visual treatment at once.
• Icons are used only where they actually help users scan the rows.
• Fonts do not clash with the Joomla template or reduce readability.
• Buttons have enough contrast and follow the same interaction logic.

Configure Position, Access, and Menu Assignment

After working on the content, return to Joomla's system-level settings. This is especially important for a module because the same pricing block can easily end up showing on every page or on none at all. Joomla documentation on module display by menu item describes four menu assignment options: on all pages, on no pages, only on selected pages, and on all pages except selected ones. For pricing blocks, "only on selected pages" is usually the right choice.

If the pricing block should appear on a service page, assign the module to the corresponding menu item. If the page opens as an article without its own menu item, Joomla may use a different active item, and the module may behave differently than expected. In that case, people often create a hidden menu item for the target article or review the current menu structure.

Check the Mobile View Before Finalizing the Design

The official page emphasizes responsive design. But module responsiveness does not eliminate the need to test real content. Long Russian plan names, extended price labels, and multiple feature rows can stretch a card considerably. At minimum, test three states: a wide screen, a tablet-width layout, and a mobile screen. If the grid becomes too long, consider shortening the rows or switching to another mode.

Quick takeaway: first the plan structure, then the display mode, then styles, then Joomla publishing, and only after that the mobile check. That sequence reduces the risk of redesigning the block because of the text or chasing a "broken" module that simply is not assigned to the right menu.

Practical Example: Three Service Packages on a Joomla Page

Imagine a studio site that offers Joomla website maintenance. The goal is to present three packages: a basic audit, ongoing support, and a custom package for complex projects. The purpose is not to take payment immediately, but to help the visitor choose the scale of work and move on to a request form.

Goal

Create a clear three-plan pricing block on the services page, with the middle plan highlighted as the main option, each button linking to a request form, and the module displayed only on the selected page.

Preparation

Before opening the settings, prepare a table like this:

A draft like this is helpful because it makes the logic visible right away. If the "Audit" plan contains the same items as "Support," the distinction is unclear. If every button simply says "Order," the user does not understand what action they are taking.

Setup Steps

1. Create or open the JUX Pricing Table module in the Joomla admin panel.
2. Enable grid mode because there are three plans and they need to be compared side by side.
3. Add the three plans and fill in the names, short descriptions, feature rows, and buttons.
4. Highlight the middle plan with a moderate visual accent if it is the standard choice.
5. Choose a template position that sits near the main content on the services page.
6. In menu assignment, select only the services page menu item.
7. Save the module and open the page on the public site.

Validation

The page should show three plans, a consistent card structure, a clear emphasis on the primary option, and working buttons. Test the buttons without being logged in and in a regular browser window. If a button leads to a form, make sure the form explains which plan the user selected, or at least gives them a field to choose one.

Important Detail

If the module is visible on the homepage but not on the services page, the issue is usually not JUX Pricing Table itself. Check which menu item is active for the services page, whether the menu assignment is correct, whether the selected position exists in the template, and whether that position is hidden in the specific article layout.

How to Validate the Result on the Site

The final check is not just for the designer. It shows whether the module works as part of the user journey. Price, feature rows, button, position, mobile rendering, and access all need to be checked together, because that is how visitors experience the block.

Check the Public-Side Experience

Open the page without logging into the admin panel and ask yourself five questions:

• Is it clear within a few seconds how many plans are available and how they differ?
• Does the recommended plan feel helpful rather than overly aggressive?
• Do all buttons go where their text says they should?
• Are any lines cut off, wrapped awkwardly, or breaking the card height?
• Is it obvious what the user should do after choosing a plan?

Test the page as a normal visitor, not only from inside the admin panel. If access to the module is limited to a user group, make sure that is intentional. For example, pricing for registered clients may be hidden from guests, but a public services page should usually be visible to everyone.

Check the Mobile Version

On mobile, the pricing table should still feel like a choice, not a long stack of random blocks. If you are using a grid, the cards will usually collapse into a single column. In that state, it is important that the recommended plan does not lose context and that the buttons do not end up too far from their descriptions.

If you are using a slider, check whether users can tell that the cards are swipeable. If you are using a comparison table, make sure the matrix does not become too wide. In some cases, it is better to place a short grid above the table and keep the detailed matrix for desktop or for a separate expandable block, if the template and module allow it.

Check Again After Clearing the Cache

Joomla documentation on caching notes that the cache can be cleared from the admin panel through System - Clear Cache. This is useful after changing pricing, colors, or module position. If you changed the settings but the public page still shows the old view, first clear the Joomla cache and the browser cache. If the site uses a separate caching service or CDN, check that as well.

Performance, SEO, Accessibility, and Security

A pricing table is rarely the heaviest element on a site, but it often sits on a commercially important page. That means you should not evaluate it only visually. Make sure the pricing block does not slow the page down, interfere with indexing, hurt accessibility, or introduce unnecessary risk.

Performance and Unnecessary Effects

If you choose a slider or a style with animations, check whether it causes any loading delay. On a services page, users should see the price and key differences quickly. Too many icons, heavy fonts, and decorative effects may look good in a demo, but perform worse on a real website.

The best rule for pricing blocks is readability first, decoration second. If an effect does not help people choose a plan, disable it or replace it with a calmer style. This matters even more on mobile, where the screen is smaller and unnecessary motion becomes irritating faster.

SEO Without Keyword Stuffing

Search engines do not need the module name repeated ten times. What matters more is that the services page clearly explains the offer and that the pricing block supports that meaning. Plan names, feature rows, and button labels should be written for people. Do not insert the same keyword into every card. For SEO, a clear page structure, solid headings around the block, understandable links, and the absence of hidden or duplicated text are much more useful.

Accessibility and Buttons

Check the contrast of the buttons and text. If the price is light gray on a white background or the button blends into the card, some users simply will not notice the action. Button text should describe the action: "Request a Quote," "View Details," "Book a Consultation." Generic wording like "Learn More" is acceptable, but it does a weaker job of signaling the next step.

A Safe CSS Tweak Without Editing the Extension

If you want to sharpen the appearance slightly after setup, do not edit Joomla core files, template files, or the extension itself directly. It is safer to add your own CSS through the template's custom styles mechanism. Before doing that, assign the module a separate external CSS class if that option is available in the module or template settings, and scope the rules to that block only.

.pricing-landing {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-landing a {
  font-weight: 700;
  text-decoration: none;
}

.pricing-landing a:focus-visible {
  outline: 3px solid #ffb347;
  outline-offset: 3px;
}

This example does not depend on JUX Pricing Table's internal classes. It works as an external wrapper: it improves the container and link focus inside the block, assuming you assigned the module the pricing-landing class yourself. After adding it, test the public page, the mobile version, and keyboard navigation. To roll the change back, remove the CSS or remove the assigned class from the module.

Common Problems and Troubleshooting

Pricing table issues usually look the same: the module is installed but not visible; visible but on the wrong page; the plans are there but old data is still showing; buttons go to the wrong place; or the mobile version breaks because of long lines. Below is a troubleshooting flow specifically for a Joomla module of this type.

The Module Does Not Appear on the Page

Symptom: installation completed successfully, the module exists in the admin panel, but the pricing block is not visible on the public site.

Possible causes: the module is not published, the selected position does not exist, the menu item does not match the menu assignment, the access level hides the block from guests, or the template does not render the chosen position for that page type.

What to check: publication status, position, access, menu assignment, the current active menu item, and whether the position exists in the template. If you are unsure, temporarily assign the module to a known-good position and a single test page.

How to fix it: publish the module, choose an existing position, assign the correct menu item, and test the page while logged out. If the position is not rendered in the current template layout, choose another position or adjust the template.

Changes Are Not Visible After Saving

Symptom: the pricing block looks updated in the admin panel, but the site still shows the old price, old text, or previous style.

Possible causes: Joomla cache, browser cache, CDN, a caching extension, or checking the wrong page. Sometimes the administrator edits one copy of the module while another instance is the one actually published on the page.

What to check: the module ID or title, the menu item, Joomla cache through System - Clear Cache, browser cache, and external caching settings. If the page contains multiple similar blocks, temporarily change the test module title so you can confirm that you are editing the correct instance.

How to fix it: clear the cache, refresh the page without using saved cache, and make sure you edited the correct module instance. If the issue keeps repeating, temporarily disable caching for troubleshooting and turn it back on after testing.

The Cards Look Uneven or the Text Breaks the Layout

Symptom: one card is much taller than the others, lines wrap badly, or buttons end up at different heights.

Possible causes: plan names are too long, the plans contain different numbers of items, long Russian words stretch the layout, or the demo style does not fit real content well.

What to check: heading length, number of rows, repetition, mobile view, and the selected style. Compare which rows actually help users choose a plan and which ones could be moved below the block.

How to fix it: shorten the wording, even out the number of key rows, choose a calmer style, and add external CSS only through the template's custom styles. If the design is breaking because of the structure itself, it is better to fix the pricing structure than to try to force it into place with CSS.

The Buttons Lead to the Wrong Pages

Symptom: a visitor clicks a plan button and lands on a generic page, an empty form, or an external address with no context.

Possible causes: all plans use the same link, a forgotten test URL is still in place, the form has no plan-selection parameter, or the link opens in the wrong context.

What to check: every button individually, the behavior in a normal browser window, the form after the click, and event analytics if it is configured. Do not stop after testing only the first card.

How to fix it: set separate links or add a clear plan choice on the destination page. If all plans go to one form, the text before the form should make it clear that the user can specify the needed package.

The Slider Is Awkward on Mobile

Symptom: the cards inside the slider are readable, but users do not notice the other plans or do not realize the block can be swiped.

Possible causes: weak arrows, the next slide is not visible enough, too many plans, or the recommended plan does not appear on the first visible screen.

What to check: the first visible plan, arrows, navigation dots, swipe behavior, card height, and the layout on narrow screens.

How to fix it: move the main plan closer to the beginning, reduce the number of cards, choose grid layout for a short set, or keep the slider only for a secondary block. If users need to compare plans at the same time, a slider may not be the best mode.

When JUX Pricing Table Is the Right Choice

JUX Pricing Table is a strong option if you need a manageable Joomla module for pricing plans, service packages, or plan comparisons rather than a full payment system. Its main advantage is the combination of Joomla's module logic with multiple presentation modes: grid, slider, and comparison table. That lets you build a short decision block, an interactive plan showcase, or a more detailed comparison without developing a separate component.

Before publishing, do not stop at installation. Define the role of each plan, verify the button links, choose the correct position, configure menu assignment, test the mobile view, and clear the cache. If the block helps visitors understand the differences and move to the next step, then the module is doing its job.

If you have already checked compatibility, prepared the plan structure, and want to test the extension on your Joomla site, you can move on to the download section and get the JUX Pricing Table file. Run the first setup on a test page or staging copy so you can safely review the appearance, buttons, and menu assignment before publishing it for all visitors.