# Pricing Table

The **Pricing Table** **Widget** is **used to** represent your payment plans on the website most clearly and smartly.

### Using the Pricing Table widget

Go to your site and start editing the page with Elementor.

### Step 1:

Select the **Pricing Table** widget from the menu bar on the left-hand side of your screen then drag and drop it into the selected area.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2Fy6voN1XDvRglhZtr4RHK%2FCompanion%20-%20pricing%20table%20add.png?alt=media\&token=5c885fd9-7b28-46b0-ab01-a46e077468f8)

### Step 2:

You will get a window with the basic setting options under the **Content** tab. There you can edit the general information, features of the pan, and button of the plan.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FjUUQtEaCO1iNffsLlmiL%2FCompanion%20-%20pricing%20table%20content.png?alt=media\&token=20e15a24-bafc-4846-b9f5-eaefdac80e79)

In **General settings**, you can add the title, price, currency, and duration to the pricing table items:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FeKTpLzvLtp1pV6YcjhMn%2FCompanion%20-%20pricing%20table%20general.png?alt=media\&token=8c12e772-7f89-4313-851c-e209481a8054)

In the **Features** section, you can list the features which are included in the pricing plan:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FYyxA3O08Wp2tP1EbCaUJ%2FCompanion%20-%20pricing%20table%20features.png?alt=media\&token=104bc30b-1258-42c7-bff0-3efe9ddbf8de)

Hit on the **Add items** to add/delete items.

In **Button** section you can edit the text and set the link to redirect users.

In the **Label** section you can add the one of the available three types of labels to the pricing plan: 

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FsXAF75rRxxR2qsPhHCTh%2FCompanion%20-%20pricing%20table%20label.png?alt=media\&token=7b6eeb76-1396-45f0-ba50-371e42df0d49)

### Step 3:

Now, by clicking on the Style Tab you can customize the text color, typography, margin, padding, size, and many more for Pricing plan item.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FIoi9063nUEPZR8G1uoX3%2FCompanion%20-%20pricing%20table%20style.png?alt=media\&token=679eb675-0912-4ef9-a934-5a43065d2ff8)

### Step 4:

If you want to add motion effects, background, or make the page responsive, click on ‘Advanced**’** to explore those options. This **‘Advanced’** tab is a default feature of Elementor. Give a read to [this Document](https://docs.elementor.com/article/571-advanced-tab) to know more about Advanced features and their uses.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FE0AkbbNxBWv21SkTBfo8%2FCompanion%20-%20pricing%20table%20adv.png?alt=media\&token=8d7a75d6-d5b0-403e-955d-b082b20dbad8)

Finally, after completing all the customization click on ‘Publish’ to see your work live.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FUbp3vygqDRjuFcuObdFz%2FCompanion%20-%20pricing%20table%20final.png?alt=media\&token=d7d1be66-edc8-4664-a02d-c1b85981f89d)

Great job! You have done it successfully.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F41HU2SEDJ8saf5U1QNPm%2FPricing%20Table.gif?alt=media\&token=1cfb36b7-1766-43bf-a6eb-47737bd76d5b)