You are an entrepreneur and you want to build a webshop. This can be done very easily with standard templates, or you choose to design your own digital store. In that case, Divi and Woocommerce are your best friends. This article will answer the question: how to create a webshop in Divi?
Shopping on the net today is as normal as going to get something at the supermarket around the corner. More and more merchants are choosing to open a web shop. Consequently, this has become increasingly easy. So easy, in fact, that with services like Jouwweb you can even get a complete webshop off the ground without prior knowledge. But do you really want to control the design and make it look the way you want it? Then you are more likely to rely on a WordPress theme and builder like Divi and an e-commerce plugin like Woocommerce.
Divi is super handy software
that allows you to build a website in a very visual way. If you are visually inclined, as I am, I highly recommend this: what you is what you get. And I also recommend Woocommerce because, like WordPress itself, it is open source : the source code is public so developers can keep improving it all the time. So development never stands still.
But, how do you get started on this? I share the steps with you below.
Looking for other tips for Divi? Read how to build a header in Divi here. Or discover how to create a blog in Divi here.
Divi theme and builder is one of my favorite tools. Curious about more? Discover my favorite tools for both web design and photography here.
1. Download the Woocommerce plugin
This is open source, so it is also completely free. You can find it by clicking “add new” under plugins. You search for “Woocommerce” and download it.
2. Activate Woocommerce and set it up
You can do this from the plugin overview. You press “activate.” Then you can go through the steps in the wizard. You can also skip this and do it later by navigating to Woocommerce in the Dashboard. There you can find all the settings under “settings.” Very important thing to do is indicate to Woocommerce that you are working with Divi. You indicate this in this roadmap. Also, you can already specify the currency you will work in, the regions you want to sell in, whether you will work with vouchers, and so on. Don’t know something yet? No problem, you can add to that later.
With WooCommerce, you can normally work with only one vendor. Looking for WordPress software to create a digital marketplace? Then read how to create a multi-vendor platform with WordPress here.
3. Customize the Woocommerce pages.
Once you install Woocommerce, your website also suddenly has five more pages: shop, cart, checkout, my account and refund and returns policy. Very convenient that these are already there! What’s less nice is that these have Divi’s default layout, which in itself is not very nice. So you will have to edit or overwrite these pages. The choice is yours.
Option 1: customize the Woocommerce pages.
This in itself is the easiest. You can use Woocommerce’s default layout in Divi and change it to your liking. You do it as follows: go to your page overview via the dashboard. Find the page in question and press “edit.” If you do this a first time, you’ll end up in the default WordPress editor. On the right side, you can specify whether or not you want a sidebar. Personally, I usually don’t, because it usually includes the traditional layout. Next, you need to let Divi take over. You do that by pressing “edit in Divi.” Then the standard Divi window opens up and you indicate that you want to work “from scratch.” You’ll see the Woocommerce default layout appear. This is visible as a module. If you slide over it with the mouse, you can click on the settings cog. Now the window that allows you to customize the layout opens: you can adopt the website’s house style. Advantage of this method: it goes fast. Disadvantage of this method: you can’t just quickly move something from place to place.
Option 2: overwrite the Woocommerce pages
If you don’t like standard Woocommerce designs in Divi, you can also design your own template pages. You do that by going to the theme builder. You’ll find those to the left in your dashoard. You press “add new template” and you can choose from “product pages”. Do you want all product pages to look the same? Then you can create a very nice product page here. Then select “from scratch” after you press the pen and you will end up on a blank page. Don’t know where everything is? Don’t panic, add a Woo module. You can find those by searching on the keyword “woo.” Now you see all kinds of Woocommerce modules to choose from. And you can also, unlike the previous method, choose where to place which part! Once you have created your page, your design simply takes over the default page. Advantage: you can customize this super well. Disadvantage: this takes quite a lot of time because you have to know which part belongs where.
Note on sustainability: option 1 generates the least carbon emissions because you don’t create much additional code with Divi. If you choose option 2, then you increase the website’s CO2 emissions because more code is written by Divi. This requires more server space and therefore more energy.
4. Entering the products
In your dashboard, you’ll find the keyword “products” on the left. Click “Add New” and you will be taken to a standard Woocommerce field. Don’t panic, once published this will appear in your Divi layout. You can enter everything from title and description to price, photos, tags and categories here. After pressing the “publish” button, you can view your product in your Divi layout!
5. Organize your products
Do you have a lot of products? Then I recommend working with categories and maybe even tags. Note: you now have regular tags and categories in WordPress, but you should not have them now. Now you have to work with “product tag” and “product category,” this is how Woocommerce understands that you are going to group the products. Want to design specific category pages? You can do that too! You do that by repeating step 3b back and opting for “product category page.” After publishing, you’ll see the products arranged your way!
6. Linking a payment system
Without a cash register, you don’t have a store. Therefore, your Woocommerce shop also needs a payment system. In the Low Countries, for example, Stripe and Mollie are widely used. These systems allow you to pay by Bancontact, iDeal, Mastercard, Credit Card and other (digital) cards. Choose your payment system and create an account. Then go back to your plugin page and find the plugin for your payment system. For example, if you install Stripe for Woocommerce, you can link Woocommerce with the payment system Stripe through this plugin. You can do so by simply logging in with your customer information. Finally, you choose which payment systems you want to open.
7. Testing your shop
Make sure your payment system is still on “testing.” Publish your website with webshop and pretend to be a customer. Choose any product from your webshop, enter your customer information, pretend to pay, and see what happens. Does everything go smoothly and do you also get an email from Stripe, for example? Then you’re in the right place! You can put your webshop on “live”!
Article updated January 4, 2025.
This article contains an affiliate link. Look here for more information.