🛒How to create WooCommerce Product Slider

Learn how you can create a WooCommerce product slider using block slider query.

In this guide i'm going to demonstrate how you you can create a product slider with WooCommerce and block slider.

Setting up WooCommerce

This guide is going to assume that you have WooCommerce products setup and ready to create a product slider.

Block Slider WooCommerce Support

Block slider provides WooCommerce Query support out-of-the-box so you can filter the products based on the stock status or sale status.

You can also insert woo commerce blocks directly in the query slider and it'll inherit the current product automatically.

Setting up a Product Slider

Simply navigate and create a query slider if you haven't already (read the article below to learn how to use a query slider).

Step 1: Selecting the post type

Now, Let's set the query post type to "product" created by woocommerce.

Step 2: Inserting the blocks

You can now insert woo commerce blocks directly inside the slide to inherit and display the current product details.

Step 3 (Optional): Modify/Tweak WooCommerce Query

When you select the post type "product", Block slider displays an additional panel specifically for WooCommerce providing you more flexibillity to modify/tweak woo commerce related queries.

Let me go through what each control does in the WooCommerce query control

1. Show Sale Product: When this is toggled on, block slider will only query the products that are on sale (means the product that has a certain discount).

2. Stock Status: You can filter the products based on their stock status using this control.

Wrapping Up

Creating a product slider is really easy with block slider. You can further customise the product query if you have a more complex query need with the following filter.