[ad_1]
eCommerce is gaining popularity as a lucrative online money-making business. That’s why; people are searching for the perfect WordPress themes, which offer the most beautiful designs and settings with eCommerce compatibility.
Also read:
– WooCommerce Product Filter – The Best WooCommerce Filter Plugin?
– 21 Must-Have WordPress WooCommerce Plugins You Need For Your Store
To launch a successful online WooCommerce store, you will have to get a WordPress WooCommerce theme that perfectly fits your business goals. Plus, the theme must offer attractive and stunning shop styles with quick and practical solutions.
The Divi theme comes with perfect WooCommerce compatibility and rich-features, including Divi’s Shop Module. The incredible Divi shop modules let you display your products instantly with innovative and modern looks.
In this article, we will put in plain words the step-by-step procedure of how you can integrate WooCommerce plugin with Divi theme and achieve the extra ordinary.
We will also discuss how you can establish your eCommerce store using the Divi Shop module and start selling your products quickly.
Prerequisite:
- Divi WordPress Theme
- Free WooCommerce Plugin
Why is WooCommerce the #1 Choice for Creating an eCommerce Store?
WooCommerce is a robust eCommerce store that is being used by about 2.3 million eCommerce stores.
WooCommerce comes with several essential features that help in creating and managing online stores efficiently.
WooCommerce has multiple helpful features along with its secured payment options that are a cost-effective solution, otherwise purchasing any third-party plugins or extensions may add cost to the budget.
WooCommerce offers flexibility to its users, and you can sell anything ranging from physical products, digital products, and subscriptions.
Some other incredible features include more than 100 payment gateways that can be easily integrated into your store website. Also, multiple shipping methods that are configurable with shipping zones.
In a nutshell, WooCommerce is a compact eCommerce solution that is fast, reliable, and easily adjustable to your eCommerce business needs.
Given that, WooCommerce seamlessly integrates with Divi theme, and you can create an amazing store by using Divi Shop modules, which are highly customizable as per your business goals.
How to Set up WooCommerce plugin?
Setting up the WooCommerce plugin is a simple and straightforward procedure. Once you have installed the WooCommerce plugin, an automatic setup wizard will walk you through all store’s configuration settings.
Once you enter into the setup wizard, then click the “Let’s Go” button to start the setup.
In the setup menu, the “Page Setup” will provide you information that all the essential pages will be automatically created if you haven’t created any yet.
In the “Store Locale” page, you will have to enter information about your store’s location, currency, preferred weight, and dimension units.
The next step requires you to enter information regarding your shipping procedure.
Either you would be shipping physical products and charge the sales tax or not. You can also modify the settings later on.
In the end, you will be asked you do you want to receive your money, i.e., the Payment method.
You can select whichever payment gateway suits to your needs. WooCommerce comes with more than 100 payment gateways integrations that are worldwide accepted.
Once you are done with all the setup procedure, a “Store’s Ready page” can be visualized. And you can start adding your products to sale.
For a more detailed step by step guide, you can also check our in-depth WooCommerce tutorial here.
Now, when your store page is ready, you can start adding your products using Divi shop Modules.
I am assuming that you already have the Divi theme installed on your WordPress site.
How to Add Products Using Divi Shop Modules?
Divi comes with dazzling shop modules that easily sync with your product categories with a plethora of customization options.
You can arrange, organize, and readjust your products with easily customizable options in the shop pages. Here is how you can add products to your shop pages.
Step 1: Create Your First Product
Once you are done with the setup wizard, the next step is to create your first product.
Go to Products -> Add New in the dashboard area. Click on the “Add New Product” tab and edit the product name in the title box and then start adding its description in the main content area.
In the left menu bar, below the General tab, you will see all other necessary settings regarding inventory, shipping, and additional information. Put all the information in the relevant fields.
Right below this section, a product short description section will be visible, and this section will appear in the listing pages alongside the product images. And on the right-hand side of the image, another part is visible where you can add the image of the product.
Go to the product image section -> click on “Set Product Image” -> upload the product image. You can add as many pictures of your products as you like to the Product Gallery section.
In the last, you will have to select the product category because the shop module needs to know in which category you want to place your product.
Now, publish your product and move to the next section where you can create a page to display your product.
Step 2: Create a Page to Add Products.
Now, when you have created your first product, you’ll need a page to display your products. If you have installed WooCommerce and gone through the setup wizard, a blank page with “Shop” name would be appearing, and if it doesn’t appear, you can create it manually.
Go to Pages -> Add New page -> select “Use the Divi builder“.
You can style your shop in any way you like to. For example, you can create a layout that matches your website layout or any existing website layout, or you can go completely different by creating contrasting designs to present your products innovatively.
Or you might like the pre-built shop layout by Divi builder. These pre-built layouts can be accessed through the “Load from Library” option.
From this Library option, you can choose which shop layout compliments your shop style.
Step 3: Insert Your Shop Module
Once your shop page is created, you need to add products to your shop pages. If you like to create any custom shop page layout, click on the insert Module.
Click on the insert module tab and then scroll down to select the shop tab.
When you click on the shop, you’ll come to the General setting tab where you can customize the layout of the module. In this shop layout, you can select which products you want to display from your best selling, new product, or a new product category.
In the advanced design, settings select how many products you wish to show and how many columns should be displayed. And at the final step, you will have to choose in which order you want to showcase your products. You can order your products by price, date, or rating.
Step 4: Style Your Layouts
Once you are done with the layout of your shop, the next step is to style your shop. If you click on the Advanced Design setting tab, you can see comprehensive options for styling your shop, such as font colors, hover, hover overlay, title, and price fonts.
Style your Shop With More than Five Shop Modules
Divi comes with highly customizable shop modules, and you can choose from more than five product display modules to showcase your products amazingly.
Let’s discuss how the default shop module looks like.
1. The Default Shop Module
This is how your default your products are going to showcase using the default shop module.
The general steps involved in all Divi shop modules are as follows:-
- Create a new page from the “Page section“.
- Select the “Use the Divi Builder” tab.
- Click on the insert column section.
- Select how many products to display in a row
- Click on the insert Module and then select “Shop“.
- This one leads to the general setting area.
- Select the category you would like to display.
- In posts, Number section select how many products you want to display on the homepage.
- In the column, number select how many columns you want to display.
- In the advanced setting area, you can change the color, font, and background of the product images.
Here are the five shop modules which you can select and apply the settings as mentioned earlier.
2. Flat Card Shop Module
This is the most straightforward yet elegant shop module where you can display your product within three-column, and you can also change the background color and font styles by using the Custom CSS tab.
3. Material Cards Shop Module
This material card module creates excellent texture and concentration by adding shadows in the images. In the above example, we have created six products in 3 columns, respectively. The title font was selected to be size 18, while the pricing font was chosen to be size 17.
4. The Minimal Overlay Shop Module
This shop style focuses on the minimalistic view of the viewers. You can see that there is no price or title tag is included because when they hove over the image, the only icon will be visible.
In this example, only three products are selected in three column styles.
5. Closed Grid Shop Style
This shop style is conducive to displaying your products creatively. For this module, you will have to create a separate Divi shop module for each tile, and for this purpose, click on the insert column and insert three tiles labeled as “1/3”.
Now you can clone the whole column and drag and drop the copies to the other two columns.
6. Irregular Grid Shop Module
For this type of shop module, you can combine two rows of Divi shop modules. In the above example, you can stack a row of three columns above the row of five products and five columns.
To get this look to create a Divi shop module with general settings of three posts with three columns and then add a row below it. Later in the row inserted below, you can select a shop module with five products and five-column, and to remove the title and price tags, add the same shortcode of invisibility as mentioned below.
Over to You – How to Build a WooCommerce Store using Divi Theme Builder from Elegant Themes?
You can see in this tutorial that creating a well-designed and eye-catching online store is no more a complicated task with the help of the WooCommerce and Divi theme. Divi theme comes with a plethora of customizable options that help you in creating your desired shop display. Once you have installed the WooCommerce plugin and Divi theme, you can quickly start your online shop by simply entering your products and inserting a shop module, which we have explained earlier.
Moreover, you can style your shop module in several ways, and the Divi theme comes with five in-built shop modules that can be further customized as per your business need.
Although the WooCommerce plugin would be suffice for any beginner, additional WooCommerce extensions are recommended for creating an advanced store with more robust features.
I hope you find it easy to kick start your ideal online store with Divi theme and WooCommerce combination. Do tell us your opinion on how did you find this article and send us your queries if you find anything challenging to start with.
[ad_2]
