Martin TolovskiEver since eCommerce took over the world, it has revolutionized the way we shop and do business. It has made it easier for people to purchase products and services online, and it has made it easier for businesses to reach a wider audience.
Nowadays, if you want to start your own eCommerce business, there are many tools and platforms available to help you get started. Of course, one such platform is Divi, our WordPress Theme and Builder of choice that is widely used for building websites.
Divi is a versatile theme that can be used to create a wide range of websites, including an online shop. This is all due to its wide range of features and options that make it easy to customize your eCommerce website and make it look professional.
Without further ado, here are the key steps you need to take to set up an online shop with Divi.
Table of Contents
- FAQs About Setting up Online Shop With Divi
- Divi and WooCommerce
- Step 1: Install WordPress and Divi Theme
- Step 2: Set up Your WooCommerce Store
- Step 3: Create Product Pages
- Step 4: Insert the Shop Module
- Step 5: Test and Launch Your Shop
- Wrapping Up
FAQs About Setting up Online Shop With Divi
- What is Divi, and how can it help me set up an online shop? – Divi is a popular WordPress theme that comes with a built-in page builder, making it easier to design and customize your website without any coding knowledge. You can use Divi to create a beautiful online shop with ease.
- Is Divi compatible with popular e-commerce platforms? – Yes, Divi is compatible with popular e-commerce platforms like WooCommerce, Easy Digital Downloads, and Shopify. This makes it easy to integrate your online shop with your website.
- Can I customize the design of my online shop with Divi? – Yes, you can customize the design of your online shop with Divi. The theme comes with a drag-and-drop page builder that allows you to create custom layouts, add new modules, and adjust styling options.
- Can I use Divi to create a mobile-friendly online shop? – Yes, Divi is designed to be mobile-friendly, with responsive design options that make it easy to create a website that looks great on any device.
- Does Divi come with eCommerce-specific features? – Divi doesn’t come with e-commerce specific features out of the box, but you can use plugins like WooCommerce to add functionality to your online shop. Additionally, Divi offers a range of modules that you can use to create product pages, shopping carts, and other eCommerce-related elements.
- How easy is it to set up an online shop with Divi? – Setting up an online shop with Divi is relatively easy, especially if you have some experience with WordPress. The theme comes with a range of templates and pre-built layouts that you can use as a starting point, and the drag-and-drop page builder makes it easy to customize your site to your needs.
- Can I use Divi to create a multilingual online shop? – Yes, Divi is compatible with popular multilingual plugins like WPML and Polylang, making it easy to create a multilingual online shop.
- Is Divi SEO-friendly? – Yes, Divi is designed to be SEO-friendly, with built-in options that make it easy to optimize your site for search engines. Additionally, the theme is optimized for fast loading times, which is an important factor in search engine rankings.
- Can I get support for my online shop built with Divi? – Yes, Divi offers support through their website and forums, as well as a range of documentation and tutorials to help you get started with your online shop. Additionally, there are many third-party resources available that can help you troubleshoot any issues you may encounter.
Divi and WooCommerce
Divi is the way to go for your WooCommerce site because it lets you unleash your creativity through an intuitive, drag-and-drop visual editor.
Plus, you can save your customizations as global elements that can be used across all your layouts, providing you with unprecedented control and flexibility.
Not only that, but the Divi theme also comes with over 2000 pre-built website layouts that are elegantly designed and fully customizable. Best of all, you can export these layouts and use them on other websites with ease.
What’s more, all of Divi’s WooCommerce layouts have been optimized for mobile devices, so your customers can shop on-the-go with ease.
Step 1: Install WordPress and Divi Theme
The first step in setting up your online shop with Divi is to install WordPress and the Divi theme. Now, if you don’t already have a WordPress site, you can sign up for hosting and install WordPress from your hosting provider.
But what if you’re just getting started and you don’t know where to begin? Don’t worry, being slightly intimidated before you launch your online shop with WordPress and Divi is normal. Here are the steps to successfully kick-start the process:
Choose a WordPress Plan
To begin creating your online shop, you’ll need to select a WordPress plan. Whatever your budget is, WordPress has your back!
However, if you’re truly serious about selling online, you’ll need to begin with one of WP’s Business plans, especially the WooCommerce Plan:
The Commerce plan includes the following benefits:
- Free domain for one year: Get a custom domain – like yourgroovydomain.com – free for the first year.
- Sell and ship products: Sell and ship out physical goods from your site.
- Store customization: Offer customers a personalized shopping experience that they cannot find anywhere else.
- Inventory management: Stay on top of your stock with inventory management tools.
- Easy checkout experience: Reduce cart abandonment and increase sales with a fast, low-friction checkout.
- Payments in 60+ countries: Accept payments for goods and services just about anywhere.
- Sales reports: Stay up to date on sales and identify trends with intuitive sales reports.
- Integrations with top shipping carriers: Ship physical products in a snap and show live rates from carriers like UPS.
- Extensions marketplace: Choose from the myriad of available eCommerce add-ons.
The key difference between the plans are the monthly fees, as well as the access to the specific tools and options that any of the plans offers for your Divi website.
Set up Domain and Hosting
In most cases, setting up a domain name and hosting is performed during the process of creating your online store. A domain name is the unique name that identifies your website online. For example, “www.example.com” is a domain name.
When you purchase (or if it’s included with your WP plan) a domain name, you have the exclusive rights to use that name for your website.
Hosting, on the other hand, refers to the service that allows you to store your website’s files and data on a server. A web hosting service provides a space on a server where you can upload your website’s files, images, videos, and other content.
In the case of WordPress, hosting is essential because it is a software application that requires a web server to run. You need to install WordPress on your hosting account to create a website.
Installing WordPress
Keep in mind that if you’re using hosting that is not included with your WordPress plan, you will need to install the CMS and connect it with your domain name, which can be a bit tricky if you’re a beginner.
Luckily, the community offers excellent tutorials on this, so you wouldn’t have any issues whatsoever if that’s the case:
NOTE 1: Keep in mind that if you opt for a managed WordPress hosting service such as WP Engine or Kinsta, you can skip the installation process altogether. These providers are tailored to WordPress, and therefore, WordPress will already be pre-installed for you.
NOTE 2: You can also choose a Divi Hosting as another effortless option. With Divi Hosting, Divi is installed and activated with your license key automatically. Plus you get the benefit of fast WordPress hosting that meets all of Divi’s requirements.
Once you have WordPress installed and you’ve set up your domain name and hosting, you’ll need to download and install the Divi theme from the Elegant Themes website.
Installing Divi
Divi was built with eCommerce at its core!
Divi offers a powerful visual builder that grants you complete autonomy over your WooCommerce product pages, checkout pages, cart pages, and beyond.
Utilizing the Divi Theme Builder, you can tailor your store to your liking from start to finish without the need for coding expertise.
Moreover, Divi is home to a host of exclusive conversion-optimization tools, including A/B Testing and Condition Options, as well as seamless social media integration and support for countless email marketing services.
Whatever your aspirations may be, Divi has the tools to help you thrive in the online world. The necessary steps for installing Divi are in the following video tutorial:
NOTE: Keep in mind that if you’re using one of Divi’s partner hosting accounts, the theme will be automatically installed for you. For an external hosting service, use the video tutorial above.
Step 2: Set up Your WooCommerce Store
The powerful combination of the Divi Page Builder and Divi Theme offers just about everything you need to build a top-notch WooCommerce store with all the necessary eCommerce capabilities.
Simply install the WooCommerce plugin from the WordPress plugin repository, and you’re ready to start selling your products online.
The setup process is actually very straightforward, thanks to the ‘onboarding wizard’ that WooCommerce have carefully prepared for everyone looking to launch an online store.
Once you’ve installed and activated the plugin, you’ll automatically be taken to the setup wizard, where you will need to configure the WooCommerce settings for your Divi store.
The process of configuring the WooCommerce settings for your Divi shop includes setting up your store’s profile, location, currency, taxes, shipping options, and payment methods.
In this step you provide the location of your store and if you’re setting up a store for a client. This information will be used to prefill the Store Address fields in the Settings – General.
You’ll need to include the following information:
- Store Industry: Choose in which industry or industries your Divi store operates. If you select “Other” you’re able to identify a different industry.
- Types of Products: Designate which product types you plan to sell in your Divi store and learn more about some types of products, such as Memberships or Subscriptions.
- Business Information: Provide more information about your business, which will help you tailor the WooCommerce experience according to your needs.
- Shipping Information: Confirm your store’s location or add it if you haven’t done it before. You can also set the shipping costs for your country and for the rest of the world as well. Adding shipping costs for the rest of the world can be disabled in this step.
- Taxes Information: You can use WooCommerce Tax, use Avalara, set up taxes manually or not charge sales tax.
- Payments Information: In this step, you can select and activate one or more options to accept online payments and offline payments. All payment extensions are free and we automatically install and activate them upon selection.
Step 3: Create Product Pages
With WooCommerce installed and configured, you can start creating product pages for your Divi shop site.
Of course, Divi makes it easy to create custom product pages with its drag-and-drop page builder, but still, you can use pre-made templates or create your own custom designs.
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.
If you’re new to using the Divi Builder, open the Elegant Themes documentation page for getting started.
Adding a Simple product is similar to writing a WordPress post.
Navigate to WooCommerce > Products > Add Product, and the familiar interface should make you feel at home.
Then, enter the product Title and Description, and go to the Product Data panel to choose if you’re selling a downloadable (digital) or virtual (service) product.
Step 4: Insert the Shop Module
In addition to product pages, you will also need to use Divi’s Shop module for your online store.
For example, MLM businesses can use the shop module to showcase the products that they offer, with each product being displayed as a separate item in the store.
Real estate companies can use the shop module to showcase available properties. Instead of creating traditional product pages, they can use the module to create property listings, with each listing featuring images, descriptions, and pricing information.
In both cases, you can use the shop module to create custom layouts and add branding elements like logos and colors to make your store or property listings unique. You can also use the module to create categories or tags to help users easily navigate and find the products or properties they are interested in.
The Shop module will display your products in an organized manner, making it easy for customers to browse and find what they’re looking for. Again, Divi’s page builder makes it easy to create custom shop and category pages that match your branding and style.
New modules can only be added inside Rows. If you are starting a new page, don’t forget to add a row to your page first before you add the Shop module.
Locate the Shop module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word “shop” and then click enter to automatically find and add the shop module!
Once the module has been added, you will be greeted with the module’s list of options. These options are separated into three main groups: Content, Design, and Advanced.
You’ll be 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.
Step 5: Test and Launch Your Shop
With everything set up and configured, it’s time to test your site and ensure everything is working properly. Here are some necessary steps in order to test your Divi shop:
- Test the checkout process: The checkout process is one of the most important parts of your online shop. Add a product to your cart, fill out the checkout form, and complete the purchase using different payment methods.
- Test product pages: Make sure that product pages are working properly, including the product images, descriptions, pricing, and availability.
- Test site performance: Use tools like GTmetrix or Google PageSpeed Insights to test the speed and performance of your website. Slow loading speeds can impact the user experience and may result in lost sales.
- Test mobile responsiveness: Ensure that your website is optimized for mobile devices, as more and more people are using their phones to browse and shop online.
- Test website functionality: Test all links, buttons, forms, and other interactive elements on your website to ensure they are working properly.
- Test user accounts: Test the user registration and login process to make sure users can create accounts and access their account information.
- Test customer service: Test your customer service channels, such as email, phone, or chat, to make sure they are working properly and that you are able to respond to customer inquiries in a timely manner.
By testing your Divi shop thoroughly, you can identify any issues before launching your website to the public, which can help to ensure a positive user experience and increase the likelihood of sales.
Wrapping Up
Setting up an online shop with Divi is relatively easy, thanks to its range of features and options, as well as the ease of customization that WooCommerce and the Shop module provide.
With a little bit of effort and creativity, you can create a professional-looking eCommerce website that showcases your products and services in the best possible way!
To showcase your products, you’ll want a quick and simple to use solution that also delivers stunning and practical results.
Whether you’re starting a new business or looking to expand your existing one, Divi is a great platform to use for your eCommerce site.
Try Divi Areas Pro today
Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
Many pre-designed layouts. Automated triggers. No coding.
Click here for more details
More Articles You Will Like
