Pricing Plans: Customizing the Look of Your Pricing Plans Page

Customize the appearance of your Pricing Plans to complement your site's style and showcase the benefits your plans offer.
Encourage your visitors to sign up by adjusting the layout of your plans. You can also add stylized buttons and ribbons, format your text, and customize the background and color scheme. 
Adding an auto-renewal disclaimer also lets clients know your terms and conditions for your plans.
  • The Plans & Pricing page is a dynamic page, so any extra elements you add appear throughout the entire pricing plans checkout process.
  • We recommend you do not add any custom elements to the Plans & Pricing page as they can cover important parts of the pricing plans element. This can interfere with the checkout process for your clients.
In this article, learn how to customize the design of your Pricing Plans page by:

Adjusting the layout of your plans

Adjust the layout of your pricing plans to make the information clear and readable. This allows visitors to compare your plans and their benefits.

To adjust the layout:

  1. Go to the Pricing Plans page in your Editor.
  2. Click anywhere on the page. 
  3. Click Settings.
  4. Click Layout.
  5. Customize the layout using the following options:
    • Page Text Layout: Choose your alignment preference for your title, subtitle and disclaimer. 
    • Plan Card Padding: Use the sliders to set the amount of padding between elements on your plan cards and give them rounded edges using the corner radius setting.
    • Plan Description Layout: Set your plan description alignment.
    • Benefits Layout: Choose your bullet point style, alignment and line spacing for your plan benefits.

Customizing the information displayed on your plans

Display only the information you need to brief your customers on the details of your pricing plans. From the Display tab, you can highlight specific plans, choose whether or not to show titles and taglines, and more.

To customize how your plans are displayed:

  1. Select the Pricing Plans element in your Editor.
  2. Click Settings.
  3. Click Display. 
  4. Customize the display using the following options:
    • Plan Info: Choose which information to display about your pricing plans by clicking the following checkboxes: page title, page subtitle, plan name, plan tagline and plan benefits.
    • Highlighted Plan: Use the toggles to highlight a plan and add a ribbon.
    • Auto Renewal Disclaimer: Enable the Show disclaimer toggle to display any relevant terms and conditions for clients to view before they purchase a plan. When enabled, you'll be able to add this text to the Disclaimer text field.
The Pricing Plans display settings tab, showing a highlighted plan with a ribbon.

Personalizing the text on your plans

Use the Text tab to write the wording for the following parts of your pricing plan text elements you wish to display: page title, page subtitle, the select plan button, the free trial button and the ribbon. 

To personalize your text:

  1. Select the Pricing Plans element in your Editor.
  2. Click Settings.
  3. Click Text.
  4. Enter your desired text in the relevant fields (e.g. title, button, etc.)

Customizing the design of your plans

Customize the design of your pricing plans from the Design tab to complement the unique personality of your site. Choose a new background, format your text, stylize your buttons and even add ribbons to promote value deals to your customers.

To customize your design:

  1. Go to the Pricing Plans page in your Editor.
  2. Click anywhere on the page.
  3. Click Settings. 
  4. Click Design.
  5. Customize the design using the following options:
    • Background and Border: Select the color and drag the slider to change the opacity of your background, plan cards, benefits and dividers. 
    • Text Style: Choose the font and color for each piece of text that appears on your plan cards. 
    • Button: Choose the style, font, color, border width and opacity of your plan card button. 
    • Ribbon: Choose the font, color, background opacity and color, border width and border opacity and color for your highlighted plan's ribbon.
Click the Highlighted tab in each of the sections above to customize your highlighted plan. You can also click Reset to original design at any time to start again from the beginning. 

Did this help?

Hire a Wix Partner
Get help with your website's design, marketing and small tasks from a professional freelancer or agency.
Start Now