- How WooCommerce Stores were Built before Elementor?
- How WooCommerce Stores are Built with Elementor?
I’m about to make an announcement that will make one-half of our geek audience hate me. It’s quite simple - I am a Marvel hater and a DC fanboy.
Despite this fact, I enjoy hanging out in places where comic books meet coffee, and it doesn’t matter if it’s a Marvel fan base or something like that. I like communicating with the comic book fans, and it doesn't matter what 'religion' he or she follows.
Just in case you need a suggestion on the best WooCommerce theme to use for your next web project, we would advise you to take a closer look at Woostroid2. The flagship Woocommerce template has already received the record number of 1,000 downloads, and the popularity keeps growing bigger. The functionality and the collection of child themes expand with new stunning solutions with the release of every next update. Check out the live demo to see what's new.
Usually, I’m not there to have arguments about what’s good and what’s evil. I’m just finishing my morning coffee and reading comic books while setting my mind onto the working mood.
Oh, speaking of coffee. Is everyone ready for the new Twin Peaks season? I am so excited about it! I am currently reading the new book by Mark Frost - 'The Secret History of Twin Peaks.' It's a must for a real TP fan, and you should get yourself a copy!
Wait, I believe I am too distracted by Twin Peaks, my bad! Let's get back to my story.
Last Friday I was working on my new article in a coffee shop and having a friendly chat with one of the visitors. He was explaining to me how he left his last job and still didn’t sort his things out. I was curious about what he likes to do and what is he passionate about, and he said to me:
I am all about comics and being 35 years old I am thinking about starting my own shop for a few years now. I have a huge vintage comics collection and I have lots of connections among the other collectors, so I am kinda dreaming about starting a comic store with retro comic books. Too bad it’s just a dream and I have no coding or designing skills. Starting a retail shop is a crazy idea, the market is like a slaughterhouse now!
Many thanks for the inspiration, Frank, this article is for you and all the others who struggle. Let’s see how you can start your store using WooCommerce it’s simple as hell!
How WooCommerce Stores were Built Before Elementor?
Why WooCommerce?
WooCommerce is one of the best solutions in case you are about to open your own internet business. It will help you to establish a fully-functional store and start serving your customers in a blink of an eye. You will not even finish saying the word ‘Kryptonite’ and boom! Your first customer is here.
First of all, you should select a theme you want to use; we have plenty of ready-made solutions, we’ve got you covered with these WooCommerce premium themes.
- IT'S FREE
You will not have to buy a license for the WooCommerce. It's a plugin for WordPress and same as WP it's free.
- POPULARITY
This is the most downloadable e-commerce extension on the market, and that's for a reason.
- FEATURES
This plugin has more features than you can imagine. It will help you establish a store with all the functionalities you dream of.
- EASY TO SETUP
You can set everything up without asking for the help from someone more experienced.
- FAST INSTALLATION
Setting up your store will take less than one day, this is the fastest way to start selling goods online.
- WORKS WITH ANY THEME
You can setup the WooCommerce on any template you want; it will work fine.
WooCommerce Theme Installation Instructions
Everything starts with a template. Choose the right theme for your store, and it will become a great beginning and a good first step towards your e-commerce success. As an example I selected this template:
Organica - Organic Food, Cosmetics and Bio Active Nutrition WooCommerce Theme
Each and every theme in our store can work for any topic you want. It just takes a little more time to make the necessary changes, and you’ll get yourself a store for any niche you want.
Let’s assume that you, like Frank, would like to build the comic book store. The fact that this template was built for the Organic Cosmetic Products store should not scare you off, it is very simple to adjust it to your needs, and I’ll show you how.
Since I have already explained the basics of the WordPress installation, you can just check out my previous article on ‘How to make your website’ and then get back. Then we’ll be on the same page with you, and you’ll have the necessary knowledge for the further progress.
WordPress is Installed, Now What?
On the left sidebar of your Dashboard, you will notice the following menu. Just go to the ‘Appearance’ -> ‘Themes.'
Installing the theme itself is very simple, click on the ‘Install now’ button and select the package you’ve downloaded from the TemplateMonster store.
Click the ‘Install now’ button and WordPress will install your theme. Once installed, don’t forget to click on the ‘Activate’ button to set your theme as a default one.
Once you’ve activated your theme, you will be redirected back to the list of the currently installed themes.
Above you’ll see the list of plugins that should be installed for the template to work correctly. Click on the ‘Begin installing plugins.'
You will be redirected to the page with the list of all required plugins. You can install them all at once.
Then you'll be redirected to the plugins activation page. Select "Return to the Dashboard" when it is completed.
How to Make it Look Like the Live Demo?
This is a very popular question, and the answer is simple: Import all the demo data we give you along with the template.
Once you’ve downloaded the template from the TemplateMonster store, you will notice that besides the template itself, you get the demo files, let me tell you how you can import those and put those to work.
Let’s go to the ‘Tools’ -> ‘Import’ menu.
We need to install the ‘WordPress Importer,' so you’ll have to choose that option from the list.
Activate the plugin after the installation and run the importer.
Select the .xml file from the ‘sample data’ folder and click the ‘Upload file and import’ button.
After that, choose an author for manual import (or create a new user with login name) or select the one from the list of available authors (recommended option) (or assign post to an existing user:)
Check the "Download and import file attachments" checkbox.
Navigate to the Dashboard when it is completed.
In case you are experiencing any trouble with the importer plugin installation process through the ‘Tools’ > ‘Import’ menu, you can download it here and install it manually like a regular plugin.
Now we should import the widgets, the process is very similar, but I’ll still walk you through it step-by-step, just in case.
Go to the ‘Plugins’ -> ‘Add new’ menu. Search for the ‘Widget Importer & Exporter’ and install it like any other plugin.
Once installed, you will be able to navigate it in the ‘Tools’ menu.
Select the ‘widgets.wie' file in the ‘sample data’ folder and click on the ‘Import Widgets’ button.
Once this plugin finishes its work, all the necessary widgets will be installed and activated.
Setting up the WooCommerce Plugin
Yeah, I know what you’re thinking about now: Haven’t WordPress installed it already?
It did. However, you need to customize it and put in some necessary information to run your store. No worries, I will guide you.
You will notice in your dashboard the following notification from the WooCommerce plugin:
Click on the ‘Run the setup wizard’ and proceed further by clicking the ‘Let’s go’ button.
After that, the plugin notifies you that it will install the necessary pages for the store existence: Shop, Cart, Checkout and My Account.
Fill in the country of origin, the currency, and dimensions that should be used in your store.
That’s the point where you should decide whether your store will be shipping the physical goods or just giving some digital services. Once you sort it out, make your choice accordingly.
Choose the payment services you want to use. I’m not gonna be too original, PayPal and Credit Cards will work fine.
Add Products to Your Store
To open your store for the customers, you need to add the products. You will have the demo products included along with all the other demo data, so you can either edit the existing products or add new ones by yourself. I’ll show you how you can add new ones.
Click on the ‘Add product’ in the ‘Products’ menu.
You will see a generic WordPress editing area, it’s almost the same as for the pages and blog posts, but it has some more specific options for the products.
After you add the Name, Description, Images, Dimensions and Inventory status for your product, don’t forget to set the ‘Product Type.'
- ‘Simple product’ usually works for all the physical goods.
- ‘Variable product’ should be used for products that have multiple sizes (like t-shirts or sweatshirts).
- ‘Grouped product’ helps you to group several products into one.
- ‘External / Affiliate’ products helps you to sell stuff from the outside of your website.
This is how your list of products will look on the WooCommerce Dashboard side of your website.
How WooCommerce Stores are Built with Elementor?
The first part of this blog post was written when Elementor builder was considered to be a small pagebuilder. The time has passed, Elementor evolved and has become something that every WordPress website owner can’t build a decent website without.
Recently there was an interesting release at TemplateMonster marketplace and this blog post needs to have this info.
There was released the next-gen version of our Woostroid WooCommerce theme, it has become the Woostroid2. You can learn more about this awesome theme in this blog post.
What I’d like to tell you about in this part, is that with Woostroid2 theme you can create custom templates for ecommerce pages with the help of the Elementor builder.
Now let’s see what it takes to install this theme.
Previously you had to install it as a theme, through the Themes section, but now we’ve altered the onboarding process and it all starts with the W2-Theme-Wizard plugin.
This plugin will let you install the theme with all the needed plugins and skins step-by-step. When it is active, you'll see Install Theme block where you need to paste the order ID for Woostroid2 theme.
After activation the theme you need to choose either you want to install a parent or a child theme.
On the next step, you need to choose the skin.
When the choice is made W2-Theme-Wizard will Configure Plugins page, which displays the lists of Required Plugins, Recommended Plugins and Extra Plugins.
When you hit the button Next the Wizard will install all these components.
After that, you will reach one of the most important steps in the installation process. You’ll be prompted either or not to install the sample data.
For the fresh installation, you’re recommended to install sample data. It will help to check template’s functionalities, whereas on a live website installing sample data is not recommended because it will turn your site into a mix of your content with sample data, which is not okay. Choose an option and press next.
To make sure that you’re making a weight up decision you’ll be asked to enter your account’s password.
After that, you will see the final screen of the installation process.
Hit the first link in this list and you’ll be redirected to the homepage of your website.
Now let’s move on the juice of the Woostroid2 theme. Inside your admin panel, you will find a plugin called Jet Woo Builder that can help you create custom templates for your ecommerce pages.
Let’s assume that you want to create a new single product page template because you’re sick and tired of that obsolete look that exists from the early days of WooCommerce.
Go to the WooCommerce menu item, there you will find the Jet Woo Templates section.
This is the place where you will create some magic 🙂
Press Add New Template button on top, and you will be redirected to this page.
Here you can choose the type of the template, in the dropdown, its name, and the layout. Everything is pretty easy. After choosing the layout Elementor editor will start loading, and there you’ll be able to make all the necessary changes to your single product page template.
This is the set of elements that are provided by the Jet Woo Builder plugin.
They will dynamically display product data, on pages where you assign this template to.
Now let’s get back to the admin panel, and exactly to the WooCommerce section, Settings.
Enter the tab Jet Woo Builder, this is the place where you will assign newly created templates to WooCommerce pages.
To learn more, how Jet Woo Builder works feel free to refer to our previous article.
Wrapping Things Up
Today we learned how to create a store using our premium WooCommerce themes, and I hope it will help you to start your store and grow your business. I did give Frank a link to our blog, but I cannot be sure that he had a chance to check out our blog. I hope it will help you move on and develop your store idea into something cool.
Help people and inspire each other to create. Peace!
Read Also
Best 40 WooCommerce Templates for Designers
[Woostroid2 Released] Meet the Biggest Guy in the WooCommerce World!
59+ Best Business & Services WooCommerce Themes for WordPress
61+ Amazing Food & Restaurant WooCommerce Themes
30 Best Cars & Motorcycles WooCommerce Themes for Your Business