Divi Carousel Maker

Documentation & Support

Docs » Divi Carousel Maker » How To Create A WooCommerce Product Carousel With The Divi Woo Products Module

How To Make A WooCommerce Product Shop Module Carousel with the Divi Carousel Maker Plugin by Pee Aye Creative

How To Create A WooCommerce Product Carousel With The Divi Woo Products Module

Overview

In this guide, you will learn everything you need to know about creating a beautiful WooCommerce product carousel directly in the Divi Builder with Divi Woo Products module (formerly named Shop module) and the Divi Carousel Maker! As you set up the carousel, I highly recommend you also reference our full settings list of all the settings and features included in the plugin. You should also check out the Woo Products module carousel demo to get some inspiration, or download our free layouts to give you a quick start!

Screenshot_439
Screenshot_440
Screenshot_441
Screenshot_445
Screenshot_442
/*fix Divi/WooCommerce product column width on phone*/

@media (max-width: 980px) {
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li.product,
	.et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-1 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-2 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-3 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-4 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-5 li.product,
	.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li.product,
	.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-1 li.product,
	.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-2 li.product,
	.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-3 li.product,
	.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-4 li.product,
	.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-5 li.product,
	.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-6 li.product {
		width: 100%!important;
		margin-right: 0%!important;
	}
}
enable the carousel toggle in the Divi Carousel Maker plugin

Due to the unique nature of this plugin and the limited ability to customize the core Divi Builder, it is not possible to provide a preview of the carousel in the Visual Builder. The carousel settings will take effect when you exit the Visual Builder. If Elegant Themes makes this possible in the future, we will definitely add support. Please refer to our Suggested Workflow Guide for our recommended workaround for this.

Last updated Dec 23, 2021 @ 7:39 pm

Is This Article Helpful?

Pin It on Pinterest

0

Your Cart