Product Slider BlockFree downloadMenuHow to make WooCommerce related products into a carousel
Related products are a plain grid by default. Before you change how they look, it helps to know how they are picked, because a carousel of the wrong products is still the wrong products.
Related products as a carousel. Drag it. Sample products.
How WooCommerce chooses related products
It looks for products sharing a category or a tag with the current one, in random order. There is no admin screen for it, and the only way to steer it is your categories and tags. If related products are not showing, it is usually because the product is alone in its category, or because a transient cache has an old result. The number shown is set in code, using the woocommerce_output_related_products_args filter:
add_filter( 'woocommerce_output_related_products_args', function ( $args ) {
$args['posts_per_page'] = 8;
$args['columns'] = 4;
return $args;
} );Related, upsell and cross-sell are different
Related products are automatic. Upsells are alternatives you pick by hand on the product, under Linked Products, and they show on the product page. Cross-sells are also hand-picked, and appear in the cart. For a shop with a few dozen products, hand-picking usually beats the automatic list. The automatic list has no idea that filters go with coffee.
With a block theme: Product Collection
In the single product template, the Product Collection block has a Related Products collection, and it has a carousel layout since version 10.2. Open the template in the site editor, select the related products block, and change its layout. This is the no-plugin answer, if your theme is a block theme.
With a classic theme: plain CSS
You can make the existing list scroll sideways with CSS alone. Target the list inside .related.products, and give it display: flex, overflow-x: auto and scroll-snap-type. It is a five-minute change, and for many shops it is enough.
With a block plugin
Our Product Slider has Related, Upsells and Cross-sells as sources, and it reads the current product by itself. The pattern called Goes well with sets it up in one click. Place it in the product template in place of the default output. Free for rows. Other plugins do it too, and several replace the default output by themselves.