Blog

WordPress + WooCommerce online store: how does it work?

WordPress + WooCommerce online store
Aleksei Eremenko
Website developer

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
WooCommerce

Advantages of WooCommerce plugin:

  1. Flexible and powerful — turns the website into an online store immediately after installation.
  2. Compatible with numerous paid and free layout themes — easy to find a design matching your taste.
  3. 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.

WooCommerce online stores: Porter & York, Cupcake Studio, Dineamic.

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,
HTTPS protocol.

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:

  1. Choose the layout theme.
  2. Install the theme on the hosting.
  3. Set up the product card.
  4. Import products into the online store.
  5. 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:

  1. Learn.
  2. Hire a specialist or a team to do it for you.
  3. 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.

BrowseTemplatemonster and ThemeForest theme stores for finished templates. Check out the theme design tool YOOtheme.

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.

  1. What will be shown in the product card? Name, description, price, color, material, size etc. Build your list to use later.
  2. Do you need to filter the goods by any of these attributes?
  3. 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 storeProduct 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.

Some filters are usually already included into the theme. If not, add them with plugins. Consider these: WOOF, Premmerce WooCommerce Product Filter, YITH WooCommerce Ajax Product Filter.

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.

Manually
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.

Via Excel
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:

 

Sign up now

Aleksei Eremenko
Website developer

WordPress is an excellent solution for marketing specialists. But...

Thomas Smith

Web Developer

Your own shop isn't always about profit, but it's always about challenges. Why does everyone keep quiet about it?

Thomas Smith

Web Developer

Mass mailing can go wrong. Connection speed can drop, or even the entire website can go down.

Nastya Kuznetsova

Content manager