Documentation
SaasPricing
Thank you so much for purchasing our item
- Version: 1.0.5
- Author: Debuggers Studio
- Created: September, 2024
- Update: September, 2024
Introduction
This documentation will guide you through the process of uploading and installing the SaasPricing plugin to your WordPress website. So you can quickly setup your plugin. Your comments and ratings would be also highly appreciated to improve our product better. If you have any questions which are not covered in this guide, please do not hesitate to reach out to us.
Prerequisites
Before proceeding with the installation, please ensure you have the following:
- WordPress Version: 5.8 or higher
- PHP Version: 7.4 or higher
- Elementor
Installation Request
To utilize SaasPricing , Elementor is required. If you accidentally install SaasPricing without Elementor , it will not function properly. If you try installed the plugin without elementor, the pop-up message will appear, prompting you to install and activate Elementor
Step: 01
Install and Activate Elementor
Step: 02
Install and Activate SaasPricing
Follow the steps as instructed in the images below:
Step: 01
- 1. From your WordPress Dashboard, navigate to the Plugins section.
- 2. Click on the Add New Plugin
- 3. In the search bar, type saaspricing.
- 4. Once the search results appear, locate the plugin and click the Install Now button.
Step: 02
After the installation is complete, click the Activate button to enable plugin.
Step: 03
Install and Activate SaasPricing Pro
NOTE: Make sure before installing SaasPricing Pro you've installed Elementor and SaasPricing
Step:01
- 1. From your WordPress Dashboard, navigate to the Plugins section.
- 2. Click on the Add New Plugin
- 3. In the top right click on Upload Plugin
- 4. Now choose plugin file saaspricng-pro.zip from you computer or laptop
- 5. Click on Install Now button
Step:02
Click on Activate plugin
Import Demos ( Only Pro Version )
NOTE: Make sure before importing demos you've installed SaasPricing Pro, Elementor and SaasPricing
Create A Page
Create a page where you want to show your pricing table
- 1. From your WordPress Dashboard, navigate to the Pages section.
- 2. Click on the Add New button to create a new page.
Publish Page and Edit Page With Elementor
- 1. Page Title: In the title field, type name of your new page.
- 2. Publish: Once you’ve added the page title, click the "Publish" button to make your page live.
- 3. Edit With Elementor: After publishing, click the "Edit With Elementor" button to start customizing your page using the Elementor page builder.
Comparison Table
Drag and drop comparison table
- 1. On the left side of the screen, you'll see the Elementor widget panel. This is where all the available widgets are located.
- 2. Scroll through the panel SAAS PRICING and select Comparison Table or use the search bar to find the widget by its name (for an exmaple Comparison Table) you want to add to your page.
- 3. Click and hold on the widget you want to use, then drag it from the panel.
Table Title and description
In this video, we'll show you how to change the title and description of your comparison table. You'll also learn how to easily adjust the text style, color, and alignment to make it look just the way you want.
Columns title and description
In this video, we'll show you how to change the Columns title and description of your comparison table. You'll also learn how to easily adjust the text style, color, and alignment to make it look just the way you want.
Images
In this video, we'll learn how to upload an image to your comparison table, make the image bigger, enable a lightbox for viewing, and adjust the image spacing.
Pricing
Form this video, we'll learn how to change the pricing text, update the currency format, enable the sale price and period, and customize their styles.
Review
This video will guide you on how to add reviews, customize their contents, and apply styles to make them look just the way you want.
Features
In this video, we'll learn how to create features, set their titles, customize column titles, alignment, icons, and add styles to the "Features" section.
CTA
In this video, we'll learn how to customize the primary button's text, link, position, size, icon, and icon spacing, as well as how to style both primary and secondary buttons.
Vertical Table
Drag and drop vertical table
- 1. On the left side of the screen, you'll see the Elementor widget panel. This is where all the available widgets are located.
- 2. Scroll through the panel SAAS PRICING and select Vertical or use the search bar to find the widget by its name (for an exmaple Vertical) you want to add to your page.
- 3. Click and hold on the widget you want to use, then drag it from the panel.
Header
In this video, we'll guide you through the process of customizing the header icon, title, description, tag, ribbon and alignment and styles of a vertical pricing table making it easy to tailor it to your needs.
Pricing
Form this video, we'll learn how to change the pricing text, update the currency format, enable the sale price and period, and customize their styles.
Countdown
In this video, you'll learn how to add a countdown timer, set its expiration date, and style it to match your design.
Review
This video will guide you on how to add reviews, customize their contents, and apply styles to make them look just the way you want.
Features
In this video, we'll guide you through the process of adding a feature title, text, icon, customizing icon colors, and adjusting feature style properties.
Horizontal Table
Drag and drop horizontal table
- 1. On the left side of the screen, you'll see the Elementor widget panel. This is where all the available widgets are located.
- 2. Scroll through the panel SAAS PRICING and select Horizontal or use the search bar to find the widget by its name (for an exmaple Horizontal) you want to add to your page.
- 3. Click and hold on the widget you want to use, then drag it from the panel.
Header
In this video, we'll guide you through the process of customizing the header title, description, tag and alignment of a horizontal pricing table, making it easy to tailor it to your needs.
Features
In this video, we'll guide you through the process of adding a feature title, text, icon, customizing icon colors, and adjusting feature style properties.
Column reverse and slogan title
In this video, we'll explore how to reverse the columns in a horizontal table and customize its slogan title.
Pricing
Form this video, we'll learn how to change the pricing text, update the currency format, enable the sale price and period, and customize their styles.
Ribbon
In this video, we'll learn how to update the content of a ribbon and apply custom styling to it.
Countdown
In this video, you'll learn how to add a countdown timer, set its expiration date, and style it to match your design.
Review
This video will guide you on how to add reviews, customize their contents, and apply styles to make them look just the way you want.
Pricelist
Drag and drop pricelist
- 1. On the left side of the screen, you'll see the Elementor widget panel. This is where all the available widgets are located.
- 2. Scroll through the panel SAAS PRICING and select pricelist or use the search bar to find the widget by its name (for an exmaple pricelist) you want to add to your page.
- 3. Click and hold on the widget you want to use, then drag it from the panel.
Pricelist items and divider
In this video, we'll guide you through customizing the price list icon, title, description, list price, currency symbol, and divider, along with adding the right styling to each element.
Pricelist discount and sale
In this video, we'll show you how to add discount and sale content to your pricelist, along with tips on styling it.
Interactive Pricing Calculator
Drag and drop Interactive Pricing Calculator
- 1. On the left side of the screen, you'll see the Elementor widget panel. This is where all the available widgets are located.
- 2. Scroll through the panel SAAS PRICING and select Interactive Pricing Calculator or use the search bar to find the widget by its name (for an exmaple Interactive Pricing Calculator) you want to add to your page.
- 3. Click and hold on the widget you want to use, then drag it from the panel.
Body
In this video, we'll guide you through customizing form fields and columns, while applying the right styling to each element.
Display
In this video, we'll guide you through displaying your pricing calculator in both horizontal and vertical layouts.
CTA
In this video, we'll guide you through customizing the position of the CTA, its title, currency symbol, button text, and link, as well as adding styles to them.
Enable reCAPTCHA
In this video, we'll show you how to add reCAPTCHA to your pricing calculator to protect against spam efficiently.
Stripe Checkout
In this video, we'll show you how to add Stripe Checkout to your pricing calculator
Content Switcher
Drag and drop Content Switcher
- 1. On the left side of the screen, you'll see the Elementor widget panel. This is where all the available widgets are located.
- 2. Scroll through the panel SAAS PRICING and select Content Switcher or use the search bar to find the widget by its name (for an exmaple Content Switcher) you want to add to your page.
- 3. Click and hold on the widget you want to use, then drag it from the panel.
Monthly / Yearly Pricing Switcher
In this video, you'll learn how can we create yearly/mothly pricing table using content switcher
Skin 1
In this video, you'll learn how use and customize and add style to content switcher "Skin 1"
Skin 2
In this video, you'll learn how use and customize and add style to content switcher "Skin 2"
Skin 3
In this video, you'll learn how use and customize and add style to content switcher "Skin 3"