How to Build a WooCommerce Website With Divi: Step-by-Step Guide

Empowering your WordPress website with e-commerce functionality requires a robust and reliable plugin, and that’s where WooCommerce shines. As a dominant force in the e-commerce field, WooCommerce offers an array of powerful built-in features, complemented by numerous optional extensions, making it an ideal choice for aspiring online store owners. 

Combining the prowess of Divi, our beloved WordPress Theme Builder, the possibilities for building an exceptional, scalable e-commerce site become boundless. Together, they form a dynamic duo that can turn your online business dreams into reality.

With the rise of e-commerce, the way we shop and conduct business has undergone a revolutionary transformation. The convenience of purchasing products and services online has reshaped consumer behavior, while businesses have gained the ability to reach a broader audience than ever before.

By unlocking the full potential of Divi, you can effortlessly build a professional e-commerce website, tailored to your unique brand and offerings. Its wealth of features and customization options allow you to create an online shop that not only looks impressive but also delivers an exceptional user experience.

So, without delay, let’s explore the essential steps to set up your own online shop using the powerful combination of WooCommerce and Divi and get to know about how to build a WooCommerce website with Divi.

Choose a Domain Name and Web Hosting

Setting up a domain and hosting is the first step toward creating your WooCommerce website with Divi. A domain is the web address that people will use to access your website (e.g., www.yourwebsite.com), and hosting is the service that stores your website’s files and makes them accessible to visitors on the internet.

Choosing a Domain Name

Select a domain name that reflects your brand, business, or website’s purpose. It should be easy to remember and spell. Consider using keywords related to your niche, as it can help with search engine optimization (SEO). 

You can use domain name registrars like GoDaddy, Namecheap, or Bluehost to check if your desired domain name is available for purchase. Once you find an available domain name, register it with a domain registrar of your choice.

Select a Hosting Provider

Look for a reputable hosting provider that offers WordPress-compatible hosting. There are various hosting companies available, such as Bluehost, SiteGround, and HostGator, among others. Compare their hosting plans, features, server performance, customer support, and pricing to find the one that suits your needs and budget.

Install WordPress

After successfully signing up for web hosting, the next step is to set up WordPress on your domain. 

Simply access your hosting control panel, and locate the “WordPress” or “Website” section. Look for the option to install WordPress and click on it. Follow the on-screen instructions, and the installer will take care of all the technical aspects involved in setting up WordPress for you.

NOTE 1: If you opt for managed WordPress hosting services like WP Engine or Kinsta, the installation process is already handled for you, as these providers are specifically tailored to WordPress.

NOTE 2: Another hassle-free option is to choose Divi Hosting. When you opt for Divi Hosting, Divi is automatically installed and activated using your license key. Additionally, you benefit from fast WordPress hosting that meets all of Divi’s requirements.

Install Divi Theme

Divi was designed with eCommerce in mind! With the Divi theme installed, you’ll have access to its powerful features and a user-friendly page builder to help you create a stunning WooCommerce website effortlessly.

If you want to build Build a Divi Website from scratch, follow the dedicated step-by-step guide about how to build a Divi Website. 

In order to install Divi simply follow the instructions below, 

• First, you need to download the Divi theme from your ElegantThemes account and get the zipped theme folder.
• Then log in to your WordPress dashboard and navigate to Appearance > Themes.
• Click on the “Add New” button at the top and then click the “Upload Theme” button.
• Now, click the “Choose File” button and select the ZIP file of the Divi Theme.
• Click the “Install Now” button to start installing the theme.
• After successful installation, “Activate” the theme

NOTE: If you have chosen one of Divi’s partner hosting accounts, the theme will be installed automatically for you. For an external hosting service, the above process is all you have to follow.

Set up Your WooCommerce Store

Once you are done with installing WordPress and Divi it’s time to install and set up your WooCommerce store. Here is what you have to do,

• Navigate to the plugins section, click on “Add New” 
• Search for WooCommerce 
• Install the WooCommerce plugin
• Once the installation is complete, press Activate

Setting up WooCommerce is a breeze, thanks to its user-friendly ‘onboarding wizard,’ which streamlines the process with its step-by-step guidance. Upon installing and activating the plugin, WooCommerce will ask you a series of questions to help you configure your store. This will decide the type of store you will have. 

So, it starts with some basic questions like your e-mail ID, where you live, and more,

Next, select the industry to which your store belongs,

Next, select the product type that your store will sell,

You can select between physical and digital products for free. Also, there are options for memberships, bookings, bundles, or a customized combination but they are all paid. If you choose a paid product you can easily purchase it later in the wizard.

Next, you have to provide some additional information about your store like how many things you’ll sell, current annual revenue, etc. 

Next, decide which features to include in your WooCommerce store to optimize and scale your business.

Finally, choose a theme to finalize the process. We highly recommend using the currently active theme, which is Divi. You can always change the theme afterward.

WooCommerce will ask you to connect your site to Jetpack, a native integration that provides backups and enhanced security. If you have a Jetpack account, sign in; otherwise, create a new one to proceed.

NOTE: We highly recommend carefully reviewing all the available options and configuring them according to your specific preferences. Taking the time to tailor these settings will ensure your WooCommerce store aligns perfectly with your business needs and enhances the overall shopping experience for your customers.

Add a Product

Now, we’ll get started with creating our first product! You just have to click on “Add Products” to begin with.

It will ask you what kind of product you want to add based on what you selected in the WooCommerce configuration step. We will select Physical products here.

In the WooCommerce editor, you can easily create your first product by providing a name, and description, and setting the selling price. While the product configuration box offers detailed tabs for more options, this tutorial focuses on the simplest and quickest way to start your store. Feel free to explore and customize further details according to your preferences.

Once you’ve finished configuring the product, save and publish it to make it available for customers to purchase. The final output will look like this,

Next, you have to Set up payments, Add tax rates, Install or manage additional plugins, and finally personalize your store.

If you prefer, you can manually adjust settings by navigating to WooCommerce > Settings in your dashboard.

Create a Variable Product

WooCommerce’s variable product feature allows you to create customized products with multiple variations, such as different colors, sizes, and images. This simplifies product management and prevents the need to add several versions of the same item as separate products.

Here are the step-by-step process to create variable products for your WooCommerce store,

Step 1: Create attributes

• Go to the ‘Products’ section and select ‘Attributes’ from the menu bar.
• Enter the attribute title in the ‘Name’ field. We named it “Color”.
• (Optional) You can fill in the slug field if needed.
• Finally, click the ‘Add attribute’ button to save your changes.

Step 2: Add specific values of an attribute

• Click on the ‘Configure terms’ option in the ‘Terms’ column of your attribute.
• On the left side, you’ll find an ‘Add new Color’ form. Enter the colors in which you sell clothing, such as red, blue, or green.
• To add more colors, simply click the ‘Add new color’ button.

Step 3: Add attributes to an individual product

Go to the ‘Products’ section in the left menu bar. Either select an existing one or add a new product, it’s up to you. In the ‘Product data’ section, select ‘Variable product’ from the drop-down menu.

• Now, head to the ‘Attribute’ tab, where you’ll find a list of the attributes you have created for your WooCommerce product.
• Choose one of the attributes from the list; for example, let’s say you select the ‘color’ attribute.
• If your product can have multiple colors, you can select more than one option or simply click the ‘Select all’ button.
• Make sure to check both the ‘Visible on the product page’ and ‘Used for variations’ options. This will display the attribute on the product page and enable variations based on the selected attribute.
• Click on ‘Save attributes’ to save your changes and update the product.

Step 4: Add variations to your product

• In the ‘Variations’ section, click on ‘Add variation’ from the drop-down menu, located just below the Attributes.
• Once you click ‘Go,’ a new drop-down menu will appear.
• Now, you can select the attribute for your variations, like a specific color.

Step 5: Customize the rest of the settings

Enhance the variations panel to easily customize product information for each variation. This feature empowers you to upload images, specify prices, stock status, dimensions, and other relevant details for every product variation. Notably, setting a price for each variation is mandatory. Simply save your modifications by clicking on ‘Save changes’ to apply them.

Now Publish/Update the product and you are done.

Create a Single Product Page

With Divi Builder, you have the capability to design a personalized individual product page. Furthermore, you can assign this customized single-product page to specific items, products within particular categories, and products tagged with specific labels.

To start with,

• Go to Divi > Theme Builder. 
• Add a new template just like the previous time
• Click “Build new template” to build from scratch 
• On the Products block, select “All Products” to assign the custom product
• Click on the “Create Template” button.
• Next, click Add Custom Body > Build Custom Body

Before adding any module we will need to add some rows. In the first row, we will use the Woo Breadcrumb and Woo Chart Notice modules.

First, click on the green plus button to insert a new row. Next, opt for the single-column structure, and proceed to add the Woo Breadcrumb module. Make sure to select “This Product” from the Product option in the Content block. Afterward, head to the Design tab where you can conveniently customize the module to your liking.

Once done with the Woo Breadcrumb module, we will add the Woo Cart Notice module. Make sure to select “This Product” from the Product option in the Content block. For customizing typography, text color, and button styles, head over to the Design tab. 

And to modify the background, simply navigate to the Background block located within the Content tab. Remember to click the green checklist icon whenever you finish making new changes.

In the second row, we will use the following row,

• Woo Image: To showcase the product image.
• Woo Title: To present the product title.
• Woo Rating: To display the product rating.
• Woo Price: To show the product price.
• Woo Description: To exhibit the product description.
• Woo Add To Cart: To add the ‘Add to Cart’ button.
• Woo Meta: To display additional product metadata such as SKU, categories, and tags.

To start with add a new row by clicking the green plus button. This time select the two-column structure. In the left column add the Woo Image module. Make sure to select “This Product” from the Product option in the Content block.

Here you can set three element options under the Elements block. Also set the image size, border radius, and sale badge text, from the Design tab. Once done with the design, click the green checklist icon to save the new changes.

Now, navigate to the right column and add the “Woo Title” module. Same as before, select “This Product” from the Product option in the Content block. From the Design tab, you can style the title, and set the text color and typography.

Once we are done with the Woo Title Module we will add the following module one by one in a similar process,

• Woo Rating
• Woo Price
• Woo Description
• Woo Add To Cart
• Woo Meta

Finally, it will look like this,

In the third row, we will use the “Woo Tabs” module and the “Woo Related Products” module. 

The process is similar to the previous one, add a new row by clicking the green plus button > select the single-column structure > add the Woo Tabs module.

The Woo Tabs module comprises three tabs: Description, Additional Information, and Review. To disable a specific tab, navigate to the Content block and uncheck the corresponding tab in the Include Tabs option.

Now add the Woo Related Products module in the same process. From the Content tab you can set the product count, column layout, and product categories, also style this module from the Design tab option.

Once you are done with adding all the modules we discussed, save your changes by clicking the bottom-right Save button and exit the Divi Builder editor with the top-right X icon. Finally, apply changes on the Theme Builder page by clicking Save Changes.

This will be the final template design,

Create Shop Pages

When using the setup wizard, WooCommerce automatically generates a default page called “Shop,” which serves as the product feed display. With Divi Builder, you have the flexibility to design a personalized WooCommerce Shop page where you can incorporate additional elements of your choice alongside the product feed.

Here is the process,

• On your WordPress dashboard go to Divi > Theme Builder. 
• Add a new template by clicking the plus button. 
• Click “Build new template” to build from scratch (Select “Add from library” if you want to upload any ready one.)
• Then select “Shop” on the “WooCommerce Pages” block (here we are making a template for the Shop page)
• Click on the “Create Template” button.

Once the template is added, click “Add Custom Body” and select “Build Custom Body”

Now it’s time to add a module. 

Before you can add a module, you must first create a row. Simply select a row, then search for Woo module and select Woo Products. It will automatically display the latest products by default.

To modify the default feed, navigate to the Content tab in the settings panel. In this section, you have the option to adjust the displayed products’ quantity, the number of columns, and the product layout. To enable pagination, go to the Elements block in the Content tab of the settings panel, and turn on the Show Pagination option.

To customize the appearance of the module, navigate to the Design tab. Within this tab, you’ll find approximately 15 design options that you can modify. These options allow you to adjust various aspects, including typography (font family, size, style), product elements (price, title, sale badge), text color, image size, and more.

Once you are done click the green button in the bottom-right corner to save your changes. Now, click on the  X icon in the top-right corner to exit the Divi Builder editor and get back to the Theme Builder editor page.

On the Theme Builder page, click the Save Changes button to apply the change you have just made.

Create a Product Category Page

We will now create the Product Category Page, which is mostly similar to the creation of a “Shop” page. You can create multiple custom product category pages as needed.

• Go to Divi > Theme Builder. 
• Add a new template by clicking the plus button. 
• Click “Build new template” to build from scratch 
• Then select “All Product Category Pages” from the “Archive Pages” section
• Click on the “Create Template” button.
• Next, click Add Custom Body > Build Custom Body

Creating a Product Category Page is almost similar to Shop page creation. We will follow the same procedure here. 

Simply select a row and then add the Woo Products module. It will automatically display the latest products by default. Make sure to toggle “Use Current Page” from “NO” to “YES” under the Content tab. Now edit/design the rest according to your preference. 

Now we will add a WooCommerce Product Category page header using the Post Title Module. First, we need to add a row and then add the post-title module. We toggle “Show Meta” and “Show Featured Image” to “NO” under Elements, as we only desire the title to be shown here.

After saving this module, you’ll notice placeholder text that says ‘Your Dynamic Post Title Will Display Here.’ This text is simply a temporary placeholder for your category title, so no need to worry.

Now we will add the Breadcrumb Module. Make sure in the “Product” setting “This Product” is selected, as it determines the dynamic category title. Then you can make additional design changes from the Design tab.

We are done here. To save your changes in the Divi Builder editor, click the bottom-right “Save” button. Then, exit the editor using the top-right “X” icon. Finally, apply the changes on the Theme Builder page by clicking “Save Changes.”

The final output of our WooCommerce Product Category Page will look like this,

Create a Cart Page

To build a WooCommerce cart page with Divi Builder, you can utilize the Woo Cart Products and Woo Cart Totals modules. These modules allow you to showcase a list of products added to the cart, along with a convenient checkout button.

The process is almost similar to the creation of the product page. 

• On your WordPress dashboard go to Divi > Theme Builder. 
• Add a new template by clicking the plus button. 
• Click “Build new template” to build from scratch 
• Then select “Cart on the WooCommerce Pages block
• Click on the “Create Template” button.
• Next, click Add Custom Body > Build Custom Body

You can display cart products using the Woo Cart Products module and show the total added products in the cart using the Woo Cart Totals module. Later you can customize the layout with additional modules. 

Save your changes by clicking the bottom-right Save button and exit the Divi Builder editor with the top-right X icon. Apply changes on the Theme Builder page by clicking Save Changes.

Create a Checkout Page

The process of crafting a checkout page using the Divi Builder is closely similar to the steps for creating a custom cart page mentioned earlier. To accomplish this, you can utilize 5 different modules (Woo Checkout Billing, Woo Checkout details, Woo Checkout information, Woo Checkout Payments, and Woo Checkout Shipping), which will effectively showcase the checkout form as follows:

So, here’s the process.

• Go to Divi > Theme Builder. 
• Click the plus button to Add a new template
• Click “Build new template” to build from scratch 
• Then select “Cart on the WooCommerce Pages block
• Click on the “Create Template” button.
• Next, click Add Custom Body > Build Custom Body

Search for the module we have mentioned before and customize them on the settings panel. Once you are done customizing you can use other modules according to your needs.

Save your changes by clicking the Save button in the bottom-right corner and quit the Divi Builder editor by clicking the X symbol in the top-right corner. Save modifications on the Theme Builder page to apply changes.

Create a Customer Account Page

The WooCommerce Account page will be automatically created for you after installing and activating WooCommerce. To edit this page, follow these steps:

• From the WordPress Dashboard, go to Pages > All Pages.
• Locate the “My Account” page from the list of pages, then click on “Edit.” You can directly navigate to the Divi visual builder page by clicking “Edit with Divi”.
• Within the Account page editor, you will see the WooCommerce Shortcode responsible for generating the Account Page content.
• Click on the “Use Divi Builder” button to launch the Divi Builder, which will allow you to customize the page using the powerful Divi Builder tools.
• Next, on the appearing dialog, choose the option on the left and click the “Start Building” button to initiate the customization process.
• The WooCommerce Shortcode will be automatically placed into a text module within the Divi Builder. It will look like this,
• Now, you can customize the layout of the WooCommerce Account page using the design options of the module, also add your preferred design options including header, background color, text positions, etc. 
• Once you are done with the customization, save your changes by clicking the Save button in the bottom-right corner and then click the “Exit Visual Builder”

This is the account page before a user logs in,

This is the account page after a user logs in,

Test and Launch Your Shop

Testing and launching your WooCommerce website is a critical phase in the website development process. It involves thorough testing to ensure that your online store functions properly, is user-friendly, and is ready to go live for your customers. 

Here are the steps involved in testing and launching your WooCommerce website:

1. Functional Testing:

• Check all the essential functionalities of your website, such as adding products to the cart, proceeding to checkout, and completing a purchase.
• Test various payment gateways to ensure they are processing payments correctly.
• Verify that order confirmation emails are sent to customers after a successful purchase.

2. Responsive Testing:

• Test your website on various devices and screen sizes, including desktops, laptops, tablets, and smartphones.
• Ensure your website’s layout and content adapt well to different screen resolutions.
• Verify that all elements, such as buttons and images, are displayed correctly on mobile devices.

3. Load Testing:

• Use load testing tools or services to assess your website’s performance under heavy traffic.
• Ensure that your hosting server can handle multiple simultaneous users without significant slowdowns.

4. Checkout Process Testing:

• Go through the entire checkout process as a customer to identify any potential hurdles or confusing steps.
• Ensure that the checkout process is smooth, easy to understand, and requires minimal steps for customers to complete their purchases.

5. Test Emails:

• Verify that all automated emails, such as order confirmation, shipping notifications, and password reset emails, are working correctly.
• Check that these emails are being delivered to customers’ inboxes and not ending up in spam folders.

6. Final Review:

• Conduct a final review of your website’s content, design, and product information to ensure accuracy and consistency. 
• Verify that users can create accounts and access their account information by testing the user registration and login process.

7. Backup Your Website:

• Create a full backup of your website, including the database and all files, before the final launch.

8. Launching Your WooCommerce Website:

• Once you’ve completed all the testing and are confident that your website is functioning correctly, it’s time to launch.
• Remove any “Under Construction” or “Coming Soon” pages and make your website accessible to the public.
• Announce the launch of your WooCommerce store through your social media channels, email newsletters, and other marketing platforms.

Wrapping Up

Building an online shop with Divi is a seamless process, thanks to its wealth of features, extensive customization options, and the integration of WooCommerce and the Woo module. You can easily build a WooCommerce website with Divi, and showcase your products and services in a professional and visually appealing manner.

With Divi Builder, you can craft a custom WooCommerce-powered store without the need for coding, allowing you to focus on growing your business. Its WooCommerce builder allows you to design custom pages for essential elements such as the shop page, cart page, and checkout page, tailoring your eCommerce site to suit your brand’s identity.

Follow the process discussed above and embrace the power of Divi’s Woo module. Enjoy a time-efficient solution for presenting your products beautifully, making your online store stand out effortlessly.