Build an ecommerce store in one hour with the Divi theme

Build an ecommerce store in one hour with the Divi theme from elegant themes. Our starting setup is a fresh install of the latest edition of WordPress. The first thing we need to do is get our theme. Today we are using the Divi theme from elegant themes. When the theme has been downloaded from the elegant themes site, we can upload it to all WordPress install. Once uploaded we need to make this the active theme.

Now that our theme is installed, we are going to select a template from the many that come bundled with the Divi theme. I have my products already, I have exported them from another eCommerce website that I have. If you need to learn how to set up a simple product, watch this video. For a variable product watch this video. To learn how to export and import products see this video. As the products I have imported are all clothing, I have selected a fashion website template.

‘Now that the template has been installed, the next thing to do is to add the woocommerce plugin. Woocommerce is a fantastic plugging that enables you to sell just about any kind of product online. For an e-commerce store it really is the only plug in to use. To install woocommerce, go to your dashboard down to plugins, go to the plugins page and click the ‘add new’ button at the top. Now click in the search box and type ‘woocommerce’. This should find the plug in for you. When it appears, click the install button, and then the activate button, it may take a few moments. When it is activated woocommerce will prompt you to configure it. Follow the simple on-screen prompts to set it up the way that is going to work for you.

The woocommerce plug-in is now installed and configured, all products have been imported, and we have selected the theme for our site. The next thing to do is go to the page that we loaded the template on, and set up the Divi store module correctly. Click on the white cog icon on the dark grey tab to edit the module. Once inside the module select a product or product categories that you wish to display and hit the save button. This will automatically pull the products that you have selected into this module.

To set up the next pages such as about us, shop and contact etc… We will repeat the process that we used before. Add a new page, select build with the Divi Builder, then click on browse layouts, and select the appropriate template for the page that you would like to add. When you have created the pages that you wish to create, we will need to build a custom menu to display the pages that we want to show our customers.

Creating the menu is very simple. Return to the dashboard, go down to appearance, click on it and select menus. When the menu page opens up, select create a new menu at the top of the page. Add the pages that you need to add to your menu from the tabs on the left hand side. You can reorder them easily by left clicking, and dragging them to the position that you wish to have them. I also want to add some of our product categories as pages on their own. To do this, we need to go up to the top of the screen, click on the ‘screen options’ tab. When it opens, put a check in the box next to product categories, by default these will not show in the left-hand tabs until you do this. Now that the product categories are visible in our left-hand tabs, we can add them exactly the same way as we added the pages. If you wish to make any of these Sub menu items, simply left click and drag them below the item you want them to be a sub item of, put them underneath and drag them slightly to the right, this will offset them, and they will appear as a sub menu item. When complete hit the ‘save menu’ button to save the menu.

Now that the menu has been created we need to assign it to all primary menu. To do this we need to go to the theme customizer. Go to the dashboard again, go down to appearance, click on it and select customize. This will open the theme customizer. Scroll down to menus, select locations, with the dropdown select your new menu and assign it to the primary navbar.

Because we have added the product categories as pages, I would now like to set up a custom template for them using the Divi theme builder. This will change them from the generic looking category pages, into a page that is more in line with the styling of our theme. To do this we need to go to the dashboard again, down to Divi and select the theme builder. Here we can assign our new theme to all categories pages, and customize them the way we need to, so that they look like other regular pages.

As we now have most of all pages in place, all that is left is our contact page. Our contact page has a full width Google Map on it, this is a nice feature, but sometimes when Google changes its map data, it can throw up an error in the Divi Google Map module. To get around this if you need to, you can simply go to the location that you need with Google Maps, hit the share button, copy the code, and paste it into a code module if the maps module is not working for you.

That’s pretty much it, our site is almost complete. The only thing left to do is go into the contact form module, and add the email address that we want the form to be sent to. When this has been done our site is complete. That is how easy it is to build an ecommerce store in one hour with the Divi theme.