Product Cards Feature Showcase
Plugin Usage Guide
How to Use the Product Cards Plugin
Follow this three-step workflow to configure product cards, assemble comparison groups, and embed them anywhere on your WordPress site.
Create a Product Card
- Navigate to Product Cards → Add New Card.
- Specify Card Title, Header Title/Subtitle, and brand colors.
- Choose Image Source (None, Media Library, or External URL).
- List features in Body Features (one bullet per line).
- Set Pricing: Main price, subtext, and optional installment breakdown.
- Configure CTA button: label, URL, target window, shape, and colors.
- Adjust aesthetics: corner radius (0px, 8px, 16px), shadow, and borders.
- Use the live split preview and click
?on any field for tooltips. - Publish to generate your shortcode:
[product_card id="X"].
Create a Card Group
- Navigate to Product Cards → Card Groups → Add New Group.
- Enter a Group Title (e.g. Pricing Table or Feature Stack).
- Check off cards to include from your published catalog.
- Select Layout Mode:
- Grid: Multi-column comparison grid (1 to 4 columns). Recommended for vertical cards.
- Stack: Single-column vertical stack. Recommended for wide horizontal cards.
- Set Card Spacing: Default (24px), Small (12px), or Large (36px).
- Inspect the responsive arrangement in the Live Split Preview.
- Publish to generate group shortcode:
[product_card_group id="Y"].
Embed Anywhere
Paste shortcodes directly into the Gutenberg Shortcode block, Classic Editor, or Page Builders:
1. Vertical Layout (Exact Reference Design)
Exact replication of the reference specification: Dark Teal header, Slate Teal feature list with 8 items, Dark Teal pricing block, and Olive-green call-to-action button.
Select
- Anywhere Access to Cloud Workspace
- Work your way, on your schedule
- 15 Modular Integrated Toolkits
- 51 Pre-built Automation Templates
- Interactive Strategy Playbooks
- Official Certificate & Compliance Documentation
- Automatic Metric Tracking & Reporting
- 42 Part Audio & Video Masterclass Series
2. Horizontal Layout (Media & Details Row)
Side-by-side media, key feature highlights, and action tier. Stacks responsively into a single vertical column on smaller mobile viewports.
Professional Pro Suite
3. Grouped / Stacked Pricing Comparison Grid
A 3-tier comparative pricing table rendered via saved group shortcode [product_card_group id="17732"].
Basic Course
- Online Workspace Portal
- Standard Modular Lesson Plans
- Official Completion Certificate
Select (Popular)
- Online Workspace Portal
- 15 Modular Video Series
- 51 Interactive Clips
- Expert Audio Series
- Official Certificate Included
Premium Course
- Online Workspace Portal
- 15 Modular Video Series
- 51 Interactive Clips
- 1-on-1 Specialist Session
- Lifetime Archive Access
- Express Delivery & Verification
4. Horizontal Stack / Group (Media & Details Rows)
A stacked collection of wide horizontal product cards embedded via saved group shortcode [product_card_group id="17733"] with layout="stack". Stacks each card vertically while preserving side-by-side media and feature tiers.
Professional Pro Suite
- Anywhere Access to Cloud Workspace
- 15 Modular Integrated Toolkits
- Official Verification & Export Tools
- Automatic Telemetry & Records
Enterprise Team Workspace
- Unlimited Workspace Team Members
- Advanced Role-Based Access Control
- Automated Security & Audit Logs
- Dedicated Priority Specialist Support
5. Aesthetic Variations (Corner Shapes & Color Schemes)
Comparing sharp 0px corners, bold dark styling, and sharp buttons against 16px soft pill curves and warm vibrant palettes.
Sharp & Modern
- Geometric 0px sharp edges
- Dark monochrome palette
- High-contrast borders
Pill & Soft
- Rounded 16px capsule styling
- Soft ambient shadow
- Vibrant warm palette
6. Ad-Hoc Inline Grouping (No Group Post Required)
Embed any combination of existing cards on the fly using [product_cards_group ids="17727,17728" columns="2" layout="grid" gap="large"] without needing to pre-configure a saved group post.
Basic Course
- Online Workspace Portal
- Standard Modular Lesson Plans
- Official Completion Certificate
Select (Popular)
- Online Workspace Portal
- 15 Modular Video Series
- 51 Interactive Clips
- Expert Audio Series
- Official Certificate Included
7. Shortcode Attributes & Quick Reference
Summary of all supported shortcodes and parameters:
| Shortcode | Parameter | Values | Description |
|---|---|---|---|
[product_card] |
id, slug |
Integer or slug (e.g. 17724) |
Post ID or slug of a single published Product Card. |
[product_card_group] |
id, slug |
Integer or slug (e.g. 17732) |
Post ID or slug of a saved Card Group. |
[product_cards_group] |
ids |
Comma-separated IDs | List of card IDs to display (required). |
layout |
grid (default), stack |
Multi-column grid or single-column stack. | |
columns |
1, 2, 3 (default), 4 |
Grid column count (applies when layout=grid). | |
gap |
default (24px), small (12px), large (36px) |
Spacing between grouped cards. |