How to set up and style the Woo Product List widget in Elementor.
Woo Product List shows products as a compact list with a small thumbnail, title, rating, price and a small add to cart button. Ranking numbers turn it into a top 5 or best seller list. Use it in sidebars, footers and other narrow spaces where a full product grid is too large.
Part of: Bright Addons Pro. Before you start: WooCommerce must be installed and active, with at least one published product.
| Option | What it does |
|---|---|
| Show | Picks the product set: Latest Products, Featured Products, On Sale, Best Selling, Top Rated, Manual Selection, Related to the Current Product or Upsells of the Current Product. |
| Products | Hand-picked products for Manual Selection, shown in the order you pick them. More Product IDs adds older ones. |
| Only From Categories | Limits the list to chosen categories. Leave Out Categories and Only With Tags narrow it further. |
| Number of Products | How many products are listed, from 1 to 100. |
| Order By | Sorts Latest, Featured and On Sale lists by Newest, Name, Price, Sales, Rating, Shop Order or Random. |
| Hide Out of Stock Products | Leaves out products that are out of stock. |
| Option | What it does |
|---|---|
| Columns | Number of columns per device, from 1 to 4. |
| Ranking Numbers | Puts 1, 2, 3 and so on in front of each product. |
| Image | Shows or hides the product thumbnail. |
| Image Position | Places the thumbnail Left or Right. |
| Category | Shows the first category of the product as a link. |
| Title Tag | HTML tag used for the product title. |
| Star Rating | Shows the average rating as stars. |
| Show Stars Without Reviews | Shows empty stars for products that have no reviews yet. |
| Number of Reviews | Adds the review count after the stars. |
| Price | Shows the WooCommerce price. |
| Lines Between Products | Draws a divider line between the products. |
| Open Products in a New Tab | Opens product links in a new browser tab. |
| Option | What it does |
|---|---|
| Add to Cart Button | Shows or hides the button. |
| Button Shows | Icon and Text, Text Only or Icon Only. |
| Add to Cart Text | Your own button wording. Leave empty for the WooCommerce wording. |
| Text for Products With Options | Wording for variable and grouped products, which link to the product page. |
| Add Without Reloading the Page | Adds the product in the background. |
| After Adding | The button becomes a View cart link or goes back to Add to cart. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
Space Between Products, Column Gap, Space Between Image and Text, Vertical Alignment, row background, border and shadow, Line Color and Line Thickness.
Size, Border Radius and Background Behind the Image.
typography, Color, Background, Box Size and Border Radius.
Space Between Lines, plus typography and colors for the category and title.
star size and colors, review count color, price typography and color, old price color and size.
Icon Button Size, typography, icon size, colors, background, border, border radius and padding for normal and hover.
Yes. Set Show to Best Selling, set Number of Products to 5 and switch on Ranking Numbers.
Yes. Switch off Add to Cart Button in the Add to Cart Button section.
Products without reviews show no stars unless Show Stars Without Reviews is switched on. Reviews must also be enabled in WooCommerce.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide