Build a custom pricing table in Weebly

A custom pricing table gives visitors a quick way to compare services, limits and likely costs before they have to email you. For a Weebly site, that comparison can live inside an ordinary page while still feeling like part of your brand. Building it yourself also means you can match the layout, wording and colours to the rest of your site instead of accepting a generic widget.

The most useful approach combines semantic HTML with a small amount of CSS. You can create three clean plan cards on a desktop, rearrange them for smaller screens and keep every price, feature and booking action readable. A table built this way is lighter than a JavaScript package, easier to update and less likely to slow down a mobile connection.

You will also need to make commercial decisions before touching the editor. Think about billing periods, GST, feature differences, optional extras and the action you want each card to trigger. This article walks through those choices, then shows how to install, style and maintain a responsive comparison grid for an Australian audience.

Plan the offer before writing the code

Start with the service, not the visual style. Write down each package as a customer-facing offer with one clear promise. For example, a Melbourne photographer might offer “Essentials”, “Studio” and “Event” packages, while a Brisbane cleaning company could separate standard, deep-clean and recurring visits. The names should reflect how locals search for a service, not internal departments or vague labels such as “gold”.

Decide exactly what each price represents. Use the dollar sign with “AUD” when international visitors might be looking at the page, and state whether the amount is a monthly recurring charge, an annual fee or a one-off project cost. Australian consumers generally expect the advertised price to include GST. If you offer business customers a GST-free rate, label it clearly as excluding GST rather than hiding that detail until checkout.

Each package should contain a short, scannable feature list covering only the items that influence the decision. Mention a starting price if the final cost varies, and explain what changes the quote. Give every card one primary action, such as “Book this package”, “Request a quote” or “Start a project”. A fair dinkum straightforward choice is usually better than three competing buttons that leave visitors wondering which path to take.

Add the plan grid to a Weebly page

Create a dedicated page for the offers, then add an Embed Code element from the Weebly editor. Paste the table into that element rather than placing raw tags inside a rich-text paragraph, which may cause the editor to alter them. Work on a duplicate page first if the pricing is already live, so an incomplete layout never appears to customers.

Use meaningful HTML inside the embed. A wrapping div with a class such as wpt-grid can contain one article element for each plan, followed by a heading, price paragraph, feature list and link. The main section can use an h2, while each package name should use an h3. This creates a sensible heading order for search engines and screen readers while giving you precise control over the presentation.

Keep all class names prefixed, such as wpt-grid, wpt-card and wpt-price. Weebly themes already apply their own styles, and generic names like “row” or “price” can accidentally change the appearance of unrelated elements. Place the CSS in your theme’s custom code area if the editor provides one; otherwise, include a style block within the embed. A CSS Grid layout with three equal columns is a practical starting point for desktop screens.

The table may contain links to a booking form, external checkout or email address, so explain what happens next. If a visitor enters personal information, connect the page to your privacy details and make the purpose of the form clear. Avoid sending people to a generic contact page when one specific package has already been selected, as that makes it easier for them to continue.

Style the cards for Australian visitors

Give each plan enough separation to look distinct without turning the page into a collection of floating boxes. A border, a subtle background shade and consistent internal spacing often look more professional than heavy shadows. Highlight the recommended package with a small “Most popular” label, but do not rely on colour alone to communicate that choice. The label, position and button styling should all reinforce it.

Typography does most of the visual work. Make the price large and prominent, keep the billing period beside it, and use a slightly smaller size for feature text. Test the page at actual mobile dimensions because many visitors will first see your pricing on a phone during a commute or between meetings. Australian businesses often serve customers across different states and regional areas, so a design that only works perfectly on a large office monitor is rarely enough.

Colour consistency matters just as much as type. Keep accents limited to your brand colours and confirm that text remains readable against every background. When testing a brand colour, remove competing tints before deciding on a final tone, much as a neutral colour scan helps preserve a more natural image. The same restraint prevents your plan cards from competing with one another or overwhelming the offer itself.

Make the table mobile-friendly and accessible

A responsive pricing comparison should reorganise rather than simply shrink. Use a single-column layout on narrow screens, with the package name, price and action button appearing before the feature list. CSS media queries can change the grid template, and flex-direction: column can handle a card-based layout. Check that long feature descriptions wrap cleanly and that the page never creates sideways scrolling.

Semantic markup supports the mobile design as well as assistive technology. Real headings, paragraphs and unordered lists make the content easier to navigate, while real links provide keyboard focus and familiar interaction behaviour. Do not turn an ordinary div into a button with JavaScript merely to apply an animation. If the design needs additional interaction, preserve the underlying link or button so people can activate it with a keyboard.

Test the finished page with zoom enabled and with a screen reader, at least briefly. Interactive controls need visible focus states, adequate colour contrast and touch targets that are comfortable to tap. Avoid animated movement that cannot be switched off, and do not hide essential prices or conditions inside hover effects. These details matter for customers using older devices, budget phones or slow connections, which remain common across the Australian market.

Refine trust, payments and upkeep

Pricing pages carry an implicit promise, so display the important conditions plainly. Explain whether GST is included, when payment is due, what happens after the initial period and whether the customer can cancel. If a package excludes certain costs, name them instead of writing “extras available”. Clear information reduces the need for lengthy clarification emails and helps the site meet the reasonable transparency expectations of Australian consumers.

Payment choices should reflect how the local market operates. Cards are essential, while some customers may also want a buy-now-pay-later option through providers such as Clearpay, humm or ZIP. For higher-value services, consider a quote followed by an invoice with your ABN and GST treatment shown. Customers in Sydney, Melbourne and regional areas should be able to understand the total commitment without needing a phone call.

Track meaningful actions rather than collecting unnecessary details. An analytics event can record which package receives the most clicks, while the form itself can show which option someone selected. Make sure analytics and marketing tools respect your privacy disclosures, and test that the chosen service reports the events correctly. Review prices, feature lists and outbound links on a regular basis, particularly after a promotion ends or a payment provider changes its options.

A polished pricing table should make the next step obvious while allowing visitors to compare the details that matter. Test the layout on a desktop and a phone, check the totals with GST included, and confirm that every booking link reaches the correct package. Consistent spacing, readable text and honest conditions will do more for conversion than decorative effects.

Open your Weebly editor, add the semantic plan grid, apply your brand styling and publish a tested pricing page for your customers today.