🛒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.

If you haven't setup WooCommerce yet. You can read the "Start with Woocommerce in 5 Steps".

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).

🔍How to use Query Slider

Step 1: Selecting the post type

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

selecting the post type

Step 2: Inserting the blocks

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

inserting woo blocks

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.

woo query controls

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.

1️⃣blockslider_query_args