Product Cards

Page Manager addon WHMCS

Order now | Download | FAQ

The Product Cards widget displays WHMCS products with their pricing and descriptions in a card layout. Products can be loaded automatically from a WHMCS product group or added manually. Each card supports hot/new/sale badge overlays and an Order Now button. Ten visual styles are available.

---

Admin View

product-cards-01-admin.png

---

Frontend Styles

product-cards-02-style-default.png

product-cards-03-style-bold.png

product-cards-04-style-border.png

product-cards-05-style-glass.png

product-cards-06-style-list.png

product-cards-07-style-line.png

product-cards-08-style-tile.png

product-cards-09-style-split.png

product-cards-10-style-minimal.png

product-cards-11-style-wave.png

product-cards-12-style-wave-alt.png

---

Settings

Layout

Setting	Description
width	Widget container width (e.g. 100%, 1200px)
margin-top	Top margin of the widget block
margin-bottom	Bottom margin of the widget block
Style	Visual style template (puq, puq-bold, puq-border, puq-glass, puq-line, puq-list, puq-minimal, puq-split, puq-tile, puq-wave)
Card width	Fixed width for each product card (e.g. 300px)

Colors

Setting	Description
Product name (color_1)	Color of the product name text
Group name (color_2)	Color of the product group name text
Price (color_3)	Color of the price value
Billing cycle (color_4)	Color of the billing cycle label
Description (color_5)	Color of the product description text
Card background (color_6)	Background color of each product card
Card border (color_7)	Border color of each product card

Background

Setting	Description
Background image	URL of the background image for the widget container
Background color	Background color of the widget container
Disable Shadow	Remove the drop shadow from the widget container
Disable Radius top	Remove top corner rounding
Disable Radius bottom	Remove bottom corner rounding
Disable Background	Remove the background panel entirely
Full width	Stretch the widget to the full page width

Header

Setting	Description
Header text	Main heading text above the product cards (e.g. Our products)
Header text color	Color of the heading text
Header description	Subheading or description text below the main heading
Header description color	Color of the description text
Disable header	Hide the header section
Header background image	URL of a background image for the header area
Header background color	Background color of the header area
Fix header background	Fix the header background image during scroll (parallax)
Darken header background	Apply a darkening overlay on the header background

Badges

Setting	Description
Hot label	Text for the "Hot" badge (e.g. Hot)
Hot color	Background color of the Hot badge
Hot text color	Text color of the Hot badge
New label	Text for the "New" badge (e.g. New)
New color	Background color of the New badge
New text color	Text color of the New badge
Sale label	Text for the "Sale" badge (e.g. Sale)
Sale color	Background color of the Sale badge
Sale text color	Text color of the Sale badge

Order Now Button

Setting	Description
Order Now button name	Label for the order button (e.g. Order Now)
Button color	Background color of the order button
Text color	Text color of the order button

Product Source

Setting	Description
Show products from group	Automatically load all products from a WHMCS product group
Show price	Which price to display: First price, Best price, Monthly price, Semi annual price, Annual price, Biennially price, or Triennially price
Show behind the list	Append the auto-loaded group products after the manually listed products

Manual Products

Use the + button to add individual products manually. Each product row allows you to select a product by name/image and configure its display options. Items can be reordered with the up/down arrows and removed with the delete button.