The Pricing Table Block is a comprehensive and highly customizable component designed to help you create professional pricing comparison tables for your WordPress site. This block offers multiple layout styles, extensive customization options, and interactive features to showcase your pricing plans effectively and drive conversions.
Key Features
The Pricing Table Block includes a complete set of features to meet all your pricing display needs:
Multiple Layout Styles: Choose from Style 1, Style 2, Style 3, Style 4, and Minimal layouts, each with distinct visual characteristics
Flexible Table Management: Add, remove, duplicate, and reorder pricing tables with intuitive controls
Interactive Features: Highlight special plans, add promotional ribbons, and include clickable buttons with custom links
Icon Integration: Add FontAwesome icons to each pricing table with color customization options
Dynamic Feature Lists: Create unlimited features for each plan with enable/disable toggles and visual indicators
Comprehensive Styling: Independent typography controls for titles, prices, descriptions, features, and buttons
Ribbon System: Multiple ribbon styles (Corner, Banner, Side, Flag) to highlight featured plans
Responsive Design: Device-specific controls for optimal display across all screen sizes
Animation Effects: Choose from various entrance animations to enhance user engagement
Advanced Customization: Border controls, box shadows, spacing options, and visibility settings
Adding the Pricing Table Block
To add a Pricing Table Block to your page:
- Click the “+” icon to open the block inserter
- Search for “Pricing Table” or navigate to the “DigiBlocks” category
- Click on the “Pricing Table” block to add it to your page
- The block will appear with two default pricing tables that you can customize
Layout Configuration
Columns Setting
Control how many pricing tables display side by side using the Columns setting:
- Range: 1 to 4 columns
- Responsive Behavior: Tables automatically stack on smaller screens for optimal mobile viewing
- Default: 2 columns for balanced comparison display
Table Styles
Choose from five predefined layout styles, each offering a unique visual approach:
Style 1 (Default)
- Clean design with subtle borders and organized sections
- Header, features, and footer clearly separated with border lines
- Balanced padding and centered text alignment
- Ideal for professional service offerings
Style 2 (Header Emphasis)
- Prominent colored header section with white text
- Larger padding for spacious feel
- Box shadow for depth and elevation
- Highlighted tables scale slightly for emphasis
- Perfect for SaaS products and subscription services
Style 3 (Bold Borders)
- Strong colored borders for visual impact
- Highlighted tables feature extra-thick top borders
- Clean separation between sections
- Suitable for product comparisons requiring clear differentiation
Style 4 (Modern Rounded)
- Contemporary design with rounded corners
- Larger price text for emphasis
- Rounded button design
- Sophisticated appearance ideal for premium offerings
Style 5 (Minimal)
- Clean, border-free design with subtle separators
- Transparent backgrounds for content focus
- Outlined buttons for understated call-to-action
- Perfect for simple pricing structures
Alignment Options
Set text alignment for all pricing table content:
- Left: Left-aligned content for detailed feature lists
- Center: Centered content for balanced, traditional pricing displays
- Right: Right-aligned content for specific design requirements
Table Management
Adding New Tables
Click the “Add Pricing Table” button to create additional pricing options. Each new table includes:
- Default template content that you can customize
- All styling options applied consistently
- Automatic positioning in the grid layout
Individual Table Controls
Each pricing table includes hover controls for easy management:
Move Left/Right: Reorder tables by moving them left or right in the sequence. This affects the visual order of your pricing options.
Duplicate: Create an exact copy of an existing table to save time when creating similar plans with minor variations.
Remove: Delete unwanted tables with a single click. Note that you cannot remove the last remaining table.
Content Editing
Title Section Click on the title text to edit inline. Use descriptive names like “Basic Plan,” “Professional,” or “Enterprise” to clearly identify each pricing tier.
Price and Period
- Price: Enter the cost using any currency format ($19, €29, £15, etc.)
- Period: Add billing frequency (/month, /year, one-time, etc.)
- Both elements support rich text formatting for emphasis
Description Add a brief description or tagline for each plan. Keep descriptions concise but compelling (e.g., “Perfect for small teams,” “Everything you need to grow”).
Icon Integration Add visual appeal with FontAwesome icons:
- Click the icon selector in the Table Settings panel
- Browse or search through available icons
- Customize icon colors for normal and hover states
- Icons automatically scale appropriately for the design
Feature Management
Adding Features
Each pricing table includes a feature list to highlight what’s included:
- Click “Add Feature” below the existing feature list
- Enter descriptive feature text
- Use the toggle controls to enable or disable features
- Remove unwanted features using the trash icon
Feature States
Enabled Features
- Display with green checkmark icons
- Full text visibility and normal styling
- Indicate included benefits clearly
Disabled Features
- Display with red cross icons
- Crossed-out text styling and reduced opacity
- Show limitations or unavailable features
Feature List Best Practices
- Keep feature descriptions short and specific
- Use parallel language structure for consistency
- Order features from most to least important
- Include both included and excluded features for transparency
Ribbon Configuration
Enabling Ribbons
Ribbons help highlight featured or popular pricing plans:
- Toggle “Show Ribbon” in the Ribbon panel
- Mark specific tables as “Highlighted” in Table Settings
- Only highlighted tables will display ribbons
Ribbon Styles
Corner Ribbon
- Positions in the top corner of the pricing table
- Compact design that doesn’t obstruct content
- Available in left or right corner positions
Banner Ribbon
- Diagonal banner style across the corner
- More prominent visual impact
- Rotated text creates dynamic appearance
Side Ribbon
- Attaches to the left or right side of the table
- Vertical text orientation
- Subtle but noticeable highlighting
Flag Ribbon
- Rounded flag design positioned in the corner
- Modern, professional appearance
- Clearly readable without content obstruction
Ribbon Positioning
Choose Left or Right positioning for all ribbon styles to match your design preferences and layout requirements.
Advanced Styling Options
Typography Controls
Independent typography settings allow complete design control:
Title Typography
- Controls the main plan name/title
- Default: 24px desktop, responsive scaling
- Recommended: Keep titles concise for best visual impact
Price Typography
- Controls the main price display
- Default: 36px desktop with bold weight
- Larger sizing emphasizes pricing prominently
Description Typography
- Controls subtitle/tagline text below titles
- Default: 16px with balanced line height
- Maintains readability while supporting branding
Features Typography
- Controls the feature list text
- Default: 16px with comfortable line spacing
- Ensures feature readability across all devices
Button Typography
- Controls call-to-action button text
- Default: 16px with appropriate line height
- Balances readability with button proportions
Color Customization
Table Colors
- Background Color: Main table background
- Header Background: Separate header section background
- Text Color: All text within the table
Button Colors
- Background Color: Normal button background
- Text Color: Button text color
- Hover Background: Background color on mouse hover
- Hover Text: Text color on mouse hover
Ribbon Colors
- Background Color: Ribbon background
- Text Color: Ribbon text color
Border and Shadow Options
Border Controls
- Style: Choose from solid, dotted, dashed, double, and specialty styles
- Width: Responsive border width controls for all sides
- Color: Custom border coloring with alpha transparency
- Radius: Rounded corners with responsive controls
Box Shadow
- Normal Shadow: Default shadow for depth and elevation
- Hover Shadow: Interactive shadow changes on mouse hover
- Both shadows include position, offset, blur, spread, and color controls
Button Styling
Shape and Size
- Border Radius: Control button corner rounding (0-50px range)
- Padding: Responsive padding controls for optimal button proportions
- Border Style: Optional button borders with width and color controls
Button Links Configure clickable button functionality:
- Use the Link Control in Table Settings
- Enter destination URLs for each button
- Choose to open links in new tabs
- Add rel attributes for SEO and security
Responsive Design Features
Device-Specific Controls
All major styling options include responsive settings:
Typography: Set different font sizes and line heights for desktop, tablet, and mobile devices
Spacing: Adjust padding and margins per device for optimal layout
Border Width: Fine-tune border thickness across screen sizes
Border Radius: Adapt corner rounding for different devices
Automatic Responsive Behavior
- Tables automatically stack on smaller screens when columns exceed screen space
- Highlighted table scaling disables on tablets and mobile for better usability
- Text remains readable with responsive typography scaling
Visibility Controls
Control block visibility on different devices:
- Hide on Desktop: Hide tables on screens 992px and wider
- Hide on Tablet: Hide tables on screens 768px to 991px
- Hide on Mobile: Hide tables on screens 767px and below
Editor Note: Hidden elements appear with reduced opacity in the editor for easy editing while being completely hidden on the frontend.
Animation and Interactive Features
Entrance Animations
Add visual interest with entrance animations:
Available Effects:
- Fade animations (fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight)
- Slide animations (slideInUp, slideInDown, slideInLeft, slideInRight)
- Zoom animations (zoomIn, zoomInUp, zoomInDown)
- Bounce animations (bounceIn, bounceInUp, bounceInDown)
- Rotation animations (rotateIn, rotateInDownLeft, rotateInDownRight)
Animation Preview: Use the preview button in the editor to test animations before publishing.
Interactive States
Hover Effects
- Tables can include hover shadows for interactive feedback
- Button hover states change colors smoothly
- Icon hover colors provide additional interactivity
Best Practices
Content Strategy
Pricing Structure
- Order plans from least to most expensive (left to right)
- Highlight your most popular or recommended plan
- Use consistent feature naming across all plans
Feature Presentation
- Lead with the most important benefits
- Group similar features together
- Use action-oriented language (“Get,” “Access,” “Receive”)
Call-to-Action Optimization
- Use action verbs in button text (“Get Started,” “Choose Plan,” “Upgrade Now”)
- Ensure button links work correctly
- Test buttons on all devices
Design Considerations
Visual Hierarchy
- Use typography sizing to emphasize important elements
- Maintain consistent spacing throughout all tables
- Choose colors that align with your brand guidelines
Accessibility
- Ensure sufficient color contrast for text readability
- Test keyboard navigation through all interactive elements
- Provide descriptive link text for screen readers
Performance
- Limit animation use to avoid overwhelming users
- Test loading speed with multiple pricing tables
- Optimize any custom images used in content
SEO and Conversion Optimization
Content Structure
- Use descriptive headings for better search indexing
- Include relevant keywords in plan names and descriptions
- Structure pricing information clearly for schema markup potential
User Experience
- Make pricing transparent with no hidden costs
- Provide clear feature comparisons
- Include contact information for enterprise inquiries
Mobile Optimization
- Test all table layouts on mobile devices
- Ensure buttons are easily tappable
- Verify text remains readable at all screen sizes
Troubleshooting Common Issues
Layout Problems
Tables Not Aligning Properly
- Check column settings and responsive behavior
- Verify content length consistency across tables
- Test on different screen sizes
Text Overlapping or Cut Off
- Adjust typography sizing for smaller screens
- Check padding and margin settings
- Reduce content length if necessary
Interactive Issues
Buttons Not Working
- Verify link URLs are correctly formatted
- Check for JavaScript conflicts with other plugins
- Test in different browsers
Animations Not Playing
- Ensure animation is set to something other than “none”
- Check for theme conflicts that might disable animations
- Verify browser supports CSS animations
The Pricing Table Block provides a comprehensive solution for creating professional, conversion-optimized pricing displays that enhance user experience while maintaining complete design flexibility and performance optimization.