{"id":104677,"date":"2023-02-18T16:11:24","date_gmt":"2023-02-18T10:41:24","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=104677"},"modified":"2023-02-18T16:11:24","modified_gmt":"2023-02-18T10:41:24","slug":"carousel-remote-sync-with-elementor-woocommerce-product-carousel","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/carousel-remote-sync-with-elementor-woocommerce-product-carousel\/","title":{"rendered":"How to connect a Carousel Remote Sync (Dots & Arrows) with Elementor WooCommerce Product Carousel?"},"content":{"rendered":"\n

The Woo Product Listing widget from The Plus Addons for Elementor is an excellent tool for businesses that need to showcase and promote their products effectively. This widget easily connects with WooCommerce, allowing businesses to create visually stunning and dynamic layouts to display their products beautifully and conveniently. <\/p>\n\n\n\n

Among its many style offerings, one of them is the carousel, using that you can showcase your products in a beautiful carousel. By connecting this widget with the Carousel Remote widget, you can make this carousel more dynamic.<\/p>\n\n\n\n

Here we\u2019ll see how you can connect the Woo Product Listing widget with the Carousel Remote widget so that you can provide more convenient carousel navigation options to your users.<\/p>\n\n\n\n

To check the complete feature overview documentation of The Plus Addons for Elementor Carousel Remote widget, click here<\/a>.<\/em><\/p>\n\n\n\n

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n

\n
LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

For this process, first, drag and drop the Carousel Remote widget and the Woo Product Listing widget, and then follow the below steps: <\/p>\n\n\n\n

\n

Note: Make sure you have installed the Woocommerce plugin and have created some products.<\/em><\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

1. Once you add the Woo Product Listing widget it should show your existing products, set the layout to Carousel<\/strong> from the Layout<\/strong> dropdown.<\/p>\n\n\n\n

\"woo<\/figure>\n\n\n\n

2. Then go to the Style<\/strong> tab > Carousel Options<\/strong> and add a unique id in the Unique Carousel ID<\/strong> field, this can be any combination of letters and numbers.<\/p>\n\n\n\n

\"woo<\/figure>\n\n\n\n

3. Now select the Carousel Remote widget, then go to the Content<\/strong> tab, add the same ID in the Unique Connection ID<\/strong> field and make sure Remote Type<\/strong> is selected as Carousel<\/strong>.<\/p>\n\n\n\n

\"carousel<\/figure>\n\n\n\n

4. Now, you can have two different types of navigation, a Next and Previous button and Dots (image or icon). You can use either one or both.<\/p>\n\n\n\n

a) To use the next previous button go to Prev\/Next<\/strong> tab and turn on the Next\/Prev Button<\/strong> toggle. You\u2019ll find some customisation options as well.<\/p>\n\n\n\n

\"carousel<\/figure>\n\n\n\n

b) But if you want to use dot navigation, then go to the Dots<\/strong> tab and turn on the Dots<\/strong> toggle. Now make sure to have the same number of dot items as the number of slides in your Woo Product Listing carousel. You will get some customisation options for your dot navigation.<\/p>\n\n\n\n

\"carousel<\/figure>\n\n\n\n

If you plan to add products on a regular basis then you should use the Prev\/Next <\/strong>navigation option for easy maintenance.<\/p>\n\n\n\n

\n

Note: You should disable all the navigation options for the Woo Product Listing widget for the best user experience.<\/em><\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

Now you can put the Carousel Remote widget anywhere on the page and your users should be able to control the Woo Product Listing carousel navigation from there.<\/p>\n\n\n\n

\"carousel<\/figure>\n\n\n\n

Learn how to connect the Carousel Remote widget with the Blog Post widget<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":104681,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[547,527],"class_list":["post-104677","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-carousel-remote","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=104677"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104677\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104681"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104677"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}