SERPsKit Pricing Table

Documentation · Version 1.1.2

1. Introduction

SERPsKit Pricing Table is a WordPress plugin that gives you a single Gutenberg block with eight unique pricing table designs, full sidebar customization for every visual element, and responsive layouts that adapt to any theme or screen size.

What this plugin covers

2. Requirements

3. Purchasing & License

SERPsKit Pricing Table is sold under three license tiers:

LicenseSites AllowedDescription
One Site1Activate on a single WordPress website
Five Sites5Activate on up to five WordPress websites
Ten Sites10Activate on up to ten WordPress websites

After purchase, you will receive a license key in the format SPT-XXXXX-XXXXX-XXXXX-XXXXX. Keep this key safe.

License keys do not expire unless otherwise stated at the time of purchase. The license issuer reserves the right to revoke keys that are shared publicly or used in violation of the terms.

4. Installation

  1. Download the serpskit-pricing-table.zip file from your order confirmation or account page.
  2. Log in to your WordPress admin dashboard.
  3. Go to Plugins → Add New → Upload Plugin.
  4. Choose the zip file and click Install Now.
  5. Click Activate Plugin.

After activation, a new Pricing Table menu item appears in the WordPress admin sidebar with a License submenu.

5. License Activation

Activating

  1. Go to Pricing Table → License in the WordPress admin sidebar.
  2. Enter your license key in the input field.
  3. Click Activate.
  4. If valid, you will see a confirmation with your masked key, license type, and activation date.

Deactivating

To move the plugin to a different site, go to Pricing Table → License and click Deactivate License. This frees up one activation slot.

Without a License

If no license is activated, inserting the block will show a "License not activated" notice in the editor. The block will not render on the frontend for visitors. Admins will see a red notice linking to the License page.

6. Getting Started

6.1 Inserting the Block

  1. Open any post or page in the Gutenberg editor.
  2. Click the + block inserter.
  3. Search for "Pricing Table" or "SERPsKit".
  4. Click the SERPsKit Pricing Table block to insert it.

6.2 Design Picker

When you insert the block for the first time, a visual design picker appears with eight options. Click any design to load it with default content. The designs are:

  • Design 1 — Shape Top + CTA
  • Design 2 — License Sizes
  • Design 3 — Black Friday
  • Design 4 — Quantity Slider
  • Design 5 — Clean Blue
  • Design 6 — Navy
  • Design 7 — 4 Column
  • Design 8 — 2 Column Split

After selecting a design, the block fills with sample plans, prices, and features. You customize everything from the sidebar panel on the right.


6.3 Switching Designs

You can switch designs after initial selection. Open the Design panel in the sidebar and choose a different design from the dropdown. A confirmation prompt appears because switching resets all content to the new design's defaults. Your previous content is not recoverable after switching.

Tip: If you want to keep your current content, duplicate the block before switching designs. That way you have a backup.

7. The 8 Designs

Design 1: Shape Top + CTA

Three-column layout with a colored shape bar at the top of each card, plan name, label, monthly/yearly price with suffix text, a "Get Started" button, feature list with icons, and a "More details" CTA bar at the bottom.

Unique features: Per-plan top shape color. CTA section with customizable background, text, link, height, and corner radius. The billing toggle switches both the price and the suffix text (e.g., "per month" to "per year" or "lifetime").

Best for: SaaS products, subscription services, plugin pricing pages.

Design 2: License Sizes

Three-column layout with a "Choose License Size" dropdown and monthly/yearly toggle. Prices update dynamically based on both the selected license size and billing period.

Unique features: License size selector with configurable options (e.g., "1 Website", "3 Websites", "5 Websites"). Price lookup table where you define monthly and yearly prices for each plan at each license size. Strike-through prices and info lines per size/plan combination. "Most Popular" badge per plan.

Best for: WordPress plugins, themes, or any product sold with per-site licensing tiers.

Design 3: Black Friday

Three-column layout with dark card backgrounds and a promotional section per plan. A bundled Black Friday image displays above each plan name, alongside editable "BIG CHOICE & CRAZY DISCOUNTS" text, a circular "BIG SALE" badge, and a large percentage text (e.g., "75%").

Unique features: Bundled promotional image. Per-plan promo section with on/off toggle, editable text, badge text, badge background color, percent text, and percent color. Outlined white-border buttons on dark backgrounds. "POPULAR" badge option per plan. Monthly/yearly billing toggle.

Best for: Seasonal sales, Black Friday campaigns, flash sales, holiday promotions.

Design 4: Quantity Slider

Three-column layout with a horizontal drag slider above the pricing cards. The slider controls a quantity value (e.g., "10 Guest Posts"), and all plan prices update dynamically as the user drags the slider.

Unique features: Range slider with floating tooltip showing the current quantity. Configurable slider stops (e.g., 5, 10, 25, 50) with per-plan prices at each stop. Customizable slider color and label text. Solid-fill buttons. "POPULAR" badge per plan.

Best for: Service-based businesses, guest posting services, SEO packages, bulk pricing.

Design 5: Clean Blue

Three-column layout with a clean white/blue color scheme, monthly/yearly toggle, and no strike-through prices or info lines.

Unique features: Minimal design with solid-fill buttons. "POPULAR" badge per plan. Blue accent with white and light gray card backgrounds. Monthly/yearly billing toggle with discount badge.

Best for: Clean, professional pricing pages where simplicity is the priority.

Design 6: Navy

Three-column layout inside a single unified card with no visible gaps between columns. The highlighted middle column uses a navy (#1B2B4B) background with a green accent button.

Unique features: Unified card container (columns share one outer border and shadow). Button positioned above the features list (reversed layout). Zero-gap design. Monthly/yearly billing toggle.

Best for: Premium brand pages, dark-themed pricing sections, enterprise products.

Design 7: 4-Column

Variable-column layout (2, 3, or 4 columns) wrapped inside an outer container card with configurable background and corner radius. Features are listed before the price (reversed order compared to other designs).

Unique features: Column count selector (2-4 columns). Outer container card with its own background and radius. Triangular "Most Liked" corner ribbon (CSS rotated, positioned top-right). Features displayed above price. Full-width buttons. Monthly/yearly billing toggle.

Best for: Marketing agency pricing, multi-tier plans, comparison-heavy offerings.

Design 8: 2-Column Split

Two-column layout with approximately 40%/60% width distribution. Cards use solid blue backgrounds with a pill-shaped plan name, two separate feature columns for wider cards, and a rounded "Subscribe Now" button with a configurable arrow icon.

Unique features: Two separate feature list editors per plan ("Features Column 1" and "Features Column 2"). Pill badge in the top-right corner ("MOST POPULAR" / "MOST VALUE") with configurable text and colors. Button arrow icon selectable from the built-in icon library. Plan name displayed inside a rounded pill. Horizontal divider between price and features. Monthly/yearly billing toggle.

Best for: Membership sites, subscription courses, coaching programs, simple two-tier pricing.

8. Block Controls Reference

All customization is per-block in the Gutenberg sidebar. There is no global dashboard for styling. The plugin dashboard only contains the License page.


8.1 Heading

ControlDescriptionDefault
Show HeadingToggle the heading section on or offOn
HeadingMain heading text"Ready to get start?"
SubheadingSecondary text below the heading"Choose the right package"
Heading SizeFont size in pixels40px
Subheading SizeFont size in pixels18px
Heading ColorHeading text color#000000
Subheading ColorSubheading text color#8A8C8E

8.2 Billing Toggle

ControlDescriptionDefault
Show Billing ToggleToggle the billing switch on or offOn
Monthly LabelText for the first billing option"Monthly"
Yearly LabelText for the second billing option"Yearly"
Show Discount BadgeToggle the discount badge on or offOn
Discount Badge TextText inside the badge"50% OFF"
Toggle Switch ColorBackground color of the sliding toggle#1F5AE2
Label Color (inactive)Color of the unselected label#8A8C8E
Label Color (active)Color of the selected label#1F5AE2
Badge BG ColorBackground color of the discount badge#1F5AE2
Badge Text ColorText color inside the discount badge#FFFFFF

8.3 Layout

ControlDescriptionDefault
Table BackgroundBackground color of the entire pricing sectiontransparent
Column RadiusBorder radius of each pricing card in pixels30px (D1), 10px (D2-D6)
Column PaddingInterior padding of each card in pixels15-20px
Column GapSpace between columns in pixels10px
Number of ColumnsColumn count (Design 7 only: 2, 3, or 4)4
Outer Card BackgroundBackground of the wrapper card (Design 7 only)#FFFFFF
Outer Card RadiusRadius of the wrapper card (Design 7 only)16px

8.4 Shadow / Outer Glow

One panel controls both outer glow and drop shadow effects. Set X=0 and Y=0 with blur and opacity for a glow. Set Y > 0 for a drop shadow.

ControlDescriptionDefault
X OffsetHorizontal shadow offset in pixels0
Y OffsetVertical shadow offset in pixels0
BlurShadow blur radius in pixels4px
SpreadShadow spread radius in pixels0
Opacity %Shadow opacity (0-100)16%
Shadow ColorShadow color#000000

8.5 Plan Settings

Each plan (column) has its own collapsible panel in the sidebar. The available settings depend on the design, but most include:

Basic

  • Plan Name — the heading of the column (e.g., "Starter", "Professional")
  • Plan Label — subtitle below the name (e.g., "For getting started")
  • Monthly Price — price shown when billing is set to monthly (no $ sign needed)
  • Yearly Price — price shown when billing is set to yearly
  • Monthly Suffix — text next to the monthly price (e.g., "per month")
  • Yearly Suffix — text next to the yearly price (e.g., "per year", "lifetime")

Button ("Get Started")

  • Text — button label
  • URL — link destination
  • Open in new tab — toggle
  • Nofollow — toggle (adds rel="nofollow")
  • Width, Height, Radius — button dimensions in pixels
  • Font Size — button text size
  • Background Color, Hover Color, Text Color — button styling

CTA ("More details") — Design 1 only

  • Text — CTA label
  • URL, Open in new tab, Nofollow — link controls
  • Height — CTA bar height in pixels
  • Font Size — CTA text size
  • Background Color, Text Color — CTA styling

"Most Popular" Badge

  • Mark as Most Popular — toggle to show the badge
  • Badge Text — customizable text (e.g., "Most Popular", "Best Value", "Recommended")
  • Badge Background — badge background color
  • Badge Text Color — text color inside the badge

Card Colors

  • Card Background — background color of the plan card
  • Card Border — border color (Designs 2, 4, 5, 7)
  • Top Shape Color — color of the decorative bar above the card (Design 1)

Typography & Colors

Each plan has independent controls for: name size, name color, label size, label color, price size, price color, "per" text size, "per" text color, feature size, feature text color, and default feature icon color.

Black Friday Promo — Design 3 only

  • Show Promo Section — toggle
  • Promo Text — editable (e.g., "BIG CHOICE & CRAZY DISCOUNTS")
  • Badge Text — circular badge text (e.g., "BIG SALE")
  • Badge BG — badge background color
  • Percent Text — large percentage text (e.g., "75%")
  • Percent Color — color of the percentage text

Design 8 extras

  • Features Column 2 — a second feature list editor for wider cards
  • Button Icon — select an icon from the built-in library to display next to the button text
  • Icon Color — color of the button icon
  • Name Pill BG — background of the pill-shaped name badge
  • Divider Color — color of the horizontal line between price and features

8.6 Features Editor

Each plan has a features list editor in its sidebar panel. Each feature row has:

  • Text input — the feature description
  • Icon selector — dropdown with 15 built-in icons: check, circle-check, cross, circle-cross, star, heart, dot, arrow-right, chevron-right, plus, bolt, shield, crown, gift, rocket
  • Icon color picker — individual color per feature
  • Delete button (×) — removes the feature
  • Up/Down arrows — reorder features
  • + Add Feature — adds a new feature row at the bottom

All features in a plan share a default icon color set in the plan's "Default Icon Color" control. Individual feature icon colors override this default when set.

9. Responsive Behavior

Desktop (901px and wider)

Mobile (900px and smaller)

The responsive breakpoint is automatic. No configuration is needed. The table inherits your theme's font family.

10. Uninstallation

Deactivate License First

  1. Go to Pricing Table → License.
  2. Click Deactivate License.

Remove the Plugin

  1. Go to Plugins in WordPress admin.
  2. Click Deactivate under SERPsKit Pricing Table.
  3. Click Delete.

What is removed: Plugin files are deleted. License data stored in the database (spt_license_data) remains until manually removed.

What happens to existing content: Posts and pages containing pricing table blocks will show "This block is no longer available" in the editor. The block data remains in the post content and restores if you reinstall the plugin.

11. Terms of Usage

12. Support

Getting Help

  1. Check this documentation first.
  2. Check the FAQ section below.
  3. Contact support through the marketplace where you purchased the plugin.

When Contacting Support

Please include: your WordPress version, PHP version, active theme name, a description of the issue with steps to reproduce, and a screenshot if applicable.

Response Time

Support is typically provided within 24-48 business hours. Support does not cover plugin modifications, third-party theme or plugin conflicts outside our control, or custom CSS requests.

13. FAQ

Q: Can I use multiple pricing table blocks on the same page?

Yes. Each block instance is independent. You can have different designs on the same page, each with their own settings.

Q: Can I change the number of columns?

Design 7 lets you choose 2, 3, or 4 columns from the sidebar. All other designs have a fixed column count (3 for Designs 1-6, 2 for Design 8).

Q: Does the billing toggle actually calculate discounted prices?

No. The toggle switches between two sets of prices that you enter manually. The "50% OFF" badge is a display label only. You control the actual monthly and yearly prices independently per plan.

Q: How does the quantity slider (Design 4) work?

You define slider stops in the sidebar (e.g., 5, 10, 25, 50). For each stop, you enter comma-separated prices for each plan. When the visitor drags the slider, prices update to match the nearest stop. The slider snaps to defined stops.

Q: Can I add my own Black Friday image (Design 3)?

The current version uses a bundled image. To replace it, swap the file at assets/images/black-friday.webp inside the plugin folder with your own image using the same filename.

Q: Does the plugin work with the Classic Editor?

No. SERPsKit Pricing Table is a Gutenberg block and requires the block editor.

Q: Can I move my license to a different site?

Yes. Deactivate the license on the current site first, then activate on the new site.

Q: Does the plugin slow down my site?

No. CSS and JavaScript load only on pages that contain the pricing table block. The frontend JavaScript file is 123 lines and handles the billing toggle, license size selector, and quantity slider. No external libraries are loaded.

Q: Why do the feature icons not show on the frontend?

If icons show in the editor but not on the published page, your site has a page cache serving old HTML. Purge your cache plugin (WP Fastest Cache, WP Rocket, LiteSpeed Cache, etc.) and re-save the post. The plugin uses CSS background-image data URIs which are compatible with all WordPress security filters.

Q: Can I add more than 3 plans to Design 1?

No. All designs have a fixed number of plans. Designs 1-6 have 3 plans, Design 7 has 4 plans, and Design 8 has 2 plans. The number of plans cannot be changed per design.

14. Changelog

1.1.2

1.1.1

1.1.0

1.0.2

1.0.1

1.0.0 — Initial Release