Appearance
How every recommendation list and product card looks. Leave a color empty to use your theme's.
- A product card from the list: image, product name and price
- The wishlist button under the card when Siteryn Wishlist is active
The tab has four sub-tabs: Card Content, Image, Text & Colors and Heading & Spacing.
- Card Content, Image, Text & Colors and Heading & Spacing sub-tabs
- Card Content card: "What each product card shows."
- Show toggles and Card Text Alignment buttons
Card Content
The Card Content card: what each product card shows.
| Setting | Default | Notes |
|---|---|---|
| Show Price | On | |
| Show Star Rating | Off | Only shown for products that have at least one rating |
| Show Category | Off | The product's first category, above its name |
| Show Sale Badge | Off | A small badge on the image of products on sale: the discount (e.g. -20%) or "Sale" |
| Show Add to Cart Icon | On | A bag icon over the product image. Simple products are added without leaving the page when WooCommerce's Enable AJAX add to cart buttons on archives is on |
| Show View Product Icon | On | An eye icon over the product image that opens the product page |
| Show Quick View Button | On | Shown when Siteryn Quick View is active, styled by its own settings |
| Card Text Alignment | Left | Left, Center, Right |
Icons appear on hover or keyboard focus, and are always visible on touch screens.
Image
The Product Image card: shape and hover effects of the product photo.
| Setting | Default | Options |
|---|---|---|
| Image Shape | Tall portrait (5:7) | Tall portrait (5:7), Portrait (3:4), Slightly tall (4:5), Square (1:1), Original photo shape |
| Image Fit | Fill | Fill (crop to fill the shape) or Fit (show the whole photo). Hidden when the shape is Original photo shape |
| Show Second Photo on Hover | On | Crossfades to the product's first gallery photo |
| Zoom on Hover | On | |
| Image Background | Empty | Behind photos with transparent or white backgrounds; empty uses your theme's |
| Corner Radius (px) | 0 | 0–32 |
Text & Colors
Two cards. Text & Colors:
| Setting | Default | Options |
|---|---|---|
| Product Name Size (px) | 16 | 12–28 |
| Product Name Lines | Full name | 1 line, 2 lines, Full name. Longer names end with "…", so cards in a row line up |
| Product Name Color | Empty (theme's) | |
| Price Size (px) | 15 | 12–28 |
| Price Color | Empty (theme's) | |
| Sale Price Color | #db1215 |
Icon Buttons: the bag and eye buttons on the product image, on hover.
| Setting | Default |
|---|---|
| Hover Background | #000000 |
| Hover Icon Color | #ffffff. Keep enough contrast with the hover background |
Heading & Spacing
Two cards. List Heading styles the title above each list; Spacing sets the space between and above cards.
| Setting | Default | Range |
|---|---|---|
| Heading Size (px) | 28 (on desktop; it scales down on phones) | 16–48 |
| Heading Color | Empty (theme's) | |
| Space Between Cards (px) | 30 (16 on phones) | 0–60 |
| Space Above the List (px) | 96 (at most 64 on tablets and phones) | 0–160 |
Each list sets its own heading alignment on the Placements tab. The look can also be changed with a template override.