How do I highlight products on a page?

What do you need?

• A webshop with WooCommerce and at least a few published products.
• A page with a section and a column. Don’t know how? First read adding a section and organizing in columns.

Step 1: Add the Highlight Products block

1. Open the page and click in the column where the products should go.
2. Click on the + and search for Highlight Products. You can also find it in the category Webshop blocks.
3. Click on the block. The settings will appear on the right, with two tabs: Settings and Product Pages.

Step 2: Choose which products to display

Under Sort Products by, choose what the block will show:

• Newest products first: always your most recently added products. Great for the homepage, as it fills itself.
• Products on sale in random order: only products with a promotional price, each time in a different order.
• Selected products in the list below in selected order: you choose the products under Products to highlight, and they appear in the order of your selection.
• Random order: a random selection from your products.

Leave your Products to highlight empty, and the block will automatically show the newest products.

With Meta filters, you can further narrow down the selection, for example, to products with a specific attribute. You create those filters first under General Options → Meta Filters (see setting the product filter).

Step 3: Set the number and the number per row

• Maximum number of products to display: how many products will appear at most. If you leave it empty, it will be 4.
• Products per row: 1, 2, 3, or 4 side by side. If you choose 4 per row and display 6 products, then 4 will be on the first row and 2 on the second.

Click on Save and view the page.

As a slider

If you have more products than can fit in one row, a slider is often more visually appealing. Turn Enable slider display on. A group of Slider settings will then appear, including the number of products per slide, autoplay, and arrows. You can also show a half card in a slider (for example, 2.5 per row), so visitors see that there are more. All slider options are in setting a slider.

On product pages: cross-sells and upsells

Do you use the block under your product pages, for example, in a builder under each product? Then the block can choose the right products itself. Go to the tab Product Pages and choose under Automatic selection of cross or upsells:

• None, manual selection for highlighting: the block works as described above.
• Cross-sells: the products you have set as cross-sells for that product (complementary products).
• Up-sells: the up-sells of that product (more expensive or better variants).

You set cross-sells and up-sells per product in WooCommerce: Product Data → Related Products.

Not working?

• You see “There are currently no products available.” The block cannot find any products that match. If you choose offers, check if there are products with a promotional price. If you are using a meta filter, remove it temporarily to test.
• You see different products than you chose. Is Sort Products by set to Selected products …? Only then does the block use your selection.
• Only 4 products are coming. Fill in Maximum number of products to display. Empty means 4.
• A product is missing. Check if the product is published and visible in the catalog.

Can’t figure it out? Contact us, call 06 35 66 47 73 or email info@lefcreative.nl.