--- title: "How to connect a Carousel Remote Sync (Dots & Arrows) with Elementor WooCommerce Product Carousel?" url: https://theplusaddons.com/docs/carousel-remote-sync-with-elementor-woocommerce-product-carousel/ date: 2023-02-18 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "A WooCommerce product carousel sells better with clear Next/Prev buttons, but they do not always fit neatly next to the products themselves. The Carousel Remote widget from The Plus Addons..." image: https://theplusaddons.com/wp-content/uploads/2023/02/How-to-connect-a-Carousel-Remote-Sync-Dots-_-Arrows-with-Elementor-WooCommerce-Product-Carousel-1024x536.jpg word_count: 499 --- # How to connect a Carousel Remote Sync (Dots & Arrows) with Elementor WooCommerce Product Carousel? A WooCommerce product carousel sells better with clear Next/Prev buttons, but they do not always fit neatly next to the products themselves. The **Carousel Remote** widget from The Plus Addons for Elementor gives a Product Listing carousel its own Next/Prev buttons and dots, placed wherever you like. The two widgets are linked by the same ID. *To check the complete feature overview documentation of The Plus Addons for Elementor Carousel Remote widget, [click here](https://theplusaddons.com/docs/carousel-remote-elementor-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/carousel-remote-sync/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** **Pro** — the Carousel Remote widget is part of The Plus Addons for Elementor Pro. No free equivalent exists.- **Widget to enable:** Carousel Remote, switched on under **The Plus Addons > Widgets**.- A **Product Listing** widget with its content ready, set to a **Carousel** layout. ## Step 1: Set the Layout to Carousel - Select the **Product Listing** widget, choose your product query, then in **Content Layout > Layout** click the **Carousel** icon. ![The Layout icon picker of the Product Listing widget with Carousel selected](https://theplusaddons.com/wp-content/uploads/2026/09/tp-product-listout-layout-wide.webp) ## Step 2: Give the Carousel an ID - Open **Style > Carousel Options** (or **Content**, depending on the widget) and type an ID into **Unique Carousel ID**, for example `plans`. Use letters, numbers, dashes or underscores, without spaces. ## Step 3: Link the Carousel Remote - Drag the **Carousel Remote** widget to where the controls should appear.- In **Content**, type the same ID into **Unique Connection ID**.- Leave **Remote Type** on **Carousel** (the default). ![The Unique Connection ID and Remote Type fields of the Carousel Remote widget](https://theplusaddons.com/wp-content/uploads/2026/09/tp-carousel-remote-unique-connection-id-wide.webp) ## Step 4: Choose Buttons, Dots or Both - Open **Prev/Next**. **Next/Prev Button** is on by default. ![The Next/Prev Button switch in the Prev/Next section of the Carousel Remote widget](https://theplusaddons.com/wp-content/uploads/2026/09/tp-carousel-remote-next-prev-button-wide.webp) - Open **Dots** and turn on **Dots** (off by default).- Add one dot item per slide, in the same order as the slides. ![The Dots switch and dot items in the Dots section of the Carousel Remote widget](https://theplusaddons.com/wp-content/uploads/2026/09/tp-carousel-remote-dots-wide.webp) Publish the page and try the buttons and dots on the front end. ![The Carousel Remote widget's Next, Prev and dot controls next to a connected carousel on the front end](https://theplusaddons.com/wp-content/uploads/2026/09/tp-carousel-remote-result-connected.webp) ## How It Behaves - **Next** and **Prev** move the connected carousel one slide.- Clicking a dot jumps straight to the matching slide and marks that dot active; moving the carousel by any other means (drag, autoplay) also updates which dot is active.- Verified on the front end with 8 slides: Next moved slide by slide (0 -> 1 -> 2 -> 3), Prev moved back, and each dot jumped to its own slide. With only as many slides as the carousel shows at once, Next/Prev have nowhere to go, so add more slides than the widget's column count if the buttons look inactive. ## Limitations - Dots are matched to slides by position and count. Add one dot per slide; a mismatched count leaves some slides with no dot of their own.- Carousel Remote is part of The Plus Addons for Elementor Pro only. ## Troubleshooting ### The buttons or dots do nothing - Check that **Unique Carousel ID** and **Unique Connection ID** match exactly, with no extra spaces.- Make sure **Remote Type** is set to **Carousel**.- If the carousel shows all its slides at once (few items, many columns), Next/Prev has nothing to advance to -- add more slides. ## Related Docs - [Carousel Remote widget: settings overview](https://theplusaddons.com/docs/carousel-remote-elementor-widget-settings-overview/)- [Connect Carousel Remote with an Image Gallery](https://theplusaddons.com/docs/carousel-remote-sync-with-elementor-image-carousel/)- [Connect Carousel Remote with Blog Posts](https://theplusaddons.com/docs/carousel-remote-sync-with-elementor-blog-posts-carousel/) ## Frequently Asked Questions **Q: What do I need before setting up carousel remote sync with a WooCommerce product carousel?** A: The setup depends on three things: The Plus Addons for Elementor Pro, the Carousel Remote widget being switched on under The Plus Addons > Widgets, and a Product Listing widget already set to a Carousel layout. The remote controls only work when both widgets share the same ID, so the carousel itself has to be ready before you link anything. That matters because the remote is just a controller, not the carousel source. **Q: Why do my Next/Prev buttons or dots do nothing on the front end?** A: The most common cause is an ID mismatch. Unique Carousel ID and Unique Connection ID have to match exactly, with no extra spaces. Remote Type also needs to stay on Carousel. Another gotcha is layout size: if the carousel shows all its slides at once, Next/Prev has nowhere to move, so it can look broken even when the connection is correct. **Q: How many dots should I add for a product carousel remote sync?** A: Add one dot per slide, in the same order as the slides. The dots are matched by position and count, so if you add fewer dots than slides, some slides will not have their own dot. That makes the navigation feel incomplete and can confuse users because the active dot only tracks the slide it matches. **Q: What is the best way to choose between buttons, dots, or both for carousel remote sync?** A: Buttons are better when you want simple step-by-step navigation, because Next and Prev move one slide at a time. Dots are better when you want direct jumps to specific slides, since clicking a dot takes you straight to that matching slide and marks it active. Using both gives users two navigation styles at once, which is useful when product carousels need both browsing and quick jumping. **Q: Does carousel remote sync work if my product carousel shows all items at once?** A: It can connect, but Next/Prev will have nothing to advance through if the carousel already shows every slide at once. The page calls out this exact case: few items plus many columns can make the controls look inactive. The practical fix is to add more slides than the widget’s column count so there is actually something for the remote buttons to move. **Q: Can I place the carousel controls somewhere other than next to the products?** A: That is exactly what Carousel Remote is for. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides a separate Next/Prev button set and dots that can be placed wherever you like while still controlling the WooCommerce product carousel through a shared ID. That makes it useful when the product grid layout does not leave room for built-in controls.