Pricing Plans: Displaying Different Plan Types Using Tabs

Streamline your customer experience by displaying your different pricing plans using tabs. For example, you can display your monthly and yearly plans using separate tabs. This makes it quicker and easier for your customers to find the plan that's right for them.

Note:

Currently, the tabs element is not yet available in the Wix Harmony Editor.

Step 1 | Add tabs to your site

Start by adding the tabs element to the relevant page on your site.

Wix Editor

1. Go to your editor.

2. Go to your Plans & Pricing page:

   1. Click Pages & Menu

      

      on the left side of the editor.

   2. Click your Plans & Pricing page.

3. Click Add Elements

   

   on the left side of the editor.

4. Click Interactive.

5. Click Tabs under Boxes.

6. Click and drag your chosen tab design to add it to your page.

Studio Editor

1. Go to your editor.

2. Go to your Plans & Pricing page:

   1. Click Pages

      

      on the left side of the editor.

   2. Click your Plans & Pricing page.

3. Click Add Elements

   

   on the left side of the editor.

4. Click Layout Tools.

5. Click Tabs.

6. Select a design and drag it onto the page.

Step 2 | Name your tabs

Now that you've added the tabs element to your Plans & Pricing page, name each tab to help customers quickly find the right pricing plan. For instance, you can label the tabs based on payment frequency: weekly, monthly, or yearly.

Wix Editor

1. Click the tabs element in your editor.

2. Click Manage Tabs.

3. Hover over the relevant item in the panel.

4. Click the More Actions icon

   

   .

5. Click Rename.

6. Enter the new name into the field.

7. Click Done.

8. Repeat steps 3 -7 for each tab you display.

Studio Editor

1. Click the tabs element in your editor.

2. Click Manage Tabs.

3. Hover over the relevant tab and click the More Actions icon

   

   .

4. Click Rename.

Step 3 | Add the pricing plans elements to your tab items

After naming your tabs, add the pricing plans elements to all the tabs. Then, customize each one to display the relevant pricing plans.

Wix Editor

1. Click the tabs element in your editor.

2. Click the Tabs drop-down and select the relevant tab.

3. Click Add Elements on the left side of the editor.

4. Click Payments.

5. Click Single Plan under Pricing Plans.

6. Drag the relevant element onto the tab.

7. Drop the element when you see the Attach to Tab message.

8. Repeat steps 2 - 7 for each tab.

Studio Editor

1. Go to your Membership page in the top left.

2. Click the Pricing Plans element.

3. Click Settings.

4. Click Add-Ons.

5. Click the Add to Page drop-down next to single plan card.

6. Select the relevant page where you added your tabs.

7. Drag and drop your single plan widget into the first tab.

8. Select the single plan widget.

9. Click Copy.

10. Select the Tabs element again.

11. Click Manage tabs.

12. Select the second tab.

13. Click the More Actions icon

    

    .

14. Click Paste.

15. Repeat steps 8-14 for each additional tab and plan.

Step 4 | Choose what plans to display in each tab

Now that you have pricing plans widgets added to each of your tabs, you can choose the relevant plans you want to display on each widget on each tab.

Wix Editor

1. Click the tabs element in your editor.

2. Select the first tab from the drop-down.

3. Click to select the pricing plans element you added.

4. Choose which plans to display, depending on which pricing plans widget you chose for each tab.

Plan List

1. Click the Plan List widget in the tab.

2. Click Settings.

3. Click Plans.

4. Select the checkbox next to each plan you want to display in the selected tab.

Single Plan

1. Click the Single Plan widget in the tab.

2. Click Settings.

3. Click the drop-down and select the plan you want to display.

Studio Editor

1. Click the tabs element in your editor.

2. Select the single plan widget.

3. Click Choose Plan.

4. Select the relevant plan you want to display.

5. Click the tabs element again.

6. Click Manage Tabs.

7. Select the second tab.

8. Repeat the steps above for each tab and plan.