Toย sell products on your WordPress website, youโll needย a stable, dependable e-commerce plugin. WooCommerce has dominated theย field, and understandably so. With its powerful built-in features and range of optional extensions, it offers plenty to all would-be online store owners. Combine this plugin with the power of Divi, and you can build an incredible, scalable e-commerce site that attracts customers and helps makes sales.
In this post, weโll go into detail about why we love WooCommerce, and why itโsย integrated with Divi. Weโll also show you how to set it up and walk you through publishing your first product using the Divi Shop module. Letโs get started!
Why We Recommend WooCommerce
WooCommerceย is a highly customizable e-commerce plugin that powers 42% of all online stores. Its flexibilityย makes it the perfect fit for virtually any e-commerce setting. The pluginย enables you to sell physical or digital goods (along withย multiple shipping and payment options), andย you can even use it to sell affiliate items.
Itย boasts an excellent set of features, an intuitive interface, and an incredible range of extensions. Whatโs more, the basic plugin is completely free, making it a viable option for everyone looking to set up an online store. It also integrates seamlessly with many WordPressย themes, including (of course) Divi.
With over 20 million downloads, WooCommerceโs popularity speaks for itself. However, there are other options when it comes to e-commerce plugins, including eCommerce Product Catalog and Ecwid Ecommerce Shopping Cart. Even so, given WooCommerceโs combination of functionality and cost, itโs still the number one choice for many online sellers.
Given this, weโve ensured thatย Divi is fully WooCommerce compatible, right out out of the box. By utilizing the Shop module in conjunction with WooCommerce, you can yield some dazzling results. Furthermore, byย choosing the right extensions, you can create an amazing, unique storeย that could be hard to achieve with other solutions.
How to Set Up WooCommerce
Even though WooCommerce comes with a myriadย of options as standard, the setup is actually very straightforward thanks to its โonboarding wizardโ. This tool walks youย through setting up the required pages, as well as configuring store, shipping, tax, and payment information.
Once youโve installed and activated the plugin, youโll automatically be taken to the setup wizard. If you happen to miss it (or arenโt ready to run it yet), you can access it later by hitting Help in the upper left hand corner of the screen, then navigating toย Setup Wizard > Setup Wizard:
Once youโre in the wizard, hit Letโs Go! to get started:
The Page Setupย section is for informational purposes, and lets you know that several essential shop pages will be created automatically:
Moving on, the Store Locale page has fields for you to specify your store location, currency, and preferred weight and dimension units:
Next, you need to decide if youโll be shipping physical products and charging sales tax:
Finally,ย we get to the crucialย Payments page. Here you can decide exactly how youโre going to accept your hard-earnedย money:
Now that all of your settings have been entered, youโll see the Ready! page, which lets you know youโre ready to start creating your first product:
Although using the wizard is quick and simple, you can instead choose to manually alter the settings by selecting WooCommerce > Settings from your dashboard.
In any case, at this point youโll be ready to create your first product โ letโs find out how to do it.
How to Publish Your First Product Using the Divi Shop Module (in 4 Steps)
There are several ways you can use WooCommerce within Divi. For example, you can use it without accessing the Diviย Builder, or byย using shortcodes in a Text module. However, we recommend using it with the Shop module, which isย what weโll focus on here.
This module syncs with your product categories so you can easily arrange, organize, and adjust your storefront. It also comes with a plethora of customization options so you can create visually stunning shop pages to attract visitors. Letโs begin by adding a product.
Step #1: Add a Product
Once youโve completed theย setup wizard, it will prompt you to create your first product โ simply click on theย Create your first product! button.ย However, you can choose to skip it, creating your products later by navigatingย to Products > Add Product in your WordPressย dashboard. Either way, youโll use a newย blank pageย to createย your product entry. Here, enter your product name in the title box, and its description in the main content area:
Moving downย to the Product Data section, youโll see multiple tabs including General (which is where you enter your price),ย Inventory, and Shipping.ย Complete eachย field within these tabs as necessary:
Directly below this youโll find the Product Short Description section. This works similarly to an excerpt for a regular WordPress post, and will display alongside the product on listing pages.
Moving over to the right-hand side of the screen, we have the option to add images. In the Product Image section, click on Set product image and upload the main image for your product.ย You can add any further images toย the Product Gallery section:
Finally, youโll need to assign your product a category in the Product Category section (also on the right-hand-side of the editor). This is an important step as this tells the Shop module which products to display:
Finally, click Publish, and youโve created your first product! Next up is creating a dedicated page to display your products.
Step #2: Create a New Page
Given that youโll be inserting your products using a Shop module, youโll need a page to add them to. If you went through the setup wizard,ย WooCommerce would have automatically created a blank pageย named Shop.ย If you donโt yet have a shop page (or youโd like to create a new one), navigateย toย Pagesย >ย Add Newย in your WordPress dashboard, then select theย Use The Divi Builder button to beginย creating your layout:
How you designย your page is completely up to you โ for example, you might want to match the layout of the rest your site, or useย any layouts you alreadyย have saved. Of course, thereโs nothing to stop you creating aย completely different look for your shop pages too โ perhapsย with a completely contrasting style to help showcase the products.
If youโre new to using the Divi Builder, you can check out our documentation for getting started. Divi also comes with two pre-built shop layouts, one of which might be just what youโre looking for. To access these, first click on Load From Library:
From here, scroll down to the two shop layouts and choose whichever you like:
If you do choose a predefined layout, theย Shop module will be already inserted for you. However, for custom designs, youโll want to add the module yourself.
Step #3: Insert Your Shop Module
Next we want to add products to our pages. For those creating a custom shop page layout, click onย Insert Module(s) wherever youโd like your productย to appear:
Next,ย scroll down and select Shop:
Youโll comeย to the General Settings tab, where you can customize the layout of the module. Firstly, you can decide which type of products you want to display, including your most recent, best selling, or simply a single category:
Once youโve selected aย product type, enter how many products youโd like to display, before checking which categories to include, and specifying how many columns to display:
Finally, thereโsย also an Order by section to tinker with, which enables you to choose how you products are ordered โ byย rating, date, or price, for example.
The final step is to style your module appropriately.
Step #4: Style Your Module
Once your layout isย sorted, you can get to styling it. Head on over to the Advanced Design Settings tab, where youโll be greeted with a whole host of options:
Here, youโre given a comprehensive set of options forย styling yourย Shop module to appear exactly as you want it. For example, you can customize the colors of the sale badge, hover, hover overlay โ and fonts โ so they blend perfectly with your color scheme. You can also choose from hundreds of hover icons, change the title and price fonts, and more.
For those of you willing to get your hands dirty with code, you can use the Custom CSS tab to tailor the module elements even further. In any case, if youโre looking for some inspiration, you can check out our list of incredible Divi e-commerceย sites, along with ourย shop styling tutorial, which offers handy tipsย forย achieving some unique styles.
Conclusion
In order to stand out, itโs important that your site is attractive and functional. To showcase your products, youโll want a quick and simple to use solution, thatย also delivers stunning and practical results.
Using WooCommerce in combination with Diviโsย Shop moduleย enables you to display your products beautifully, without it becoming a timesink. Once youโve installed, activated, and set up the plugin, youโll want to:
- Add a product.
- Create a new page.
- Insert your Shop module.
- Style your module.
Do you have any questions about usingย WooCommerce with Divi? Let us know in the comments section below, and donโt forget to subscribe so you can follow the conversation!
Article thumbnail image by Zakharchenko Anna / shutterstock.com.
Hi, i’m using Divi Theme in my Woocommerse site, all works fine however when add a sidebar with woocommerce price filter, the widget not showing and various element of shop module like: breadcums, pagination, filters etc” not showing, can you help me to solve this issue?
Hi Emmanuel! It’s hard to say without seeing your exact setup, but trying posting a description of the problem in our forums (https://www.elegantthemes.com/forum/) to see if another user can help.
Hi all, i have a woocommerce in my wordpress site.
I have a page with Divi editor and i put a section with Shop module.
In this shop module i selected product by Category and product number its set to 20. When i open this page i see correctly 20 product but in the category there are many product. It’s possible to add a paginator a search box for products and an sort combobox?
Hi, Domenico! You’ll likely have to get your hands dirty with some coding to add that feature. Try posting in our forums to see if another user can help out: https://www.elegantthemes.com/forum/.
Is there an easy way, like ready-made CSS, to style the WooCommerce buttons etc. to look like Divi instead of looking completely out of place and having the eCommerce portion looking like a separate website?
Hi Ron! The Divi Commerce plugin can help with some of that: https://www.elegantthemes.com/blog/divi-resources/divi-plugin-highlight-divi-commerce. However, you may need to get your hands dirty with some coding to change the buttons themselves.
Hey John,
I am planning to build a food delivary website just like foodpanda,zomato does divi supports? I am extremely newbie. Please do reply me.
Thank you
Hi Sachin! It depends on what you want to do, but itโs very likely. Divi has a lot of features that are perfect for an e-commerce site like the one youโre building. Iโd suggest contacting us directly (https://www.elegantthemes.com/contact/) for more information.
Hello John,
For some reason the woocommerce cart doesn’t allow customers to select shipping methods (flat rate, local pickup, etc), and during checkout the customer is only asked for the billing address and NOT the shipping address which may be different. There is no option or checkbox to ‘ship to’ address or any settings I can find to request both shipping and billing address. Any ideas?
Hi Erik! Check out this documentation page for more information on both of those topics: https://docs.woocommerce.com/document/configuring-woocommerce-settings/#section-10. If you continue to struggle, you should contact Woo Themes directly, as they may be able to shed some light on the situation.
I was waiting for a resource like this. Thanks a lot and I would appreciate a kind of series of Divi + WooCommerce partnership
Youโre welcome, Eric! ๐ Weโll keep that in mind.
Does the Shop Module also work with Amazon?
The Shop Module is designed to display product information. If you want to integrate WooCommerce and Divi with Amazon, you can get a plugin for that (https://payments.amazon.com/sp/woocommerce).
@Michael instead you can use the official amazon plugin pls note it’s on beta check out here: https://wordpress.org/plugins/amazon-associates-link-builder/
That’s a great article but there is still no way to customize, shop archive page, and single product page. ๐
Everything about Divi is brilliant, except, as you mention, no way to customise the product page.
Do this and you’ll be untouchable. And yes I (and others) have mentioned this in the forums.
learn CSS. Boom!
That’s indeed frustrating.
csshero does the trick for me (a simple plugin I read about on this blog).
I could sowehow customize woocommerce single product page. If you don’t abuse, and want simple customizations, it works fine.
You can also check businessbloomer.com, a blog by an italian guy, just perfect to customize woocommerce. It is free and very well explained.
Thanks, Julien. If you have any suggestions for future versions of Divi, let us know in the forums! (https://www.elegantthemes.com/forum/)
This is very useful, thank you John! ๐
Youโre welcome, Susan! ๐
It is possible to paginate the shop module?
Hi, David! Check out my response to Santiago just above. ๐
How can I use this “shop module” with pagination and showing all the prouducts of muy shop? Thanks
You may have to do some coding to integrate pagination. Check out this article: https://www.elegantthemes.com/blog/tips-tricks/how-to-add-pagination-to-wordpress. Itโs not specific to the shop module, but it should help get you started. Then if you have further questions, try posting them in our forums (https://www.elegantthemes.com/forum/).
Hello . I bought divi, it’s fantastic.
THANKS
Youโre welcome! Weโre glad youโre happy with it. ๐
I have a Ecommerce shop with DIVI, but besides using de Shop module to show the standart categories, most recent… , i have several products belonging to categories and subcategories, but i cant display subcategories.
So i have to use the woocommerce pages to do that and i cant style it…
Maybe im doing someting wrong ๐
Im new in DIVI
Thanks for commenting, Hugo. Itโs hard for me to give you advice without seeing your exact setup, so try posting exactly what youโre trying to do in our forums (https://www.elegantthemes.com/forum/) to see if another user can help!
The popular ‘Shopify’, is extremely customisable by available add on apps being created. This can be a trap for those new to e-comm, as these apps usually require the payment of a monthly fee. What add ons are available for WooCommerce and how does the customisation of WooCommerce compare to that of Shopify?
Hi, Richard. WooCommerce offers a number of add-ons and extensions on its own website. You can also find plenty of free add-ons, such as WooCommerce Products Per Page (https://tinyurl.com/gvrff87) and WooCommerce Stock Manager (https://tinyurl.com/gwdy6ns). Youโll find more customization options for WooCommerce than for Shopify, simply because itโs more widely used.
Thanks John, that is just what I needed to find out. Thanks for the excellent post and feedback.