WooCommerce has earned its place as one of the most popular e-commerce platforms on the market. As a free, open-source WordPress plugin, it offers the right combination of power and simplicity that budding e-commerce entrepreneurs demand.
But WooCommerce isn’t just for new online retailers. It’s also an incredibly versatile and highly customizable platform for large online enterprises. One out of every five of the top 1 million e-commerce websites runs on WooCommerce.
This kind of scalability makes the platform an attractive choice for non-technical entrepreneurs who want to build their own online retail store. But you’ll need more than just WooCommerce to make the most of it.
In this piece we’ll show you how to leverage Elementor’s WooCommerce website builder to create a stunning, comprehensive online store.
Start with Hosting, Domain, and WordPress Installation
Before you get a chance to start configuring your store and building product pages, you’ll need to get your WordPress website up and running. This isn’t a complicated process, but it does involve a few steps.
Step 1. Select a web hosting plan
Before you can publish anything, you’ll need to host your own website. Web hosting providers give you server resources you can use to deliver content to website visitors. There are many different types of web hosting packages out there, and they differ widely from one another.
Many first-time web entrepreneurs start with a shared hosting plan. These are by far the cheapest options available, but they come with severe limitations. With shared hosting, your web host distributes a single server among multiple different websites. Your own website may not reliably receive the resources it needs, leading to performance issues.
Dedicated options are more costly, but offer important performance guarantees. A dedicated server only runs your website. You have total control over how it functions, and can optimize it to meet your needs exactly. This requires some technical experience, however.
Cloud managed hosting offers the best of both worlds, guaranteeing performance without requiring you to configure your own dedicated web server. Your website is hosted on scalable cloud servers infrastructure distributed across a software-defined network. Your provider takes care of network management, server configuration, and cybersecurity on your behalf.
Step 2. Choose a domain name
Once you have your hosting package ready, you can begin the process of registering your domain name and publishing it to your server. You’ll need to purchase your domain name from a registrar like GoDaddy or NameCheap. Most available names are very inexpensive, but if you want a name that’s already taken you could end up paying top dollar for it.
Your domain name should represent your e-commerce brand in a memorable way. In most cases, it should give some kind of hint as to the products you plan on selling. Of course, major online retailers like Amazon and Etsy thrive with non-specific names, but that doesn’t mean you should too. Remember, these companies have been around for decades already.
Today’s e-commerce marketplace is competitive and mature. You’ll need to capitalize on a niche to succeed, and your domain name gives you a great opportunity to do that.
Step 3. Install WordPress
Once you’ve purchased a hosting plan and connected a domain name to it, you’re ready to install a content management system. This is the tool you will use to create and deploy website content and functionalities. Everything from the text on your homepage to the abandoned shopping cart email you want to send is organized and configured from here.
WordPress is by far the most popular content management system out there, and it’s a must-have for using WooCommerce. To install it, follow your host’s instructions to access your website and enter its cPanel. Some hosting companies provide automatic installers with detailed instructions. Others require you to download WordPress manually and follow its instructions.
Be mindful of the difference between WordPress.com and WordPress.org. The former is a specific implementation of the latter. When most people say “WordPress”, they’re talking about the free, open-source content management platform available on WordPress.org. That’s the one this article focuses on, and the one you should use to run WooCommerce and Elementor.
Note: You can actually skip these first three steps by starting out with an Elementor Cloud Website. This is a one-stop solution that provides WordPress pre-installed on a cloud hosted web server on a .elementor.cloud domain – everything you need to dive right into building your WooCommerce store.
Step 4. Install WooCommerce
After you install WordPress, you can begin outfitting your website with valuable plugins. Almost any feature or functionality you might want on your website exists as a plugin.
Plugins come in every size. There are huge, complex plugins that change nearly every aspect of your web experience and there are small, lean plugins that do only one thing exclusively. WooCommerce is a complex plugin with many features, but it’s also a relatively lightweight one.
That’s one of the things that makes it such a successful technology – it can produce professional results without weighing down web performance. When selecting plugins, you must always keep an eye on how they impact the speed and responsiveness of your website.
Setting Up WooCommerce, Step-by-Step
Once you install WooCommerce, it will launch an installation wizard. While you can skip the wizard and perform configuration manually, it’s not recommended. The installation wizard offers a comprehensive step-by-step process for deploying WooCommerce on your website.
Step 1. Provide essential data
The first thing you’ll have to do is input some vital information about your online shop. WooCommerce needs to know the country you’re based in, your address, and what currency you use. It also wants to know what type of goods you’re selling – physical, digital, both, or in-person services.
Step 2. Configure your payment gateway
You’ll also need to tell WooCommerce how you expect to receive payments. The platform supports multiple digital payment options like Stripe and PayPal. Stripe is generally the more robust option, while PayPal is much faster and easier to set up. You can also accept payments through offline gateways, like cash-on-delivery or direct bank transfers.
Step 3. Provide shipping details
Next, you can tell WooCommerce how you plan on shipping your products. This form provides basic shipping guidance based on the information you give it. You have the option to print your own shipping labels and set specific shipping costs as necessary. If you sell digital products, you can skip this part altogether.
Step 4. Tell WooCommerce about your business
WooCommerce wants to know a little bit more about your plans so it can make intelligent suggestions about how to improve your experience. The main thing it wants to know is whether you are digitizing an established business or starting a new one. It will also offer you some extra themes and integrations that might help you get started.
Step 5. Finalize WooCommerce setup
WooCommerce will ask you to sign up for its newsletter and provide you with some tutorial links before dropping you back on your management dashboard. You’ll see a prompt to apply the theme homepage template and start adding example products. This is a good way to familiarize yourself with how WooCommerce works before you start building out product pages with Elementor.
Now you’re ready to install Elementor
Like WooCommerce, Elementor is a plugin. That means you can install it in roughly the same way. From your WordPress dashboard, click on Plugins and hit Add New. Search for Elementor and select the Elementor website builder.
You’ll be led through an installation process similar to the one you just went through. You’ll create an account, answer a few questions about your website, and select between several software tiers.
Elementor’s basic version is free. It contains everything you need to create a stunning, high-quality website. However, it’s recommended you use Elementor Pro to incorporate e-commerce functionalities into your website, and make use of its advanced features to optimize the user experience and drive sales.
Elementor will ask you to enter your website’s domain so it can check its compatibility. As long as you downloaded WordPress from an official source, it will succeed. You can login into your website’s admin page, install the software as instructed, and click Activate Plugin to begin.
Why Use Elementor to Build Your WooCommerce Store?
While WordPress is a powerful and scalable content management system, it’s not the easiest to set up from scratch. Creating modern pages directly on WordPress requires writing an impressive amount of code in at least four languages: HTML, PHP, CSS, and JavaScript.
Even if you have the technical capability, there’s one more thing coding your own website takes: Time.
Elementor is a code-free website builder that lets non-technical users quickly create high-quality web pages that adhere to the latest user experience guidelines. It provides a clean, intuitive interface for e-commerce entrepreneurs to do what they do best – market and sell their products online.
Elementor makes it easy for you to quickly publish professionally designed product pages with an intuitive drag-and-drop editor. It provides you with advanced marketing tools like customizable popups and forms, and even offers complete Full Site Kits that include e-commerce functionality. Elementor makes it much easier to run an online store.
How to publish WooCommerce shop pages using Elementor
If you’ve gone through WooCommerce’s tutorial and created a few products, you’re ready to move on to the next step – creating pages for your products.
During installation, WooCommerce automatically sets up a new page called Shop, which you can assign as your homepage. Once you do that, you can use Elementor to start customizing it.
Before you begin, you must create a product archive. The easiest way to do this is by clicking on Templates, hitting Add New and then selecting Product Archive. You may choose from a set of pre-selected templates or start with an empty page. Your archive comes with a selection of WooCommerce-specific widgets:
- Archive Title
- Archive Products
- Archive Description
- Product Categories
- Products
- WooCommerce Pages
- WooCommerce Breadcrumbs
- Menu Cart
- Custom Add to Cart
You can change any of these if you wish. Once you hit Publish, Elementor will ask you where you want to display the template. If you choose your Shop page, it will show up on your main shop – the same page you selected as your website’s homepage.
If you’re not sure where to put the archive, don’t worry! You can always change it later, or put it in several places if you want. For now, the home page is a perfectly fine location for it.
You can also create multiple product archives and organize them according to categories. This is a good idea for improving search engine rankings. The better organized and less redundant your website is, the better it will perform in terms of SEO.
What about Checkout and Cart pages?
Some of the pages on your website serve important functions in the sales process. WooCommerce gives you default versions of these pages, but you can use Elementor to prominently express your brand through them. You can actually assign any page you want to fulfill these functions using shortcodes.
The shortcode widget tells Elementor to load specific kinds of unique content onto pages. In this case, we’ll use shortcodes to load WooCommerce checkout and cart functionality. Simply add the widget onto any page or template and paste the appropriate code:
- [woocommerce_checkout] tells Elementor to show the Checkout form on this page. It will show the corresponding form whenever a customer starts the checkout process.
- [woocommerce_cart] tells Elementor to include the WooCommerce Shopping Cart on this page. It will show the corresponding content whenever a user visits their shopping cart.
Of course, you’ll also need to point WooCommerce to these pages so it knows what to show your customers when they initiate checkout or look at their shopping cart. From the dashboard, go to WooCommerce, select Settings, click on Advanced, and select those pages accordingly.
Start your e-commerce business with WooCommerce and Elementor
When you equip your WordPress stack with WooCommerce and Elementor, you gain intuitive, scalable tools you can rely on for years to come. Both of these technologies allow you to simplify the challenges of running your own business, without forcing you to migrate to a new solution once your business grows. Start your career as a digital retailer the right way, and give yourself ample room to expand your business as it becomes more profitable over time.
PJ has a background in management consulting and software development. At DesignBro, he combines both. Personal favorite brand of PJ is Jeep.
