Developing an E-commerce Website by Using

WordPress CMS for “H.SWare Oy”

Liao, Junqing

2016 Laurea
Laurea University of Applied Sciences

Developing an E-commerce Website by Using WordPress

CMS for “H.SWare Oy”

Junqing Liao
Business Information Technology
Bachelor’s Thesis
November, 2016
Laurea University of Applied Sciences Abstract
Degree Programme in Business Information Technology
Bachelor’s Thesis

Junqing Liao

Developing an E-commerce Website by Using WordPress CMS for “H.SWare Oy”

Year 2016 Pages 36

Nowadays, online shopping websites are developing at an unprecedented rate. They not only
change the traditional mode of production but also have a very profound effect in economic
restructuring.

This Bachelor's thesis aims to develop an online shopping site for a small-sized enterprise,
H.SWare Oy, which plans to sell products to Chinese customers. This website was built on the
WordPress platform. The thesis employs plugins to achieve a shopping site, which can carry
out the release of, modification of and deletion of products.

WordPress is a PHP and MySQL language developed content management system, which users
can establish their websites in. Using WordPress to build a website is not only quick and easy
but also secure, economical and the website is easy maintained.

The development process of the website was based on the waterfall model, which is suitable
for small projects. The data was collected by using research methods such as group focus and
web wireframe. The project was accomplished with a functional shopping website delivered
to the company. According to the feedback by the company, they were satisfied with the out-
come.

Keywords: E-commerce Website; WordPress; H.SWare Oy

Table of Contents

1 Introduction ......................................................................................... 6
1.1 Company Background ...................................................................... 6
1.2 About the Project .......................................................................... 7
1.3 Objectives ................................................................................... 7
1.4 Structure of the Thesis .................................................................... 8
2 Methodology ........................................................................................ 9
2.1 Waterfall Model ............................................................................ 9
2.2 Focus Group ............................................................................... 10
2.3 Web Wireframe ........................................................................... 10
3 Theoretical background and technical tools ................................................ 11
3.1 CMS ......................................................................................... 11
3.2 HTML5 ...................................................................................... 11
3.3 CSS3 ........................................................................................ 12
3.4 XAMPP ...................................................................................... 12
3.5 phpMyAdmin............................................................................... 13
3.6 Use Case Diagram ........................................................................ 13
4 Design .............................................................................................. 13
4.1 Requirement Capture.................................................................... 13
4.2 Interface Design .......................................................................... 15
5 Development Process ............................................................................ 16
5.1 Choosing a Proper CMS .................................................................. 16
5.2 Development Environment Establishing .............................................. 17
5.3 Choosing and installing a theme ....................................................... 19
5.4 Customizing appearance ................................................................ 19
5.5 Applied Plugins ........................................................................... 21
5.5.1 Woocommerce .................................................................... 21
5.5.2 All in One SEO Pack .............................................................. 21
5.5.3 WP Image Zoom................................................................... 22
5.6 Setting up e-shop with WooCommerce ............................................... 22
5.7 Adding new products .................................................................... 23
5.8 Finalizing the website ................................................................... 23
5.9 Features of the Website ................................................................ 24
5.9.1 A Google map ..................................................................... 24
5.9.2 Clear products categories....................................................... 25
5.9.3 Coupon Created .................................................................. 25
6 Testing ............................................................................................. 26
7 Implementation .................................................................................. 28
8 Training ............................................................................................ 28
9 Evaluation ......................................................................................... 29
10 Conclusion ......................................................................................... 29
References ................................................................................................ 31
Appendices ................................................................................................ 34
 6

1 Introduction

The modern businesses are constantly innovating and implementing various ways to reach-out
their customers. In recent times, the growing popularity of online businesses also utilized var-
ious e-commerce concepts including virtual enterprise, virtual bank, online marketing, online
shopping, online payment and online advertising. With the rapid development of network
technology, online shopping has been very popular on the Internet. People can shop at any-
time, anywhere, which is entirely different than traditional shopping. There are many bene-
fits. For example, the cost is far lower than the cost of traditional products in the store, easy
to build online list of items, easy to buy, sell and deliver. Indeed, there are obvious benefits
for buyers and sellers of goods. Overall, any businesses can get benefits for the development
of a website with e-commence facility.

The purpose of online shopping website is smooth functioning of business. It also provides
some additional benefits including possible e-commence and marketing method for the online
business management of the enterprise. It also solves the problem of slow circulation of com-
modity information, restricted distribution area, unclear capital and operating status, and
scattered market. Meanwhile, it is not only facilitates business process automation but also
reduces the cost of enterprises to improve the overall efficiency of the company. In addition,
it also establishes a simple, reasonable, fair and open transactions environment for users.

Many SMEs are benefiting from e-commerce online shops as explained above. Hence, Laurea
University of Applied Sciences provided an opportunity to leverage the benefits and help a lo-
cal company to design and develop new online web shop. An author has leaded a design and
development project. The primary task of this project is to provide the platform of e-com-
merce for the merchandise and online shopping facility. The system can be used to manage
the order including browse the products and items, confirm the goods availability, place an
order, online payment and selecting possible delivery method.

1.1 Company Background

H.SWare Oy is a small shop which was founded in November 2015 in Helsinki (H.SWare Oy
2015). Their business includes importing products from several Finnish local brands Fiskars,
Iittala and Arabia and selling to Chinese tourists. The way to attract customers is by cooperat-
ing with Chinese travel agencies. The shop signs a contract with a tour guides that promises
the guide will take visitors to the shop and the guide can get a commission from the shop if
tourists buy products. There were only 2000 Euro sales in January. With the weather warming
up, more and more Chinese visitors came to Finland so that the sales increased rapidly during
May to August. The off season is usually winters when less people come to travel. The shop
 7

manager planned to sell products to Chinese to make satisfied profit even in off-season. In
the past, they sold products to Chinese clients via a third-party company that brings more
profit to the third-party company. Now, the company wants to sell products to Chinese cus-
tomers directly to make more profit. Hence, an online shopping website is necessary for them
the company.

1.2 About the Project

The reasons why a website is needed for the company are given as follows. Firstly, it is a
start-up shop which needs a website to advertise their products. The company will publish the
website in WeChat official account to Chinese customers who have subscribed the account.
Hence, those Chinese customers can browse and purchase products after noticing the link of
the website contained in the post. Secondly, selling products to Chinese customers directly
instead of through the third-party company will bring considerable profit. The website will be
the platform for the company to trade. Thirdly, there were a few people come to the shop in
winter, which leads to unacceptable sales. Therefore, catching online customers will make up
for the deficiency of off-season sales.

The target customers of the website are mainly Chinese thus Chinese is the only language
supported by the website. One of the prominent reasons is that there is no purchase service
for Chinese in the official site of the brands covering the products of the e-shop. Besides,
there are some other online platforms selling products of those brands with extremely high
price. Hence, selling products with normal price and providing convenience of purchasing ser-
vice will make the website competitive.

The shop manager and the boss held a meeting with the author in May, 2016 to discuss the re-
quirement of the website. The boss Mr. Huang wants a simple, clear website which means cli-
ents can access it easily and get familiar with our products quickly. The layout of the website
should be user-friendly and color should be warmly because the shop sells household prod-
ucts. In the end, Mr. Huang requested the author to finish the website before next tourism
off-season.

1.3 Objectives

The aim of this project is to establish a dynamic online shopping website for H.SWare Oy to
sell products. Traditionally, H.SWare’s customer-base are foreign tourists- mainly Chinese and
south Asian tourists. Therefore the project was targeting few key objectives. First, the com-
pany is traditionally focusing on Chinese customers to separate from the other businesses.
Hence, strategic goal is to target and serve to Chinese customers. Second, the online store
will also helping to increase sales during the off-season when foreign tourist are not available
 8

on mainland. This will be achieved by building a website which can help customers purchase
products online and at the same time the owner of the shop can manage products easily.
Some other objectives I set for this project are capturing requirement, a beautiful design,
adding functions to meet owner and customers’ needs. (Christian W. Daswson 2009, 61)

1.4 Structure of the Thesis

This thesis consists of 10 sections. In the first section, the project is introduced as well as
main objectives of the project. Several research methods are listed in section 2. The main
content of the third section is technical skills including CMS, HTML5, CSS, XAMPP and
phpMyAdmin. The subsequent section 4 and section 5 relates to the core part of establishing
the website, starting from designing to the final site created. Section 6 is about testing and
launching, which will be mentioned compatibility test in different browsers and mobile plat-
forms. Section 7 is implementation which indicates how the website transfers to a web host.
Chapter 8 represents training approach and delivering the site to the company. The last two
parts of the project are evaluation and conclusion in chapter 9 and 10 respectively.

Figure 1: Structure of the Thesis

 9

The figure above indicates the structure of the thesis in order to give readers a clear and
comprehensive impression. The last section mentioned suggestion of future maintenance by
the company.

2 Methodology

Methodology is the systematic, theoretical analysis of the methods applied to a field of study
(Methodology 2016). This project is based on waterfall model to develop the whole website.
In addition, there are several research methods used such as focus group and website
wireframing.

2.1 Waterfall Model

The waterfall model a sequential design process (see figure 2). It is also known as a linear-se-
quential life cycle model (waterfall model 2016). In the waterfall model, the beginning of
each phase is based on the completion of the previous phase. At the end of each stage, there
will be a review process to allow clients' needs to be addressed more efficiently (what is Wa-
terfall model-advantages, disadvantages and when to use it? 2016). There are several reasons
to choose this model. First and foremost, it includes only five phases, which is straightforward
and easy to apply. Additionally, it is easy to manage since each stage has clear outcomes and
a review process. Lastly, this project is small and short as well as fully understood require-
ments. The website was developed by following waterfall model step by step.

Figure 2: Waterfall Model

In this project, requirements analysis is done by a focus group bring together to find out what
is needed for the website. The idea of requirement capture is to define clear requirements
from the company. The design phase covers web wireframe design and development process.
 10

Design concepts are based on what is founded in requirement capture. Building is the devel-
opment of the website. The site is built in WordPress and shopping functions are fulfilled with
Woocommerce. Testing phase is done by assuming that a user purchase products from the
website and running on other devices. Testing is to ensure there will be no bugs appearing
when the site is running. Implementation phase is done by transferring the site to a rented
web host. When the website has been launched, users can access to it.

2.2 Focus Group

A focus group is a form of qualitative research in which a group of people (usually between 4
and 15) bring together to focus on a particular product or topic (Focus group 2016). There are
some topics came up with in the meeting where participants are free to talk with other group
members. At the same time, the researcher takes notes or records for collecting ideas and
comments. The benefit of a focus group is that members can express their thoughts, share
the feeling and comment others instead of on individual responses like an interview.

Two group discussions were held during the project. The group consists of five people
(Mr.Huang, the manager, the author and two staffs) who attended in the first discussion be-
fore the design phase. We talked about design idea and functions of the website. As a result,
the group members had an agreement that there should be sufficient images of the shop on
the main page of the website and products category should be clear. The second discussion
was formed before the testing phase with the same group members. They gave suggestions
about the demo website. Focus group method played a major role in the project: it brought a
broader range of information and made targets more specifically.

2.3 Web Wireframe

A website wireframe is a screen blueprint that presents the skeletal framework of a website.
It can be drawn with a pencil or using the wireframing software. It helps establish functional-
ity and the relationships between different screen templates of a website (Website wireframe
2016).

For web design, in most cases, clients need to understand how sites will work. Using a
wireframe can hugely help them understand the majority of functions rather than simply ex-
plaining to them verbally. Therefore, clients and developer can communicate easier and cli-
ents can come up with more useful comments. The draft of designing plan was represented in
the first discussion where the group members proposed valuable suggestions and the finalized
version was then drawn.
 11

3 Theoretical background and technical tools

This section covered concepts of technical tools that used to support the whole project. How
the skills used and why they are necessary to the project are explained as well.

3.1 CMS

CMS is the abbreviation of the content management system which located between a web
front end (web server) and a back office system or process (content creation, editing). Con-
tent creators, editors, and publishers can use content management systems to submit, mod-
ify, approve, and publish content without coding. The term "content" may include information
about files, tables, images, data in the database, and even videos (Content management sys-
tem 2016).Content management also optionally provides content crawlers that automatically
fetch content from third-party sources, such as text files, HTML pages, Web services, rela-
tional databases, and analyze and place them in their content repository. With the develop-
ment of personalization, content management also provides a customized front-end content
to users.

CMS provides a visual content editing interface and abundant plugins so that the programming
skills are not necessary to build websites. The project is developing a website for a small shop
which the staffs have no web development experiences. Therefore, using CMS to establish a
simple and easy-managed website is significant for the future maintenance. As the leading
and the most popular content management system WordPress was applied to be the platform
realizing the goal.

3.2 HTML5

HTML5 is the markup language on the World Wide Web for structuring and rendering content.
It is the fifth and current version of the HTML standard. It was published by the World Wide
Web Consortium (W3C) to support the latest multimedia with better language in October
2014. It makes not only human readable but also computers and devices such as web browsers
can understand it quickly.

HTML5 includes intricate processing patterns to encourage more interoperable implementa-

tions; it extends, improves, and provides rationalized document markup for complex Web ap-
plications and introduces markup and application programming interfaces (APIs). For the
same reason, HTML5 is also a cross-platform candidate for mobile applications, as it includes
design-time considerations for low-powered devices (HTML5 2016).

There are three main advantages of HTML5 which are easy use, support video and audio and
browsers’ compatibility. HTML tags make it easier for the developer to access the content.
 12

Using the new definition tags, the developer can understand the HTML document better, and
create a better user experience. HTML5 make inserting video and audio as simple as inserting
pictures. HTML5 is supported in all modern browsers. All browsers automatically handle un-
recognized elements as inline elements so that even an old version browser can cope with un-
known HTML elements (HTML5 Browser Support 2016).

HTML5 were seldom used in process of building this website as WordPress provides a visual
editing interface. In other words, the developer can edit content without coding. On the
other hand, the coding function is also permitted to modify any content. The shortcuts of
common HTML5 tags are provided in editing page which is convenient for the developer cod-
ing. For the purpose of enriching content of the website, HTML5 codes were used to insert im-
ages, a map and a music player in this site.

3.3 CSS3

CSS stands for cascading style sheets which describe how HTML elements are to be displayed
on the screen (CSS Introduction 2016). CSS3 is the latest evolution of cascading style sheets
language which can achieve the separation of web content and design of the content. Com-
pared with the traditional HTML page, CSS can position any object in the page and support al-
most all the font style. There are three methods to use CSS3 in a web page: Linking, Embed-
ding, and Inline. When it needs to be applied to a lot of pages, linking CSS will be the ideal
choice. Appearance of the entire site can be changed by only editing a file. When a single
page requires a special style, embedded CSS is a good choice. When a particular style needs
to be applied to individual elements, inline CSS is a good choice.

In this project, CSS codes were not used in the process of web development because the font
size, color and content position could be modified in management page of theme. However,
it played a significant role in fixing bugs. There was a bug appearing when Woocommerce is
installing. This problem was solved by modifying the linking CSS file of the theme. The CSS
codes had been tested and adjusted many times to get the suitable one so that content dis-
played properly.

3.4 XAMPP

XAMPP is a free and open source cross-platform web server solution stack package. It stands
for Cross-Platform(X), Apache (A), MariaDB(M), PHP(P) and Perl(P). It includes server applica-
tion (Apache), database (MariaDB), and scripting language (PHP) which means XAMPP has eve-
rything needed to set up a web server. Developers can build a web server easily with XAMPP
application. The most web server deployments use the same components as XAMPP, it makes
transferring to live server easier (XAMPP 2016).
 13

XAMPP provided substantially supports to build website in local host. The initial site of the
project was founded in local host and the database was created by running MySQL in XAMPP.
After everything completed, the website transferred to a web host.

3.5 phpMyAdmin

PhpMyAdmin is a free software tool written in PHP that is designed to handle MySQL admin-
istration via the Web. PhpMyAdmin supports a broad range of MySQL and MariaDB operations.
Common operations such as managing databases, tables, columns, relationships, indexes, us-
ers and permissions, can be performed through the user interface. (Bring MySQL to the web
2016). Database is essential for a website no matter in local host or web host. PhpMyAdmin
was used to create database of the website in local host and export the database for launch-
ing the site.

3.6 Use Case Diagram

A use case diagram illustrates the activities that are performed by users of a system. It repre-
sents the relationship between the user and the activities (Scott Tilley & Harry Rosenblatt
2016, 113). The diagram was created to clearly indicating what users and the administrators
can do in the process of functional design. Since the company had no background in managing
website, a diagram could help them understand how the system will work.

4 Design

In this part, the requirement analysis and web wireframe design concept will be explained.
The purpose of a focus group was to collect design ideas from the shop operators’ aspect and
customers’ aspect. The development of the website that presents how the requirements
achieve will be also explained.

4.1 Requirement Capture

The waterfall model begins with a requirement analysis or requirement capture which de-
scribes problems or desired changes in a business process. “When managers can users develop
their business plans, they usually include IT requirements that generate systems requests.”
(Scott Tilley & Harry Rosenblatt 2016, 20) The method focus group is employed to capture the
company’s requirement for the website. According to group findings the mainly task is to ac-
complish purchasing process to increase profit for the company. Specifically, the website
should contain company introduction and products’ introduction and appearance should be
well-designed. What’s more, the website should be easy managed that the company can
maintain it in the future. The outcome from this phase of the process are a use case diagram
with explanation that clearly defines what the customers and the administrator can do and a
checklist that indicates what is present in the website. (Christian W. Daswson 2009, 116)
 14

Figure 3: Use case diagram

From the image above, it can be seen that the website has contained necessary functions of
online shopping. Users can manage accounts after logging in to the system. Search can be
done by the name of the products and the classification of the products. When users are
browsing products, recent views or related goods will be recommended in order to help them
find what they are looking for rapidly. Places Order consists of adding to cart, modifying cart,
editing shipping details and checking out. On the other hand, Administrators post news to the
main page such as publishing coupon code. They can add or delete items and edit orders to
ensure the orders process successfully. In addition, it is not mandatory for users to register
and they can purchase products as well.

The following figure 4 in next page explains what content would display on the website. The
company and brands introduction would give users a general impression of the shop, which
contains a Google Map, shows the company location to make the online store reliable for
those customers who have not been to Finland before. The products’ categories and details
help users to find what they want. Users can leave comments to help the company improve
services and the company can analysis users’ satisfaction from comments. The Coupon code is
created to attract customers result in gaining profit for the company. The language of the en-
tire site is Chinese due to the target customers and this eases users acquainting with the
Finnish brands.
 15

Figure 4: Check list

4.2 Interface Design

A well-designed interface will helps users to perform their actions and help them to learn a
new system rapid and be more productive. Based on the group findings, the color, layout and
ease of use are taken into account to design an attractive layout. Web wireframe is an em-
ployed method to present design idea of the appearance. (Scott Tilley & Harry Rosenblatt
2016, 244) The appearance customizing will be descried particularly in section 5.4.

“Balsamiq Mockups 3” is the application chosen to draw wireframe for this project. The fol-
lowing figure 5 shows general appearance of the main page. Once users enter to the page,
they can see many pictures plays in the slide. Hence, they will have a preliminary under-
standing of the products. The primary menu and search box are on top of the page which
makes users select what they want to explore quickly. Below the slide, there is some news
such as the latest discount or new arrival information. There is also a small area below the
navigation bar to record the 2-3 products that users recently viewed.

Figure 5: Main Page

 16

The following figure 6 presents the store page. Like most shopping websites, a plenty of goods
display in the center of the page. On the right side, there is a detailed product navigation bar
including categories (brands classification) and subcategories (series classification).

Figure 6: Shop Page

The figure 7 is the navigation structure. It is straightforward and clear which mean users can
access it quickly. A draft of web wireframes was sent to Mr.Huang, and he was very satisfied
with the design.

Figure 7: Navigation structure

5 Development Process

5.1 Choosing a Proper CMS

The project truly begins with the selection of the content management system. Nowadays,
three mainstream CMS software are popular in the market which are WordPress, Joomla and
Drupal. It is hard to choose right one because they are all powerful and free. Hence, the au-
thor made a comparison among Drupal, Joomla and WordPress.

WordPress is the world’s most popular content management system which is used on almost
40% of CMS-based websites (CMS Usage Statistics 2016). It is easy to use even if you do not
have any experience on web development. It is mainly used to build small-to-medium-sized
websites, blogs and small e-commerce stores.
 17

Drupal with an 8% ratio of usage becomes the second modern content management system
(CMS Usage Statistics 2016). It is the most difficult but the most powerful one. So you need
have basic knowledge of HTML and other programming languages to use it. Besides, Drupal
does not have any web host which means you need to buy your domain and host (Robert
Mening 2016).

Joomla is less popular than WordPress and Drupal but still powerful enough to run most web-
sites. Using Joomla has demands of programming skills. It is ideal for social networking web-
sites and e-commerce stores (Robert Mening 2016).

For this project, WordPress was applied to establish the e-commerce site. Compared with
other two CMS, WordPress is the easiest one. It will take less time to fulfill the project de-
mands. In addition, the web development course in Laurea Leppävaara gives the author a pre-
liminary understanding of WordPress. WordPress has thousands of free plugins can be used,
one of which is called Woo-Commerce meet most requirements of an e-commerce website.

5.2 Development Environment Establishing

The first step is to download XMAPP from the Internet and then install and launch XAMPP.
Click “start” button to run Apache and MySQL, as shown in below image:

Figure 8: Installing XAMPP

The second step is to download WordPress from official website WordPress.org, extract files
to xampp/htdocs and rename the folder name to “hsware”. The following task is to create a
 18

database in phpMyAdmin (see figure 9) to save website data and add a user account to admin-
istrate the database. The image below shows a completed database with a user.

Figure 9: Creating database and user

Next was renaming the file “wp-config-sample.php” to “wp-config.php” in hsware folder and
enter the created database information to instead default information.

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'hsware');
/** MySQL database username */
define('DB_USER', 'huang');
/** MySQL database password */
define('DB_PASSWORD', 'Ljq19931107590');
/** MySQL hostname */
define('DB_HOST', 'localhost');
/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');
/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');

After above steps, launch localhost/hsware in the browser to setup configuration file (see fig-
ure 10 in next page). By this time, the entire environment has been built successfully.
 19

Figure 10: setup in WordPress

5.3 Choosing and installing a theme

WordPress provide two default themes but they did not meet the design idea. The key ele-
ment to find a proper theme is that home page contains a slide, a menu and the general lay-
out fit the design. The author tried many themes with good appearance, but they have a
common problem that they cannot customize the image of the slide unless upgrading the
theme to pro-version. Fortunately, an ideal theme named Sydney was found which can cus-
tomize any content freely. Sydney is a powerful business theme that gives companies or free-
lancers a fast way to create a satisfied website. Sydney brings a wealth of customization pos-
sibilities such as access to all Google Fonts, full-color controls, layout controls, logo uploads,
full-screen sliders, title images and much more. According to the statistics, the theme is
downloaded around 1000 times per day (Sydney 2016). Consequently, the Sydney was applied
to support the website.

5.4 Customizing appearance

After the theme was installed, customizing appearance such as font size, background color,
could be done in management interface. White and Grey was chosen as the main tone of the
whole page in order to reflect the Nordic home style and also make customers comfortable.
As for the font size, they were enlarged to make the content displayed more clearly. In the
widget part, some unnecessary functions were removed such as page categories, RSS and
 20

login because a simple and clear page is the goal and users can purchase goods without login.
The theme and the design ideas were almost the same, so the structure of the site was based
on the theme. Most of the content and format were directly modified without changing in CSS
or PHP file. However, there were probably some compatibility issues between WooCommerce
and the theme, the box of purchase quantity was too small to show the number. Hence, I
changed the CSS file with codes below to solve this problem. The effect shows in Figure 11.

.woocommerce .quantity .qty {

width: 5em;
text-align: center;
font-size: 20px;
}
.coupon_code {
width: 135px!important;
height: 36px;
}
.single-product .woocommerce .quantity .qty {
width: 5em;
text-align: center;
font-size: 25px;
height: 35px;
}

Figure 11: Effect of Changing CSS (Source: hsware.rockpug.com)

 21

5.5 Applied Plugins

WordPress plug-in can be a program or a set of functions written by PHP. It allows a devel-
oper to modify, define and enhance the website’s functionality in a convenient way. Develop-
ers can add features to WordPress directly without changing the core code. To achieve and
enhance the functions of the website, I used several plugins which are introduced as follows.

5.5.1 Woocommerce

WooCommerce is a free e-commerce plugin for WordPress. It offers a platform for store own-
ers to sell anything. Nowadays, it is used in 30% of all online stores which makes it become
the most popular e-commerce plugin for WordPress (WooCommerce 2016). There were five
reasons to install it in the project. First of all, it is a secure online shopping platform with a
plenty of functions. With this plugin, the store can sell physical products on the platform; it
can also set a different tax rate and shipping fees for different regions. Customers can com-
plete browsing, selecting and purchasing actions within a secure environment. Secondly, it is
mobile friendly. It displays products matching the screen on computer perfectly as well as on
customers’ cell phone. So customers can shop it anytime and anywhere. Thirdly, it has busi-
ness data analysis system. Sales report can be obtained directly in WooCommerce manage-
ment interface instead of making administrators collect and analyze sales data manually.
Lastly, it is easy to train. Although WooCommerce has some complex functions, it is still very
simple to use. Even those who do not have any experience in web development can ade-
quately manage the store skillfully in a short time, which is beneficial for the future mainte-
nance of the website by the H.SWare Oy.

WooCommerce can be downloaded in the plugin directory. After adjusting some basic settings
such as store area and currency, WooCommerce is installed successfully and products infor-
mation can be input. WooCommerce is bundled with Store page and Cart page which can be
used by adding them to menu directly. The setting up process will be explained in following
section 5.6.

5.5.2 All in One SEO Pack

Search engine optimization (SEO) is the process of affecting the visibility of a website or a
web page in a web search engine's unpaid results. SEO is the key element of successfully ad-
vertising any websites.

All in One SEO Pack is one of the all-time most downloaded plugins for WordPress (All in One
SEO Pack 2016). It is used to achieve the WordPress web page (especially the article page) of
 22

the overall optimization. As we know, WordPress is SEO-friendly in static URL and other as-
pects. However, in terms of title, description and keywords, it still shows particular weak-
ness. All in One SEO Pack plugin can appropriately make up for these needs.

5.5.3 WP Image Zoom

WP Image Zoom allows customers to see the details of images. It works well in WooCommerce
with easily enable the zoom on all the products’ images. It can also apply the zooming effect
on any images in normal pages. It would give users a better experience than only creating an
image gallery.

5.6 Setting up e-shop with WooCommerce

The setting up process shows as figure 12 in next page, which explains specifically as follows.
WooCommerce is downloaded in the WordPress plugins repository. After it was activated, a
tutorial for initial settings presented. WooCommerce will create four pages automatically
that are needed for an online shop, which includes Shop, Cart, Checkout and My Account
pages. However, Checkout page is not necessary in the main menu since customers can follow
the instructions in Cart page step by step to checkout. A clear and simple menu will provide a
better users experience. Hence, only the Shop, Cart and My Account pages are added to the
main menu. After the above steps, the WooCommerce has been set up completed and the
store can be accessed by the main page. The next step is adding new products to the shop.
There are two new tabs in the dashboard’s side menu-WooCommerce and Products. The new
products are added by creating a title and short description in Add Product which is a subpage
in the Products tab. The image, price and category of the product are also added in Add Prod-
uct section. The detailed process of adding products are explained in section5.7. To attract
customers, a coupon is then created by customizing the discount and restrictions in the cou-
pon editing screen, which will be one of good features of the website. The last step is finaliz-
ing Setting section in WooCommerce tab. There are 8 aspects of the e-store need to be cus-
tomized, which are General, Products, Tax, Shipping, Checkout, Accounts, Emails and API.
The store’s location, selling location and currency are customized in General tab. The weight
unit and dimensions unit are set as kilogram and millimeter in Products tab. There are no
other settings in Tax tab except choosing if the price entered with tax. The shop will not use
default shipping method because the shipping fee is hard to count. The company’s plan is
adding 5 euro to price of each product to be the shipping fee and they will use the third-party
shipping services. In other words, the entered price includes shipping fee thus customers
don’t need to pay extra. Hence, nothing has been set in the Shipping tab. The payment
method are chosen as bank transfer in Checkout tab and bank information has been uploaded.
The Account tab has been remained as default. Emails tab is used to set which email will re-
ceive the new order notification from WordPress. The author’s own email was utilized in the
 23

building phase and it is replaced by the company’s email after the website had launched.
There is no content changed in API tab. Afterwards, the e-shop has been setup completely.

Figure 12: Process of setting up e-shop

5.7 Adding new products

Adding new products is the core part of setting up an online shop. Before adding products, a
specific product brand and series classification was made. During the process, each product
was marked with an appropriate category and tag, allowing users have a clear understanding
of the classification of the product and also easy for users to search. All product images were
taken in the physical store and did not use pictures on those brands' official website in case of
copyright disputes. However, the product size data were obtained from the official website.
The introduction of brands and series were gathered and translated on the internet by the au-
thor. Since the website is mainly for Chinese customers, the entire contents of the site are in
Chinese. Furthermore, there were totally 30 items on the demo website.

5.8 Finalizing the website

Based on the group focus research method, the second group discussion was held. The team
members were the same as the first meeting. In this session, the author gathered some rea-
sonable suggestions. Mr.Huang thought that the products were of much less variety. It could
not show the scale of the shop. The shop manager came up with a creative idea that light mu-
sic played on the website can make customers relax and comfortable. The currency could be
 24

changed to Chinese Yuan because most Chinese people cannot pay Euro. The sign of Word-
Press and Sydney should not inscribe in the footer.

For the first problem, more products were uploaded to the site. As a result, there were 67
items in the final version. Secondly, a text function was added to widget which the content of
the text function was a set of code:

<embed src="http://www.xiami.com/widget/0_1769496770/singlePlayer.swf" type="applica-

tion/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed>

Then the page displayed a music player in widget part as Figure 13.

Figure 13: Display music player (Source: hsware.rockpug.com)

Thirdly, all the prices were transformed to RMB with a 7.6 exchange rate. Lastly, copyright
and contact email replayed previous content according to web design best practice checklist.
(Terry Ann Morris, ED. D. 2016). At this moment, the final website was created completely.

5.9 Features of the Website

A successful web page should take into account not only the user interface design but also the
practical functions. Every developer is striving to make website’s appearance and content
look more attractive. In the following chapter, some useful features of this site are de-
scribed.

5.9.1 A Google map

A Google Map was inserted (see figure 14) by using HTML5 codes to make this website look
more reliable. This can give Chinese customers who have not been Finland before a better im-
pression of the shop.
 25

Figure 14: codes to insert Google Map

5.9.2 Clear products categories

As it was mentioned before, a detailed product brand classification and series classification
were listed. Moreover, each product was marked with tags such as bowls, mugs, plates, ce-
ramics and glass. Customers can not only browse by the series of goods, but also search a par-
ticular type of products by clicking the tags (see figure 15).

Figure 15: Products Classification ( Source: hsware.rockpug.com)

5.9.3 Coupon Created

For the newly opened stores, using coupon is a good way to promote. Thus, in the project, a
coupon was designed, if the consumption is more than 3000 CNY, users can use the coupon
code to decrease the payment by 200 CNY. However, each user can only use once. The cou-
pon code was posted in the article at the home page. This was just a simple example of an
 26

offer, and the site administrator can design more discount events to attract customers in the
future.

6 Testing

This section contains the test part and launch and maintenance part according to waterfall
model. Functionality and compatibility were considered when test is preceded. After the
website was launched, the customer can access the site anytime and anywhere. Then the
training has conducted for staff in the company.

During the test process, a new user was created as a customer to test his actions in purchas-
ing products, commenting products and viewing the order in the personal account page. On
the other hand, administrator’s actions were also checked.

Figure 16: Purchasing Process

Figure 16 in previous page shows a whole purchasing process (website screenshots see appen-
dix1). User login first and then goes to the store page to choose what they want and add to
cart. At the same time, the user can decide to pay directly or continuing scanning. Next, the
user modifies the number of the products to confirm the order. The only one payment
method is the bank transfer. When the user selects “bank transfer” to pay, he can receive an
email with bank info and order description. In “My account” page, the user can view the or-
der and manage personal information. Next time the user purchases, the shipping address will
 27

default to the set address. When the user receives the goods, he can give comments in prod-
ucts description page. For those who do not register, they can also buy products and provide
comments, but they cannot view the order in “My account” page. For the administrator of the
site, he can find the order in WooCommerce management page and receive an email as a re-
minder (see figure17 and 18).

Figure 17: Order

Figure 18: Email Reminder

The compatibility of the website is tested in different browsers such as Google Chrome, Mi-
crosoft Edge, and Safari. It is also tested in difference devices. This site can adapt to a vari-
ety of browsers and devices because the WordPress and WooCommerce can support most
browsers and devices correctly.
 28

7 Implementation

The case company was not willing to buy a domain name and server considering the manage-
ment of server in the future, so the server and domain name were rented from one of the au-
thor’s friends. He established his own server. He allowed the website to use a subdomain
name to an existing domain name for free, but the company needs to pay him 20 euros per
month for renting the server. He indicates that he will be responsible for server operation and
management in the future. Mr.Huang agreed with this plan. Thus, the author asked him about
the server IP address, FTP account and domain name and uploaded all website files to FTP.
Then, the database was exported from local host and imported to the server. Lastly, the url
in WordPress management system was changed to hsware.rockpug.com. Now, the website of-
ficially launched and we can see in the following figure.

Figure 19: Main page of the website (Source: hsware.rockpug.com)

8 Training

After the site had launched, the site is delivered to the company. Their staffs should operate
the future management and maintenance. Since their employees do not have any experience
in managing the website, as the website developer, the author has the responsibility to teach
 29

them how to manage this site, as well as a variety of functions of the site. Therefore the au-
thor went to the company to give them demonstration of purchasing process by the user and
managing orders by the administrator. The author also taught them how to add, change prod-
ucts and post new articles. Taking into account the company's confidentiality, two new users
were created as administrators to their employees, and delete the developer's account. The
using email and bank information were replaced by the company’s. So far, the project was
finished. The author still can help them if they need to add new features or encounter any
problems.

9 Evaluation

Although this website has been on launched but it has not received any order until the thesis
report finished. The company is making publicity plan for the website. They plan to spread
the site to the tour guide, hoping the site can be extended to tourists. They will also publish
the website in WeChat official account. On the other hand, if Chinese tourist who visited the
physical store like our products, they can still purchase products from the website after they
go back to China.
From the feedback by the company, the project outcome is useful and functional and all the
requirements were achieved. The whole shopping process can be smoothly done via this web-
site. The outlook was designed properly which will give users a good emotion. They can man-
age it after training by the author. The cooperation was excellent and each step of process
was explained and informed to the company. Mr.Huang is keen to see that the site will help
the company increase sales in the off-season. He also believes that even if nobody orders
from it, the site does an excellent job of advertising the shop. More and more Chinese people
understand and like these brands are also his wishes. I will also keep in touch with this com-
pany to see the future development of this site. Mr.Huang is very satisfied with the website;
he said that if he opened the other store, he would still ask me to build a website.

The main goal of this project for me is to develop a shopping site and increase website devel-
opment experience by using WordPress. I used much knowledge learned in the classroom to
support this project. On the other hand, in the process of the project I have learned a lot of
new skills. From this point of view, I believe that the project is successful.

10 Conclusion

The website has been delivered to the company and they can manage it properly. From the
author’s perspective, however, there are suggestions given for the future development. The
company can consider using online payment to achieve money transfer. Because the default
online payment PayPal does not support Chinese yuan, it cannot be applied to this site. They
can try to install other payment applications such as Alipay and Wechat Pay that are common
 30

used in China. Besides, the products information should be updated frequently as well as the
coupon code. For example, they can upload new products and design promotion activities to
attract customers. Security test is also recommended to fulfill. Confidentiality should be con-
cerned for protecting customers’ data and sales status especially if they applied online pay-
ment. The website should provide a secure and convenient online shopping environment.

I believe the website will increase sales in the future. WordPress is a platform for a broad
range of applications, which can support any typical website. I will continue learning how to
use WordPress to build other types of sites, and I expect the cooperation with Mr.Huang next
time.
 31

References

Book Reference:

Scott, T & Harry, R. 2016. Systems planning. United States of America: Cengage Learning.

Scott, T & Harry, R. 2016. Use case diagrams. United States of America: Cengage Learning.

Christian, W. 2009. Setting objectives. England: Pearson Education Limited.

Christian, W. 2009. Requirements capture. England: Pearson Education Limited.

Scott, T & Harry, R. 2016. Create an attractive layout and design. United States of America:
Cengage Learning.

Online Reference:

H.SWare Oy. 2015. Accessed 30 November 2016.

http://www.kauppalehti.fi/yritykset/yritys/hsware+oy/27181403

Methodology. 2016. Accessed 20 October 2016.

https://en.wikipedia.org/wiki/Methodology

Waterfall model. 2016. Accessed 20 October 2016.

https://en.wikipedia.org/wiki/Waterfall_model

What is Waterfall model- advantages, disadvantages and when to use it? 2016. Accessed 20
October 2016.
http://istqbexamcertification.com/what-is-waterfall-model-advantages-disadvantages-and-
when-to-use-it/

Focus group use in disciplines. 2016. Accessed 20 October 2016.

https://en.wikipedia.org/wiki/Focus_group

Website wireframe. 2016. Accessed 20 October 2016.

https://en.wikipedia.org/wiki/Website_wireframe

Content management system & advantages. 2016. Accessed 20 October 2016

https://en.wikipedia.org/wiki/Content_management_system

HTML5 Features and APIs. 2016. Accessed 20 October 2016

https://en.wikipedia.org/wiki/HTML5

HTML5 Browser Support. 2016. Accessed 20 October 2016

http://www.w3schools.com/html/html5_browsers.asp

CSS Introduction. 2016. Accessed 20 October 2016

http://www.w3schools.com/css/css_intro.asp

XAMPP Etymology & Features. 2016. Accessed 20 October 2016

https://en.wikipedia.org/wiki/XAMPP

Bring MySQL to the web. 2016. Accessed 20 October 2016

https://www.phpmyadmin.net/

CMS Usage Statistics. 2016. Accessed 20 October 2016

http://trends.builtwith.com/cms
 32

Robert Mening.2015. WordPress vs Joomla vs Drupal. Posted December 28. Accessed 20 Octo-
ber 2016
http://websitesetup.org/cms-comparison-wordpress-vs-joomla-drupal/

Sydney By athemes. 2016. Accessed 20 October 2016

https://wordpress.org/themes/sydney/

WooCommerce Description. 2016. Accessed 20 October 2016

https://wordpress.org/plugins/woocommerce/

All in One SEO Pack Description. 2016. Accessed 20 October 2016

https://wordpress.org/plugins/all-in-one-seo-pack/

Terry Ann Morris, ED. D. 2016. Web design best practice checklist. Accessed 26 November
2016
http://terrymorris.net/bestpractices/
 33

Figures

Figure 1: Structure of the Thesis ........................................................................ 8

Figure 2: Waterfall Model ................................................................................ 9
Figure 3: Use case diagram ............................................................................ 14
Figure 4: Check list ...................................................................................... 15
Figure 5: Main Page ...................................................................................... 15
Figure 6: Shop Page ..................................................................................... 16
Figure 7: Navigation structure ......................................................................... 16
Figure 8: Installing XAMPP .............................................................................. 17
Figure 9: Creating database and user ................................................................ 18
Figure 10: setup in WordPress ......................................................................... 19
Figure 11: Effect of Changing CSS (Source: hsware.rockpug.com) .............................. 20
Figure 12: Process of setting up e-shop .............................................................. 23
Figure 13: Display music player (Source: hsware.rockpug.com) ................................ 24
Figure 14: codes to insert Google Map ............................................................... 25
Figure 15: Products Classification ( Source: hsware.rockpug.com) ............................. 25
Figure 16: Purchasing Process ......................................................................... 26
Figure 17: Order.......................................................................................... 27
Figure 18: Email Reminder ............................................................................. 27
Figure 19: Main page of the website (Source: hsware.rockpug.com) .......................... 28
 34

Appendices

Appendix 1: Screen shots of ordering process ...................................................... 35

 35
Appendix 1

Appendix 1: Screen shots of ordering process

 36
Appendix 1