Marketing · Gutenberg
Product Card block for WordPress
Showcase any product with image, name, price, star rating, features list, badges, and buy button — no WooCommerce required.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Showcase any product with image, name, price, star rating, features list, badges, and buy button — no WooCommerce required.
Inspector panels on this block: Product Info, Badge & Rating, Features List, Buttons, Image, Card Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Vertical, Horizontal.
Product Card has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Marketing → search “Product Card” (block name `blockenberg/product-card` in block.json). Style it in the sidebar after insert.
How to use Product Card block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Product Card”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Product Info. Set “Product Name”, “Description”, “Price”, “Original Price (crossed out)”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Product Name | Text field in the inspector. block.json default: Premium Wireless Headphones. Saved as `productName`. |
| Description | Multiline text field in the inspector. block.json default: Crystal-clear audio with active noise cancellation, 30-hour battery life, and premium comfort cushions.. Saved as `description`. |
| Price | Text field in the inspector. block.json default: $149.99. Saved as `price`. |
| Original Price (crossed out) | Text field in the inspector. block.json default: $199.99. Saved as `originalPrice`. |
| Show Original Price | On/off toggle in the inspector. On by default. Saved as `showOriginal`. |
| Show Badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Badge Text | Text field in the inspector. block.json default: Best Seller. Saved as `badge`. |
| Show Rating | On/off toggle in the inspector. On by default. Saved as `showRating`. |
| Stars (1-5) | Numeric range control in the inspector. Range 1–5. block.json default: 4. Saved as `rating`. |
| Review Count | Text field in the inspector. block.json default: 128. Saved as `ratingCount`. |
| Show Features | On/off toggle in the inspector. On by default. Saved as `showFeatures`. |
| Features (one per line) | Multiline text field in the inspector. block.json default: Active Noise Cancellation 30-hour battery Bluetooth 5.3 Foldable design Carrying case included. Saved as `features`. |
| Primary Button Label | Text field in the inspector. block.json default: Buy Now. Saved as `btnLabel`. |
| Primary Button URL | Text field in the inspector. block.json default: #. Saved as `btnUrl`. |
| Second Button | On/off toggle in the inspector. Off by default. Saved as `showSecondBtn`. |
| Second Button Label | Text field in the inspector. block.json default: View Details. Saved as `secondBtnLabel`. |
| Second Button URL | Text field in the inspector. block.json default: #. Saved as `secondBtnUrl`. |
| Button Radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 10. Saved as `btnRadius`. |
| Image Height (px) | Numeric range control in the inspector. Range 100–600. block.json default: 260. Saved as `imgHeight`. |
| Layout | Select control; the chosen value is saved on the block. Options: Vertical; Horizontal. block.json default: vertical. Saved as `layoutStyle`. |
| Card Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `cardRadius`. |
| Card Shadow | On/off toggle in the inspector. On by default. Saved as `cardShadow`. |
| Product Name (Name Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `nameTypo`. |
| Price (Price Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `priceTypo`. |
| Description (Desc Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `descTypo`. |
| Features | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `featureTypo`. |
| Buttons | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `btnTypo`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `cardBorder`. |
| Image Area BG | Color control in the inspector. block.json default: #f9fafb. Saved as `imgBg`. |
| Product Name | Color control in the inspector. block.json default: #1f2937. Saved as `nameColor`. |
| Price | Color control in the inspector. block.json default: #6c3fb5. Saved as `priceColor`. |
| Original Price | Color control in the inspector. block.json default: #9ca3af. Saved as `originalPriceColor`. |
| Description | Color control in the inspector. block.json default: #6b7280. Saved as `descColor`. |
| Feature Text | Color control in the inspector. block.json default: #374151. Saved as `featureColor`. |
| Button BG | Color control in the inspector. block.json default: #6c3fb5. Saved as `btnBg`. |
| Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
| Badge BG | Color control in the inspector. block.json default: #f59e0b. Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #ffffff. Saved as `badgeColor`. |
When this is the right block
- Showcase any product with image, name, price, star rating, features list, badges, and buy button — no WooCommerce required — that is the job of Product Card, not a generic content block.
- Use it when you need the editor control labeled “Product Name”, which exists on this block’s inspector.
- It matches pages about product, shop, ecommerce.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Product Card block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Product Card”. It sits under Marketing. After insert, open Product Info and set “Product Name”, “Description”, “Price”, “Original Price (crossed out)”.
What makes Product Card different from other Blockenberg blocks?
Showcase any product with image, name, price, star rating, features list, badges, and buy button — no WooCommerce required. Inspector labels on this block include “Product Name”, “Description”, “Price”, “Original Price (crossed out)”.
Is the Product Card Gutenberg block free?
Yes. Product Card ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Product Card to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Product Info, Badge & Rating, Features List, Buttons).
Related marketing blocks
Offer Card
Special offer and deal card with urgency badge, original/sale price, includes list, CTA, and optional countdown timer.
Pricing Table
Pricing card with plan name, price, features list, and CTA button. Highlight popular plans with a badge.
Comparison Guide
A structured X vs Y comparison guide with criteria scoring, winner badges, and a verdict. Perfect for product, software, and strategy comparisons.
Feature Announcement
Announce new product features, improvements, or updates with version badge, highlights list, and CTA.
Price List
Display restaurant menus, service pricing, or product catalogues with category sections, images, badges and rich styling.
Product Spec Sheet
Structured product specification sheet with grouped categories, key-value rows, and rich styling options.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Product Card from the Gutenberg inserter.