WordPress + WooCommerce online store: how does it work?
Looking for a solution? Quite a demanding challenge! New services for online sales appear on the web development market regularly. In this article, however, we will discuss eternal things — an online store running on WordPress in combination with WooCommerce.
I started working with WordPress in 2011, when it was exclusively considered a blog engine. Since then, good old WordPress has become a universal development platform. My team and I developed over 1,000 WordPress websites, nearly a third of which are WooCommerce online stores. And this is exactly what we are about to discuss.
WordPress for an online store
A website designed for sales is different from a regular webpage. It needs to have a catalog with product cards, order and payment form, customer and administrator dashboards. Developing this type of project from scratch will be time-consuming.
WooCommerce plugin is an extension to WordPress, which helps to set up an online store fast and easy. The plugin contains all elements essential for a store: product cards, order form, dashboard etc. It appeared in 2014, and by 2019 it was downloaded from WordPress catalog more than 5 million times. What causes such popularity despite it being free?
5 million downloads
Advantages of WooCommerce plugin:
- Flexible and powerful — turns the website into an online store immediately after installation.
- Compatible with numerous paid and free layout themes — easy to find a design matching your taste.
- Compatible with many other paid and free plugins — no need of extra development costs to boost your website’s functionality. There are other plugins for security, SEO, backups etc.
In addition, keep in mind the advantages of all WordPress websites — easy control and good SEO. After you launch the project, you will quickly be able to create new categories, add products, images and descriptions, and optimize text for search engines.
How big of a website can be run on WooCommerce?
I heard opinions that a WooCommerce website will not be able to cope with many product items, as it will work slowly or freeze altogether. However, the «capacity» of an online store depends on more than just the engine: also on the hosting, functionality and traffic.
Hosting. Weak hosting will render useless the speed of even the lightest and the most optimized website. Basic requirements to hosting:
PHP version 7.3 or higher,
MySQL version 5.6 or higher, or MariaDB version 10.1 or higher,
The remaining requirements depend on website demands. Check out our recommendations on capacity choice for an online store in our article on hosting choice.
Functionality. Website loading speed is affected by the number of categories, products and filters. The more you have, the slower your store will work. So, if you are planning to build something as big as a new Amazon, avoid using WordPress. If your plans are less ambitious, the engine’s capacity should suffice. WordPress can manage up to 10,000 products, and works wells in combination with 1C. Do not forget though, that a lot still depends on the hosting.
Traffic. Keep track of the website’s traffic. If you launch an advertising campaign for the website, use SEO, and your traffic is growing, choose a more powerful hosting. If the capacity is insufficient, the website will start to slow down and will collapse eventually.
How to set up an online store on WordPress + WooCommerce
You have finally made up your mind that WordPress with WooCommerce will be sufficient. Good choice! Here is how to set up an online store on their basis. This is not a comprehensive guide, but it will give you an idea of what is expected of you.
To set up an online store with WooCommerce plugin, you will need to:
- Choose the layout theme.
- Install the theme on the hosting.
- Set up the product card.
- Import products into the online store.
- Set up delivery and payment sections.
Order a design, buy a theme or use a free theme
To begin with, you need to decide if you are going to use a preset theme, or you want to custom design your own website. If you do not have the skills of a layout designer, and you do not know how to create WordPress themes, you can:
- Hire a specialist or a team to do it for you.
- Buy a theme that will match your online store the best.
Quality layout design and a customized theme will match your requirements perfectly, but if your budget is limited, it would be best to simply buy a finished theme rather than hire a mediocre specialist. Some themes available for a WordPress websites can stand up to the level of good designers’ work.
If you decide to download a free or a hacked theme, check credibility of the source. Internet fraudsters often add undeclared links in themes and leave security holes. Then viruses infect websites running on such themes; search engines drop the ratings and the hosting provider blocks the website.
Avoid the unnecessary risks and download free themes and plugins from the official WordPress catalog.
«Hacked themes are one of the causes of website malware infection»
Not all themes are equally simple: to install, configure and adjust them, you may need special skills. So do not rush into slaughtering the developers if a paid theme does not install well. You may need to delve into the depths of WordPress to configure it, or get help from a specialist.
How to choose a good theme
Design matters. Your website does not have to be an art gallery masterpiece, but it should not be inferior to competition. Browse modern online stores, check out competitors’ websites and paid themes via the links above — this should give you a good idea. Make sure your website is pleasant to look at and the user does not feel the urge to close it after one second of looking.
Better is the enemy of good enough. Do not overdo it with the subtle details. Nothing should distract your customer from the goods. The principle of moderation also applies to colors and fonts. Pick one or two accent colors, and use white, gray and black as auxiliary colors. Limit yourself to one font only.
Convenience brings sales. You may have sometimes been at online stores, where you do not know which button to click, whether you have clicked or not, what the price of the product it, how much it weighs, and whether or not the action has been performed, and if yes, which action. These are websites with poor usability. When you log on one of those, you feel much more like closing it than paying. Therefore, the convenience of your website is the pathway to successful sales.
Step 1. Preparation
Once you have chosen the theme, install it on the hosting. Refer to our article guiding through hoisting choice. How to find the best hosting for your website. Installing a purchased WordPress theme on the hosting will be an easy task with Vepp.
Business owners, marketing specialists and freelancers use Vepp to support WordPress and other websites.
When the theme has been installed, you need to configure it and fill with goods. Before you do, it would be good to check out the entire functionality of the website, but it will take a lot of time. So, first I recommend to answer three questions.
- What will be shown in the product card? Name, description, price, color, material, size etc. Build your list to use later.
- Do you need to filter the goods by any of these attributes?
- How will products appear on the website: are you going to add them manually, from your price list, or, perhaps, you would like to link your website to 1C or another system?
Step 2. Setting up product card and filters
Product card is the most valuable element of the online store. You need to configure it before you start loading products into the website. Otherwise, the products will be displayed incorrectly, you will end up having to wipe everything out, reconfigure the card and start loading the goods all over again.
If the card contains only the name, article number, brief and full descriptions, price and image — congratulations, no more extra steps will be required, since all of these are already in the plugin.
Product card in a WooCommerce store. It contains the product name, image, price and quantity selection field
Create product attributes. Go to Products menu and choose Attributes. Create an attribute on the start page, e.g. color, and configure its parameters.
Product cards are a good thing. Nevertheless, when you cannot find the right product among hundreds of others, it is bad. Filters will help to navigate through large catalogs.
Step 3. Adding goods
You can add goods manually or automatically. If you set up a new online store manually can be easier. If the price list is long, an automatic procedure will be more reasonable.
To load goods manually, you will need to perform a few preliminary steps. Add categories and tags list. Prepare images that match your theme image size settings. If necessary, change them in Settings — Media files, and then proceed with adding the items.
Remember to add product attributes to the corresponding product card section, if you use any. As you see here, you can also create an individual attribute for any product.
The product price may vary depending on the attribute, for instance, a blue scarf costs 100 rubles, while a green one costs 200 rubles. To achieve this, set the product as variable, and use attributes «For options». After adding attributes to the «Options» section, you will need to specify all options and set their individual prices.
Use plugins to import goods to the website through an Excel price list (xml/csv). WP All Import plugin is a real monster of goods import, but it costs $99 or higher. Browse the WordPress catalog for free alternatives. Study the plugin manual before importing your goods: you may need to adjust your xml/csv file to a particular required layout.
Step 4. Setting up delivery and payment
If you plan to accept payments directly on the website, remember to configure the Delivery and Payment sections: add your delivery zones, types and payment methods.
You can handle incoming orders in Orders section of WooCommerce.
User dashboard will be available at /my-account link. You can use it in the website header or instead of the cart.
Top most useful plugins for WooCommerce
For placing orders and payments processing
Bootstrap one page woocommerce checkout enables you to process purchase within one page.
For elegance and convenience
WPC Variations Radio Buttons turns dropout attribute lists into radio buttons (circles), which are often more elegant and convenient to use.
WPB WooCommerce Product slider — a decent slider of goods, which can be used, for instance, at your homepage.
WooCommerce Cart Count Shortcode — an alternative to standard cart. Displays the cart icon, number of goods in the cart and a window with cart items.
Premmerce WooCommerce Product Search — interactive search of products.
For SEO and acceleration
Yoast SEO adds metadata required by search engines to website pages. Generates website map and indicates at SEO errors.
PageSpeed Ninja helps to optimize and accelerate your website.
Clearfy Pro — yet another tool for faster website operation. Compatible with PageSpeed Ninja.
Sign up to Vepp blog!
Professional insights to website development and management. Read a few of our recent articles:
- How to scan a website for viruses: tips from a professional admin
- Google Analytics for beginners. A whirlwind tour of reports
- How to promote your blog. 4 good ways to find new readers