The product grid
Put all your products on a page at once: a grid of cards, or a full-width list, each with its own Add to basket button. One shortcode, set up from the Design tab.
A Bang! Cart Pro feature. The free plugin carries the [bangcart_products] shortcode so it never shows as raw text on a page, but the grid itself is drawn by Pro. Needs free 3.8.0.
Putting it on a page
- On the Design tab, scroll to Product grid and switch Show a product grid on.
- Choose how it looks (below). The live preview shows your choices as you make them.
- Copy
[bangcart_products]and paste it onto any page or post. The grid renders where the shortcode sits.
Every product in your shop appears in the grid by default, in the same order as the Products tab. To keep one out, switch on Hide from the product grid on that product (Products tab) - it still sells everywhere else, it just does not appear in the grid.
Grid or list
Two layouts, chosen with the Layout switch:
| Layout | What it is |
|---|---|
| Grid | A wall of cards, one to four columns, image on top. On a phone it drops to one column on its own; on a tablet, two. |
| List | Full-width rows, one product per line. Pick Image left (thumbnail on the left, details beside it) or All inline (name, price and button on one slim line - a price list or menu). |
What each card shows
The product name is always shown. Everything else is a tick under Show on each card:
- Product image - the product photo. In grid layout you can crop it square or landscape. (Both Stripe-synced and local products can carry a photo; set a local product's photo on the Products tab.)
- Price - the same price the button charges, sale prices and variant ranges included.
- Short description - the product's description. Hidden in the inline list style, where there is no room for it.
- Stock line - "In stock", "Only 3 left" or your sold-out label, for products with a stock count. A product sold in variants has stock per variant, so it shows no single line.
- Add to basket button - the real button, so it wears your existing button styling and opens the basket like any other.
The button matches your shop automatically. Each card's Add to basket button is the same button the rest of your shop uses, so its colour, corner radius, font and label come straight from your Button settings on the Design tab. Change them once and the grid follows. Products sold in variants show their size and colour picker on the card, just as they do on a normal product page.
Card style
Bordered gives each card a border and a soft shadow; Flat drops them for a cleaner look that leans on your theme. Text alignment (grid only) sets left or centred. Card corners follow your button's corner radius, so round buttons get round cards.
One page different from the rest
The shortcode takes attributes that override the saved settings, just on the page they are on:
| Attribute | Does |
|---|---|
columns="2" | One to four columns, for this grid only. |
layout="list" | grid or list. |
image="no" | Hide the image here even if it is on in the settings. |
ids="jam,marmalade,curd" | Show exactly these products, in this order. Overrides the hide switch too, so you can feature a hand-picked set anywhere. |
For example, [bangcart_products layout="list" columns="1" ids="gift-box,hamper"] puts just those two products in a list on one page, whatever the Design-tab settings say.
Next
The grid uses the same buttons and prices as the rest of the shop, so the Design tab styles both at once, and product variants appear on grid cards with no extra setup.
Still stuck?
Write to me and it is me who answers, not a ticket queue. Tell me what you expected and what happened instead.
