Block Slider
HomeGet Now
  • 👋Block Slider
  • ⚙️Configuration
    • 1️⃣Keyboard Navigation
    • 2️⃣Mouse Drag
    • 3️⃣Speed
    • 4️⃣Slide Effect
    • 5️⃣Slide Per View
    • 6️⃣Space Between
    • 7️⃣Loop
    • 8️⃣Autoplay
    • 9️⃣Pagination
    • 🔟Navigation
  • 📔Guides
    • 🖌️Design
    • 💻Using a responsive control
    • 👀Using the visibility control
    • 🌟Using block slider presets
    • 😍Block slider with page builders
    • 🔍How to use Query Slider
    • 🛒How to create WooCommerce Product Slider
  • 🧰Hooks and Filters
    • 1️⃣blockslider_query_args
  • 🎮Controller Blocks
    • 🤩Thumbnails Controller Block
Powered by GitBook
On this page
  • Setting up WooCommerce
  • Block Slider WooCommerce Support
  • Setting up a Product Slider
  • Step 1: Selecting the post type
  • Step 2: Inserting the blocks
  • Step 3 (Optional): Modify/Tweak WooCommerce Query
  • Wrapping Up
  1. Guides

How to create WooCommerce Product Slider

PreviousHow to use Query SliderNextHooks and Filters

Last updated 1 year ago

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

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.

1️⃣blockslider_query_args
📔
🛒
Start with Woocommerce in 5 Steps
🔍How to use Query Slider
selecting the post type
inserting woo blocks
woo query controls
Page cover image