Bài báo cáo Đề tài thiết kế webite ecommerce trên wordpress

MOII ccsmetic -Mỹ phẩm Hễ Ngọc Hà thươn Flatsome Activate Theme 3 § + Mố fồ Bảng tin Trang, | thêm trang mới Flatsome This theme recommends the following plugins: Contact Form 7, Nextend

NGÂN HÀNG NHÀ NƯỚC VIỆT NAM BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC NGÂN HÀNG TP HÒ CHÍ MINH

BAI BAO CAO

Dé tai: Thiét ké Webite Ecommerce trén Wordpress

Lớp: D02 Giảng viên: Th.s Phó Hải Đăng

Thành phá Hồ Chí Minh, ngày 17 tháng 10 øzm 2023

030237210107 -_ 030237210092

-_ 030237210205

-_ 030237210160

DH37TMO1 DH37TM02 | DH37TMOI1 | DH37TM02 | DH37TMO2 | DH37TM02 DH37TM02 DH37TM02

Nguyễn Thị Kiều My Nguyễn Trà My

Võ Huỳnh Anh Thư

Nguyễn Khánh Ly

| Phạm Thị Ngọc Huyền | Văn Thị Phương Uyên |

Vo Nguyễn Như Quỳnh | Đinh Thị Tuyết Hồng _

12,1% 13,2% 12,1% 14,2% 12,1% 12,1% 12,1% 12,1%

THIET LAP, CHINH SU'A TUNG TRANG .seeseseeseesesieeeeseeieeaeeeeetnneeeeenneettens 14

“Hi 14

4.1.1 Tạo trang, CHINN SỨ ch nọ KT vs 14

4.1.2 Dùng Ux-j/ock rạo cậc 6Ìem€fi[ - - -< HS HH HH Tnhh 16 4.1.3 Tạo mmeHÓ Cho ErAHĐ CHỈ uc SH KH tt 20 VI ng on ố e 21

7 ri n5 eerố A 28 4.3.1 Tạo danh mục sản phẩm HT ĐK nọ H5 E805 KEĐ E5 88015 8055 8809 E8 EEg 28 4.3.2 Thêm thuộc tính sản pÌiẨNH 55c se text cirrEeeretrtrerrkerrrerrreeree 30 z6 T5 1 5 na 4 HẬẬH 31

“.ẽ ống ố ng nốố ốố.ố.ốe 36

4S Trang LIQ N6 cố e 43 MOT SO HINH ANH HOAN THIEN CỦA TRANG WERB - ccce 45

1 CAIDAT WORDPRESS

Bước 1: Cài WordPress từ hosting đã đăng kí

— Cài tài khoản trên Infinyti

— Vao Control Panel > Softaculous App Installer WordPress

® ) WordPress By Joomla A AbanteCart

SS hờn NOY eat: kk PO kent

Ñ colenders

WordPress is a state-of-the-art publishing Joomla is an award-winnir 4S, which Abantec is a free PHP based

n aesthetics, web enables you to build Web sites and eCommerce solution for merchants to platform with a focus o

standards, ond usability powerful online applications

©® Gaming

provide ability creating online b [ more]

sfrwareBisoft=26Atab=install lcpsess 19309147 14/frontend/x2/softsculous/indexlive phe”;

@ )) WordPress kấ Joomla A AbanteCart

NS weet weet *tưu đe

WordPress is a state-of-the-ort publishing Joomis is an award-winnin

‘orm with @ focus on aesthetics, web enables you to build W AbonteCort is a free PHP based

©® Gaming eCommerce solution for merchants to

standards, and usability powerful online applications provide ability creating online b [ more]

BEE [oer | [ovenew Em -

Enoble Multisite WPMU) @[ Bad (37/100)

Disable WordPress Cron @[—]

Admin Email thienI6102003@gmailcom

Choose Language Select Plugin(s)

b 0U 1U 01 ed

Select Language ) Backups (Backuply) @

v Improve Page Speed (SpeedyCache) @ ] Limit Login Attempts (Loginizer) @ Email with SMTP (GoSMTP) @f } sical II ST File Manager(FileOrganizer) @

@ Shopeeshopeev

Search Q

4œ WordPress # # # ##:

_ Release Date : 12-10-2023 ir) rview Features Screenshots Demo Ratings Revie Import Congratulations, the software was installed successfully

WordPress has been sstully installed at

hi tal 1123456 fri trotlve URL: htte

Admin 6 free.nt/wp-admin)

We hope the installation process was easy

NOTE: Softaculous is just on automatic software installer and does not provide any support for the individual software packages Please visit the software vendor's web site for support!

re Ps Na

Regards [#ˆ Project Monogement Softaculous Auto Installer

Bước 2: Tạo các page của web

- 6o

ẨÊj MOII ccsmetic -Mỹ phẩm Hễ Ngọc Hà thươn Flatsome Activate Theme 3 § + Mố

fồ Bảng tin Trang, | thêm trang mới

Flatsome

This theme recommends the following plugins: Contact Form 7, Nextend Social Login, Unlimited Sidebars Woosidebars and YITH WooCommerce Wishlist

Tất cả các trang Tiêu đề ác giả , hỡi gian

Thêm trang r Chính sách đối trả hàng — Bản nháp hong _ Lin sta gin nhất

Hl Analytics Giới thiệu — Elementor vanuy š xuất bản

“ 1/10/2023 lúc 12:

© Tiếp thi về

a smetic -Mỹ phẩm Hồ Ngoc Hà thươn Flatsome Activate Theme 3 § + Mớ Chào, hong

Tửy chọn hiển thị v Trợ giúp v

fề Bángtia : ns

en Thêm trang mới

Flatsome

This theme recommends the following plugins: Contact Form 7, Nextend Social Login, Woosidebars and YITH WooCommerce Wishlist 9

#* Bài viết Bogin installing plugins | Dismiss this notice

Cài theme flatsome cho giao diện thương mại điện tử

— Vao Themes chọn Themes — Add new themes

Cha (khéng cé trang cha) v

— Sau do download file zip themes flatsome đã tải từ trước lên

Chon Cai đặt —> Kích hoạt

đề Bảng tín Thêm giao diện | ré go siea len | =—

Flatsome

ne recommends the following plugins: Contact Form 7, Nextend Social Login, Unlimited Sidebars Woosidebars and YITH WooCommerce Wishlist °

#È` Bai viet Begin installing plugins | Dismiss this notice

'Welcome to the Swedish

EØ weecemmerce Hel lo Museum of Modern Art

Ẩ) @ MO cosmetic -Mỹ phẩm Hồ Ngọc Hả thươn Flatsome Activ

bwin Thêm giao dién

Flatsome

o3 8 + Mới

This theme recommends the following plugins: Contact Form 7, Nextend Social Login, Unlimited Sidebars Woosidebars and YITH WooCommerce Wishlist

Z` Bài viết Begin installing plugins | Dismiss this notice

® Bảng Đang cài giao diện từ file được tải lên: flatsome.zip

` Bài Đang giải nén tap tin

nh Đang cải đặt chủ

B tang Cải đặt giao diện thãnh công

LẮU Xem trước | Kích hoat trang Quản Jý Giao diễn:

Some of your translations need updating sit onds while they are updated as wel L3

ang nang cấp bản dịch cho WordPress (Vi)

dịch đã được cập nhặt thành cổng

ang nang cap ban dich cho (vi) dịch đã được cập nhật thanh céng,

Phiên bản 8.3.2 test123⁄456 free.n#/wp-sdmin/themes phpactien=actiatef:tempi

<> FLATSOME

Welcome to the setup wizard for Flatsome

Thank you for choosing the Flatsome theme from Themeforest This quick setup wizard will

help you configure your new website This wizard will install the required WordPress plugins,

default content, logo and tell you a little about Help & Support options

It should only take 3-5 minutes

test]23456 free nf/wp-admin/

3 CAI PLUGIN CHO CAC TRANG TUONG UNG

3.1 Cai Plugin Classic Editor ( Trang chu )

Plugin này là một trình soạn thảo cho phép người dùng sử dụng WordPress với giao diện trước đây

— Vào Plugin chọn “Cài mới”

7 giúp v

Thêm gói mở rộng | rải susin lea his theme recommends the following plugins: Contact Form 7, Nextend Social Login, Unlimited Sidebars Woosidebars, WooCommerce and YITH WooCommerce Wishlis ° agin installing plugins | Dismiss this notice

Từ khóa v

plugins in the WordPress Plugin om here or up! a plugin in zip format by clic

Akismet Anti-spam: Spam

Protection

editor and Che tit Chỉ tiết

h a - The best anti-spam protection to block

# Công cụ 5 triều + lượt kích hoạt *xw*w** (142) Tương thích với phiê Cập nhật lần cuối: 2 tháng trud s của bạt *w#w*ÝŸ: se) 5 triệu+ lượt kích hoạt Tương thích với phiên bản WordPress của bạn

456 free nf/wp-admin/update,phpZection=install-pluginStplugin editor wpnonce=@07bédetBe

— Sau đó bấm “Kích hoạt”

2 -

This theme recommends the following plugins: Contact Form 7, Nextend Social Login, Unlimited Sidebars Woosidebars, WooCommerce and YITH WooCommerce Wishlist 9

xÈ 5 agin installing plugins | Dismiss this notice

VN TT Tương thích vẻi phiên bản WordPress của bạn, 5 triệu + lượt kích hoạt Tương thích với phiên bản WordPr

3456 ree.nf/wp- Mplugins.php?_wpnorces: e&iplugin= classic-editor/classic-editor.php

3.2 Cai dat Plugin Elementor (Trang giới thiệu)

Chọn Plugin cài mới —> Gõ tìm kiếm Elementor — Cài đặt — Kích hoạt

= se Elementor Website Builder — Royal Elementor Addons

hơn cả một page builder and Templates

` Cập nhật lần cuốt: 7 ngầy trước Cập nhật lần cuốE 1 tuần tr

Tương lên bản WordDress củ v' Tương thích với phiên bản Word? ab

——- Premium Addons for The Esse

a> Blog Fo enu, elements including Advan “ đ& Thành viên we + t al vent Calendar, Filterable Gal

iThemetand Free Gifts For Woo Lite fi

Woosidebers, d YITH ist ° bật Được quai Từ khóa v woocommerce e°

1/086 mye + |weaze[ > |[ »] WooCommerce oi CAI WooCommerce PayPal [ cà ase |

Everything you need to launch an onlire store hi tiết Payments Chitiết

in days and ep it growing for years From

your firet eale to millions ih revenue, Woo ie with you

Bởi Automattic

C‡p nhật lần cuối: 5 ngày trước '/ Tương thích với phiên bên WerGPress của bạn, 'WooCommerce Stripe Payment Cài đặt

Gateway

Chí tiết Take credit card payments on your store using Stripe

Bởi WooCommerce

Cập nhật lần cuối

«ồ - Bước l: Chọn mục plugin

« Bước 2: Chọn cài mới

« - Bước 3: Tìm kiêm từ khoá Woocommerce

« - Bước 4: Nhấn cài đặt và kích hoạt

PayPal latest payment processing solution

PayPal Accep! PayPal, Pay Lat alternative digital wallets and bask accounts redit/sebit cords, Bởi WeoCommerce WKLY 043) Cập nhật lắn cuối: 4 tuần trước 600.000+ lượt kích hoạt ' Tương thích với phiên bên WOrơPress của bạn WooCommerce Advanced Free IEVNI

Shipping

Chitiết

mm WooCemmerce Advenced Free shipping Is a

|= | slugin which allows you to set up advanced free shipping conditions Bởi Jeroen Sormani wkkkk 50.000+ lượt kích hoạt ' Tương thích với phiên bản WordPress của bạn

Cập nhậtlần lối: 2 thắng trước

3.4 Cai dat Plugin: Woocommerce VietNam Checkout (Trang thanh toan)

10

kế Uaulx, Variation Swatches for WooCommerce

3.5 Cai Plugin Button contact VR cho cac nut lién hé (Facebook, Instagram, Email)

e Nhan vao Settings cia Button contact VR

11

Hãnh động nee mme Plugin Mô tả

—l>—.—- Akismet Anti-spam: Spam Protection Used by millions, Akismet is quit n the world to protect your blog from spam

oe Kích hoạt | Xóa Akismet Anti-spam keeps your 2 you sleep To get startec vate the Akismet

plugin and then go to your Ak up your ADI key

al ac Phién ban 5.3 mattic - Anti-spam Team | Xem

® Tiếp thị

in-One WP Migration Cöng cụ di chuyển dữ liệu blog của hập vã xuất nội dung blog với vải click đơn giản Bặt cập nhật tự đông

bs tor Kích hoạt | Xóa Phiên bản 7.79 | Bởi 5; k| Xem chỉ

co

Button contact VR Button contact call, zalo, whatsapp, me Bật cập nhật t 1

No HES Phién ban 4.7 VirusTran | Xem chỉ tiết

Plugin Chao Dolly ng

Kích hoạt | Xóa nhiều chất nhớ ý Sau

Plugin đã cải đặt d

trị của ban

7 ` Phiên bản 1.7.2 | Bdi Matt Mullenweg | Xem chi tiét

& Thành v Classic Editor Bật tình soan thảo cổ

N k at | Cải đặt hop meta, viv) Hỗ trợ các g

Phiên bản 1.6.3 | Bởi Cé tiết

e Nhập số hotline -> Chọn màu Xanh

e Nhập đường link Instagram

e Nhập đường link Fanpage

Nà Please visit this link

© Cdm ơn bạn đã khới tạo với Wi Phiên bản 6.3.2

— Tiếp đến, nhấn vào Setting để

thay đôi ở dưới

chỉnh kích cỡ và vị trí của các nút và nhân lưu

Le ntact | Showroom Contact form (beta) Allinone) Setting

Size scale Ren ee Eg-08-09-1T-1

#! Công cụ Add custom CSS here

Re Custom JS Add custom JS here! You need to have a SCRIPT tag around script

Ñ

13

— Cùng nhìn vào ở dưới bên phải trang để xem kết quả

This theme recommends the following plugins: Contact Form 7, extend Social Login, Unlimited Sidebars Woosidebars, WooCommerce and YITH WooCommerce Wishlist ®

Begin installing plugins | Dismiss this notice

ri

Plugir C] Tiêu đề ‡ Tắc giả BR: Thời gian ‡

test123456 tee.nfwp-admin/post-newiphp?posttype=p30ê ; „„ a

14

— Chinh swa trang chu

e Màn hình chỉnh sửa: Thêm logo, thay màu nền

e Chon phan cân chỉnh ở menu bên trái

15

e Ở phần Header Bulder có thể kéo thả để thêm các thành phần bạn muốn xuất hiện trên trang chủ

4.1.2 Dung Ux-block tgø các element

o Add new 1 UX-Blocks tén la footer

o Vao phan Customzing chon Footer > chon Footer block vira moi tạo

16

o Vétrang chu, chỉnh sửa footer bằng cách nhấp vào như hình

— Add các element phù hợp với trang web bạn xay dung: section, slide

17

Trả lời

Đăng nhập với t z ChÌnh sửa hỗ sơ của ban Đăng xuất? Các trường bắt buộc được dấu

Bình luận *

Add elements

Trả lời

Đăng nhập với tên hong Chỉnh sửa hồ sơ của bạn Đãng xuất? Các trường bất buộc được đánt dau

— Cài đặt trang chủ là trang web tinh

* Giao diện Tổng quan g quan ›c‡

oy iao diện của bạn xác định cách hiến thị nội dung trong trình duyệt Tìm hiểu thêm về nguồn cấp dữ liệu :

Select or Upload image

Tai file Media

19

€ Tiếp thị Thiết lập menu

ra Tư đông thêm trang tỉnh nhất mếi vào trình đơn này

— Trang rạng Cửa hải cửa hàng Giối thiệu ElementorY Elementor

@ M0 cosmetic -My phim Hd Ngoc Ha thuon Flatsome i Activate Theme 3 + Mới Chào, hong

= Moi nhst Xemtétc3 Timkiếm Kéo các mục tới vi trí ban meng muốn Nhấp chưệt vào mài tên bên phải để thiết lắp tu chỉnh cho môi mục

Hi Sin phim lên hệ : Chọn hàng loạt

Thanh toán @ äi khoản — Trang Tái khoản

al Analytics hanh toản — Trang Thanh toán Trang Chủ a

Sid hing — Trang Giỏ hãng

Tiếp thị tửa hàng — Trang Cửa hàng -

Giới thiệu lemento: v

PB Elementor

3 Elementor

tiên hệ Trang ¥

Terpiate họn toàn b

Thêm vào menu

## Giao diện _——— Phấn nước Danh mực ¥

ie @ Bai viet [TANG TAY TRANG MINI] PHAN Sản phẩm

Tùy biến PHU DANG NEN N.0.| BABY SKIN

ston UX Blocks POWDER #02 ~ Tone tự nhiền chi

mục con

Menu Sản phẩm

tstall Piugin BỘ ĐÔI M.O.I PHẤN NƯỚC BA8Y xphẩm Y

Portfolio ` Theme File E: SKIN CUSHION VA PHAN PHU

BABY SKIN POWDER hii uc cov

vỊ ITH Liên kết tự tạo ý x*

Ke Plugin Chuyén muc x — TRE

$ Thành viên Format Xóa menu

4.2 Trang giới thiệu

# — Vào trang GIỚI THIỆU: cột bên phải chỗ Giao diện ta chọn Elementor Full Width

và sau đó chọn sửa với Elementor

8 Giao diện hình sau đây sẽ chỉ làm 2:

Một bên là gồm các widget đề kéo thả vào trang nội dung cần chỉnh sửa bên phải

21

TAM NHIN M.O.1 sé tré thanh thuong hiéu mỹ phầm Việt hội tụ các yếu tố về chất lượng, uy tin và thỡi trang, là ưu tiên lựa chọn hàng đầu

ies reac

Phường 19,qu

Ces © Unleash the full power of Elementor’s features and web cree

— Phần nội dung gõ “GIỚI THIỆU” và căn chỉnh nội dung ở giữa

— Muôn chỉnh màu chữ và kiêu chữ bâm sang “Kiêu”

22

MoO

“ © ° Meke Over Image

Nội đựng kiều Ning exo

Tim eden ã [TÀI KHOĂN +] GIỎ HÀNG/VND0.00 TRANGCHỦ GIỚITHIỆU LIÊNHỆ PHÁẤNNƯỚC ⁄ SONMÔI

+ Tiêu đề

Mẫu ch ou Mục tiêu của M.OI sẽ dat sản lượng tiêu thu 1.000.000 san pham trong năm đầu tiên

Typography eZ MOI sẽ là niềm tự hào của ngưỡi Việt trên thị trưởng mỹ phẩm thế giới

© Unieash the full power of Elementor's features and web creation tools

— Muốn thiết lập khoảng cách dòng GIỚI THIỆU trong bồ cục trang đẹp mắt hơn vào “Nâng cao”

Kao aR eke A ac aca ad

" tons eas a GIGI THIEU

GIỚI THIỆU CHUNG VỀ M.O.!

Chẩutông Œ Mặc định x ‹ MOI là thương hiệu mỹ phẩm trang điểm

chuyên nghiệp đầu tiên tại Việt Nam với tiêu

AllgiSef © = | = chuẩn chất lượng quốc tế và giả hợp lý dành

cho phu nữ Việt Order tT 4 MOI luén déng hành cùng các chuyên gia 4

hàng đầu trong ngành mỹ phẩm thế giới &

những biếu tượng sắc đep tại Việt Nam đế

tao ra những dòng sản phám chất lượng, en

phù hợp với phong cách, khí hậu và thu

nhập của người Việt Œ J Tất cả sản phầm của M.O.I Cosmetics đều

CERES © Unieash the ful power of Flementors features and web creation tools

— Hình dưới là phần nội dung ta cần làm tiếp theo

23