E-Commerce made easy with WordPress & WooCommerce

-

 

E-commerce introduction

E-commerce (electronic commerce) refers to transactions conducted via the World Wide Web. It may involve buying physical or digital products, ordering services or transfer funds. It is booming sector with revenue growing every year. Even  in uncertain times of covid-19 pandemic online shopping is thriving. Purchasing goods from the comfort of own homes and get them delivered even the same day is changing the way how people perceive shopping process. Old ways of buying from brick and mortar stores are about to extinct.

Time is the crucial factor when it comes to sales and if shops or manufacturers wants to be competitive on the market starting an online selling platform should be easy and quick.

WordPress designed as a blogging platform became now home to millions of businesses thanks to plethora of plugins which allow to set-up selling goods and services in a matter of hours.

WooCommerce installation and Setup

I will demonstrate how easy is to add the shop functionality to our existing WordPress page where seller can add products and handle payments with ease. I'm going to use one of the most popular e-commerce plugins for WordPress - WooCommerce. First thing is to find and install the plugin from Plugins section of wp-admin dashboard.


Quick setup with giving the personal details as address, type of shop and other required information.

We ready to go. Products for sale are added from the new Product menu. We can add photos, set the price and add product description. Everything is quite easy and intuitive, takes few minutes to accomplish.


And the shop is ready... after couple of clicks...


Adding extra functionality with plugins

Adding extra functionality to the page / store is also easy. I decided to remove cart menu and add a plugin which will display small cart icon of the cart on every screen of the website to have easy access to it. I chose Cart All In One For WooCommerce. 

Cart Icon added to bottom left corner of the page. 

And cart menu in action after click on the cart icon... where we can go to checkout and finalise the transaction.



Checkout page display error and debugging process

I'm using my own child template for the whole page therefore I encountered some display errors on the checkout page. Left side with the billing address details was completely unreadable.



I opened developer tools and inspected html element. Then I found CSS property responsible for wrong display. 


I edited CSS file in my template-child folder in order to fix the display. Found proper class and id names of corrupted elements and add properties which fixed the problem.



Then result after fix - billing details fields displayed peoperly.


Enabling and testing PayPal payments

PayPal is one of the most popular online payment providers on the market. Adding this payment option to the shop is also simple task. To keep my own money safe I used PayPal sandbox account which is preferred solution for testing purposes.

Then we need enter our PayPal Sandbox account credentials in the woocommerce settings. After that we can test our payment by "buying" one of the products. Login to PayPal account and "pay" for the item with virtual money.




If setup was correct we should get a payment confirmation.

We can check all orders in the dashboard / orders serction.



Comments

Post a Comment

Popular posts from this blog

Wordpress Environment Setup

-
Image
Wordpress require server environment (Apache, Nginx), PHP and access to MySQL or MariaDB for storing information. There are couple options available how we can to start developing wordpress powered websites:  Buy dedicated hosting space ( https://wordpress.com/pricing/ ) Create own server based on Cloud Computing Services Amazon AWS  Light Sail or  Digital Ocean  droplet Install on own Apache, Nginx server Linux based computer or raspberry Pi device Install PHP development environment on local desktop laptop -  XAMPP Use popular containerized approach with  Docker I'm going to setup my development environment using Docker. This will remove the hassle of installation and configuration required software on local computer. Instead I will create Docker compose file which use separate image files for (wordpress, php myadmin, and mySQL) and allow for one command set-up of whole environment. All required image files can be found on  Docker Hub  - libra...
Read more

Creating Frontend with React.js

-
Image
 Installing React Development Environment Now let's build independent frontend for the wordpress website using React.js - JavaScript library for creating user unterfaces.  To install React development we use popular npm (Node Package Manager) package  - create-react-app .  I created folder "frontend" for the react application in root folder of the wordpress website. Then use command npx create-react-app . in that folder to scaffold starting react project. Please don't forget to install Node.js which is required for React & NPM packages!! After successful installation we can compile and run the react app in the browser using npm start command in the terminal. Result in the browser, url address http://localhost:3000 Let's install additional NPM packages axios and react-router-dom . First is a promise based HTTP client for the browser and node.js, and second is a tool to handle routes in a single page application using dynamic routing. List of all installed...
Read more