--- title: "How to Create WooCommerce Product Carousel in WordPress?" url: https://nexterwp.com/docs/create-woocommerce-product-carousel-in-wordpress/ date: 2023-08-09 modified: 2026-09-26 lang: en author: "Aditya Sharma" description: "A grid of twelve products takes a lot of vertical space on a home page, and most of it is below the fold where nobody sees it. The carousel layout..." image: https://nexterwp.com/wp-content/uploads/2024/05/create-woocommerce-product-carousel-in-wordpress-1024x519.jpg word_count: 466 --- # How to Create WooCommerce Product Carousel in WordPress? ## Key Takeaways - Nexter Blocks Pro activa el bloque Product Listing y, con WooCommerce activo y productos publicados, el bloque lee el catálogo real; si la tienda está vacía, la lista también se renderiza vacía. - El diseño de carrusel usa el mismo motor deslizante que el resto de Nexter Blocks, con autoplay activado por defecto a un intervalo medido de 1500 milisegundos. - Cada producto carga sus propios datos en el carrusel, incluyendo categorías product_cat, etiquetas product_tag, estado de stock instock u outofstock y si está en oferta. A grid of twelve products takes a lot of vertical space on a home page, and most of it is below the fold where nobody sees it. The carousel layout puts the same products in a slider, so they take one row instead of three. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/listing/wordpress-product-listing/) ## Before You Start - **Edition:** **Pro** — the Product Listing block needs Nexter Blocks Pro.- **Block to enable:** Product Listing, switched on under **Nexter > Blocks** in your WordPress dashboard.- **WooCommerce active, with published products.** The block reads your real catalogue, so an empty store renders an empty listing. ## Steps - Select your **Product Listing** block. ![The Product Listing block](https://nexterwp.com/wp-content/uploads/2026/09/ql-layout-carousel.webp) - Set the layout to **carousel**. ![Choosing the carousel layout](https://nexterwp.com/wp-content/uploads/2026/09/ql-steps-carousel-1.webp) - Set how many products are visible at once. ![Setting how many products show at once](https://nexterwp.com/wp-content/uploads/2026/09/ql-steps-carousel-2.webp) - Decide about autoplay, arrows and dots. Autoplay is on by default. - Publish and check the real page. ![The finished product carousel](https://nexterwp.com/wp-content/uploads/2026/09/ql-steps-carousel-3.webp) ## How It Behaves The carousel layout uses the same slider engine as the rest of Nexter Blocks. - **Measured on a published page:** the wrapper rendered `data-layout="carousel"` with a full `data-splide` configuration.- **It is the same engine as** [Carousel Anything](https://nexterwp.com/docs/add-carousel-anything-in-wordpress/) and the [Post Listing](https://nexterwp.com/docs/add-post-listing-in-wordpress/) carousel, so the settings behave identically across all three.- **Autoplay is on by default**, measured at a 1500 millisecond interval. For a shop front that is usually wrong, because a moving product is hard to click.- **Every card carries its own data.** Measured on a published page, each product renders as an `article` whose classes include its category (`product_cat-...`), its tags (`product_tag-...`), its stock state (`instock` or `outofstock`) and whether it is on sale.- **Measured with Nexter Blocks Pro deactivated:** the block renders nothing at all — no wrapper, no products, no prices. This is a Pro-only block. ## Limitations - **Pro only** — measured with Nexter Blocks Pro deactivated, nothing renders.- **A carousel hides products.** Most shoppers see the first slide and no more, so do not put your best seller on slide four.- **Autoplay and buying do not mix.** A product that slides away as someone reaches for it is actively costing you sales. Switch autoplay off, or at least enable pause on hover.- **Add to cart inside a moving carousel is awkward** on touch screens, where a swipe and a tap are easily confused.- **Every product still loads**, visible or not. ## Troubleshooting ### It is not sliding Check Nexter Blocks Pro is active. Measured with Pro off, the block renders nothing at all. ### It moves on its own and I never switched that on Autoplay is on by default. Switch it off, which is usually the right choice for a shop. ### Only one product shows at a time That is the default. Raise the number of visible items. ### Shoppers are struggling to tap add to cart Swipe and tap conflict on touch screens. Switch autoplay off, or use a grid for the buying section. ## Related Docs - [Add Carousel Anything in WordPress](https://nexterwp.com/docs/add-carousel-anything-in-wordpress/)- [Show products in grid layout](https://nexterwp.com/docs/show-woocommerce-products-in-grid-layout-in-wordpress/)- [Add product listing in WordPress](https://nexterwp.com/docs/add-product-listing-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before creating a WooCommerce product carousel in WordPress?** A: The setup depends on three things: Nexter Blocks Pro, the Product Listing block being enabled under Nexter > Blocks, and WooCommerce with published products. That matters because the block reads your real catalogue, so an empty store produces an empty listing. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the Product Listing block for this workflow. **Q: How do I turn a product listing into a carousel instead of a grid?** A: The key change is switching the Product Listing block layout to carousel. Once that layout is active, the same products render in a slider row instead of a multi-column grid. The page also notes that you then choose how many products are visible at once and decide on autoplay, arrows, and dots. That makes the carousel behave like the rest of Nexter Blocks slider components. **Q: Why is my WooCommerce product carousel not sliding?** A: A non-sliding carousel usually points to Nexter Blocks Pro being inactive. The page says that with Pro off, the block renders nothing at all, so there is no wrapper or products to animate. That is different from a broken slider setting. If nothing appears on the published page, check the Pro-only requirement first because the carousel engine never gets a chance to run. **Q: Should autoplay be on for a product carousel in an online store?** A: Autoplay is on by default at a measured 1500 millisecond interval, but the page treats that as a bad fit for shopping. A moving product is harder to click, especially when someone is trying to buy fast. For shop fronts, switching autoplay off or at least enabling pause on hover is the safer choice because it reduces accidental movement during checkout intent. **Q: Why do only one product show in my carousel?** A: That is the default behavior for this layout. The fix is not in the products themselves but in the visible-items setting: raise the number of products shown at once. This matters because the carousel uses one row instead of three, so leaving the default untouched can make a store look sparse even when there are plenty of items in the catalogue. **Q: Is a product carousel good for mobile shoppers?** A: Touch screens are where carousels get awkward fastest. The page calls out swipe and tap conflict on touch devices, especially when shoppers try to hit add to cart inside a moving slider. For buying sections, autoplay off or a grid layout is usually cleaner. If you want another layout option, [Show products in grid layout](https://nexterwp.com/docs/show-woocommerce-products-in-grid-layout-in-wordpress/) is the safer pattern for touch-heavy traffic.