Giáo trình thương mại điện tử 3 (nghề thương mại điện tử trung cấp

Giỏ hàng: Trang này sẽ là trang giỏ hàng của chúng ta khi thêm hàng vào giỏ, nó sẽ hiển thị các sản phẩm có trong giỏ hàng.. Thiết lập Shop làm trang chủ Ở một số theme riêng dành cho Wo

1

BỘ CÔNG THƯƠNG TRƯỜNG CAO ĐẲNG DU LỊCH VÀ CÔNG THƯƠNG

GIÁO TRÌNH MÔN HỌC/MÔ ĐUN: THƯƠNG MẠI ĐIỆN TỬ 3

NGÀNH/NGHỀ: THƯƠNG MẠI ĐIỆN TỬ

3

LỜI GIỚI THIỆU

Đào tạo Thương mại điện tử có trình độ cao đẳng hoặc trung cấp nghề là

một nội dung đào tạo tương đối mới ở Việt Nam Vì vậy phương tiện và kinh

nghiệm giảng dạy trong đó có tài liệu học tập cho đối tượng này chưa có nhiều

Nhằm khắc phục khó khăn về tài liệu học tập của sinh viên ngành này,

chúng tôi đã biên soạn cuốn sách Giáo trình Thương mại điện tử 3 và phát triển

nghề Thương mại điện tử

Cuốn sách được viết dựa trên chương trình hiện đang áp dụng giảng dạy cho

đối tượng Cao đẳng và Trung cấp nghề hệ chính quy tại các trường cao đẳng hiện

nay Cuốn sách này là tài liệu học tập cho học sinh cao đẳng hoặc trung cấp, đồng

thời có thể sử dụng như tài liệu tham khảo cho các đối tượng học viên khác

Mặc dù đã rất cố gắng, nhưng đây là cuốn "Giáo trình Thương mại điện tử

3" đầu tiên dành cho đối tượng cao đẳng/trung cấp của trường không thể tránh

khỏi những sai sót, rất mong sự đóng góp ý kiến của các thầy giáo, cô giáo, các em

học sinh, sinh viên và các bạn đồng nghiệp để cuốn sách được hoàn thiện hơn

Chúng tôi xin chân thành cảm ơn Ban Giám hiệu Nhà trường, các nhà

chuyên môn và bạn đọc đã giúp đỡ, động viên, tạo điều kiện cho chúng tôi hoàn

thành cuốn giáo trình này

Hải Dương, ngày tháng năm

Tham gia biên soạn

Chủ biên

Nguyễn Đức Hải

4

MỤC LỤC

2 Bài 1: Cài đặt và sử dụng WooCommerce plugin 13

3 Bài 2: Đăng sản phẩm lên website trong WooCommerce 24

4 Bài 3: Cài đặt thuế trong WooCommerce 39

5 Bài 4: Cài đặt tính phí giao hàng trong WooCommerce 47

6 Bài 5: Cài đặt phương thức thanh toán trong

5

GIÁO TRÌNH MÔN HỌC

1 Tên môn học/Mô đun: Thương mại điện tử 3

2 Mã môn học/Mô đun: MĐ 16

3 Vị trí, tính chất, ý nghĩa và vai trò của môn học/mô đun

3.1 Vị trí

Mô-đun Thương mại điện tử 3 thuộc nhóm các môn học kiến thức chuyên ngành, được giảng dạy sau khi đã học xong các môn Tiếng Anh thương mại, thư tín thương mại, thanh toán điện tử, Marketing điện tử, Mạng máy tính,Quản trị website thương mại

3.2 Tính chất

Thương mại điện tử 3 là môn học nghiệp vụ, trang bị cho học sinh những kỹ năng giao dịch thương mại trực tuyến giữa những người tiêu dùng thông qua một bên thứ ba (một trang web làm trung gian đấu giá trực tuyến hay bán hàng trung gian ) có sử dụng phần mềm WooCommerce plugin

3.3 Ý nghĩa và vai trò của môn học

Môn học mạng máy tính giúp cho sinh viên biết được các kỹ thuật cơ bản trong quá trình xây dựng, bảo vệ và khai thác cơ sở hạ tầng mạng máy tính trong các doanh nghiệp thương mại điện tử

4 Mục tiêu môn học

4.1 Về kiến thức

+ Trình bày được tổng quan về phần mềm WooCommerce plugin

+ Liệt kê được các công cụ phần mềm WooCommerce plugin

+ Mô tả được các quy trình giao dịch của phần mềm WooCommerce plugin

4.2 Về kỹ năng

+ Tổ chức thực hiện các hoạt động giao dịch của phần mềm WooCommerce plugin

+ Vận dụng kiến thức về giao dịch của phần mềm WooCommerce plugin để

tổ chức kinh doanh trong thương mại điện tử

4.3 Về tự chủ và tự chịu trách nhiệm

+ Tuân thủ các qui chế học tập, tích cực, chủ động trong quá trình học tập;

6

+ Trung thực và có ý thức tạo lập được chữ tín trong giao dịch kinh doanh của một cán bộ nghiệp vụ trong Doanh nghiệp

5 Nội dung của mô đun

5.1 Chương trình mô đun

Mã MH,

Số tín chỉ

Thời gian đào tạo (giờ)

Tổng

số

Trong đó

Lý thuyết

Thực hành/

thực tập/thí nghiệm/bài tập/thảo luận

Kiểm tra

II.2 Các môn học, mô đun

7

Mã MH,

Số tín chỉ

Thời gian đào tạo (giờ)

Tổng

số

Trong đó

Lý thuyết

Thực hành/

thực tập/thí nghiệm/bài tập/thảo luận

Kiểm tra

MH11 Tiếng anh thương mại 2 45 15 28 2 MĐ12 Thương mại điện tử 2 4 96 24 64 6 MĐ13 Thanh toán điện tử 2 48 12 32 4 MĐ14 Quản trị website thương mại 4 96 24 64 8 MĐ15 Thương mại di động 3 60 29 26 5 MĐ16 Thương mại điện tử 3 5 120 30 81 9 MĐ17 Thực tập nghề nghiệp 8 360 356 4

III Các môn học đào tạo nghề

Thực hành, thí nghiệm, thảo luận, bài tập

Kiểm tra

1

Bài 1: Cài đặt và sử dụng

1 Cài đặt WooCommerce tiếng Việt 3 1 2

2 Cài đặt và kích hoạt plugin 7 2 5

Thực hành, thí nghiệm, thảo luận, bài tập

Kiểm tra

1 Đăng sản phẩm đơn giản 10 2 8

2 Tìm hiểu Trang sản phẩm, Giỏ hàng

1 Tắt / Bật chức năng Kích hoạt thuế 2 1 1

2 Cài đặt tùy chọn thuế trong

Thực hành, thí nghiệm, thảo luận, bài tập

Kiểm tra

3 Các cổng thanh toán Momo, Zalo

Pay,Moca Grab, AirPay 6,5 1,5 4 1

6 Điều kiện thực hiện môn học:

1 Phòng học chuyên môn hóa, nhà xưởng: Phòng học, xưởng thực hành đúng tiêu chuẩn và đủ điều kiện

2 Trang thiết bị máy móc:

- Máy tính, máy chiếu, bảng thông minh

- Máy móc thiết bị chuyên dụng cho chương trình

3 Học liệu, dụng cụ, nguyên vật liệu:

- Đề cương, giáo án, slide từng bài giảng, giáo trình tài liệu tham khảo

- Phần cứng: Các vật tư cho chương trình, đường truyền mạng và khác;

- Phần mềm: Hệ điều hành Windows, các trình điều khiển thiết bị, phần mềm WooCommerce

- Câu hỏi, bài tập thực hành

4 Các điều kiện khác:

- Kỹ năng: Đánh giá kỹ năng thực hành của sinh viên: Lựa chọn được, sử dụng thành thạo công cụ thực hành; đưa ra được giải pháp và phương thức thao tác; áp dụng hiệu quả trong thực tế các kiến thức và kỹ năng đã học; phòng tránh được các sai hỏng trong khi thực hiện các công việc; nâng cao kỹ năng sử dụng

- Năng lực tự chủ và trách nhiệm: Tuân thủ nội qui, qui định an toàn cho người, máy tính và thiết bị khác; tính cẩn thận trong khi tác nghiệp kỹ năng cũng như sử dụng máy máy móc và thiết bị khác; ý thức chấp hành tổ chức, kỹ luật trong quá trình luyện tập;

7.2 Phương pháp:

- Kiểm tra lý thuyết với các nội dung đã học;

- Kiểm tra thực hành bằng bài tập thực hành tạo ra sản phẩm

- Đánh giá cuối môn học: Kiểm tra theo hình thức: kết hợp lý thuyết với thực hành

7.2.1 Cách đánh giá

Áp dụng quy chế đào tạo Cao đẳng hệ chính quy ban hành kèm theo Thông

tư số …./20… /TT-LĐTBXH, ngày …… của Bộ trưởng Bộ Lao động - Thương binh và Xã hội

Hướng dẫn thực hiện quy chế đào tạo áp dụng tại Trường Cao đẳng Du lịch

và công thương như sau:

Điểm đánh giá Trọng số

+ Điểm kiểm tra thường xuyên (Hệ số 1) 40% + Điểm kiểm tra định kì (Hệ số 2) + Điểm thi kết thúc học phần lý thuyết 60%

7.2.2 Phương pháp đánh giá

- Điểm kiểm tra thường xuyên: 2 điểm kiểm tra 15 phút, hỏi miệng

- Kiểm tra định kỳ lý thuyết: 2 điểm kiểm tra

+ Hình thức: Kiểm tra viết

+ Công cụ: Câu hỏi truyền thống cải tiến

+ Thời gian: 45 phút

11

- Thi kết thúc môn học lý thuyết: 1 điểm

+ Hình thức: Thi trắc nghiệm khách quan

+ Công cụ: Ngân hàng đề thi/ Bộ câu hỏi trắc nghiệm khách quan

8 Hướng dẫn thực hiện môn học

8.1 Phạm vi, đối tượng áp dụng:Đối tượng học sinh cao đẳng/trung cấp nghề

Thương mại điện tử

8.2 Phương pháp giảng dạy, học tập môn học

8.2.1 Đối với giảng viên

* Lý thuyết: Áp dụng phương pháp dạy học tích cực bao gồm: Thuyết trình ngắn,

nêu vấn đề, hướng dẫn đọc tài liệu, bài tập tình huống…

* Thảo luận: Phân chia nhóm nhỏ thảo luận theo nội dung đề ra

* Hướng dẫn tự học theo nhóm: Nhóm trưởng phân công các thành viên trong

nhóm tìm hiểu, nghiên cứu theo yêu cầu nội dung trong bài học, cả nhóm thảo luận, trình bày nội dung, ghi chép và viết báo cáo nhóm

8.2.2 Đối với người học

Sinh viên phải thực hiện các nhiệm vụ như sau:

- Nghiên cứu kỹ bài học tại nhà trước khi đến lớp Các tài liệu tham khảo sẽ được cung cấp nguồn trước khi sinh viên vào học học phần này (trang web, thư

viện, tài liệu )

- Tham dự tối thiểu 70% các buổi giảng lí thuyết Nếu học sinh vắng >30% số tiết lý thuyết phải học lại môn học mới được tham dự kì thi lần sau

- Tự học và thảo luận nhóm: là một phương pháp học tập kết hợp giữa làm việc theo nhóm và làm việc cá nhân Một nhóm gồm 8-10 sinh viên sẽ được cung cấp chủ đề thảo luận trước khi học lý thuyết, thực hành Mỗi sinh viên sẽ chịu trách nhiệm về 1 hoặc một số nội dung trong chủ đề mà nhóm đã phân công để phát triển và hoàn thiện tốt nhất toàn bộ chủ đề thảo luận của nhóm

- Tham dự đủ các bài kiểm tra thường xuyên, định kỳ

12

- Tham dự thi kết thúc học phần lý thuyết và thực hành doanh nghiệp

- Chủ động tổ chức thực hiện giờ tự học

9 Tài liệu tham khảo:

1 1 Marketing thương mại điện tử; Nguyễn Hoàng Việt; NXB Thống kê;2011

2 Internet

BÀI 1 CÀI ĐẶT VÀ SỬ DỤNG WOOCOMMERCE

Mã bài học: MĐ 16-01

MỤC TIÊU BÀI HỌC

- Mô tả được quy trình cài đặt và sử dụng WooCommerce plugin

- Thực hiện được quy trình cài đặt và sử dụng WooCommerce plugin

- Chịu trách nhiệm với kết quả công việc

- Khả năng làm việc độc lập và làm việc nhóm

- Nghiêm túc, tích cực, chủ động trong hoạt động học tập, nghiên cứu

- Tự học tập, rèn luyện kỹ năng nghiệp vụ

NỘI DUNG BÀI HỌC

1 Giới thiệu WooCommerce

1.1 Giới thiệu WooCommerce

WooCommerce là phần mềm thương mại điện tử miễn phí giúp chúng ta dễ dàng bán sản phẩm và dịch vụ trực tuyến Trong những năm qua, nó đã được sử dụng bởi hàng triệu doanh nghiệp lớn và nhỏ

WooCommerce Plugin được phát triển như một phần mở rộng của WordPress, là trình xây dựng trang Web phổ biến nhất trên thị trường Điều này cho phép người dùng xây dựng Website thương mại điện tử từ đầu Bên cạnh đó, người dùng cũng có thể thêm chức năng giỏ hàng vào Website hiện có

Là một plugin miễn phí được sử dụng để tạo một trang thương mại điện tử

cỡ nhỏ tốt nhất hiện nay trong WordPress Nó cũng như bao plugin khác là bổ sung chức năng vào website nhưng nó sẽ bổ sung gần như toàn diện các chức năng

mà một trang bán hàng đơn giản cần có

Woocommerce sẽ có các chức năng chính như:

Hỗ trợ tự tính thuế sản phẩm hoặc thuế theo đơn hàng

Hỗ trợ tự tính giá chuyển phát, có rất nhiều loại tính giá chuyển phát và sẽ

đa dạng hơn khi cài thêm plugin như có thể tính giá chuyển phát dựa theo cân nặng, kích thước, tỉnh thành,…

Trang quản lý đơn hàng chuyên nghiệp, lọc đơn hàng thông qua từng trạng thái

Hỗ trợ template hiển thị riêng để có thể tự cấu hình lại template hiển thị phần shop và sản phẩm, cái này rất có lợi cho lập trình viên

Có sẵn nhiều theme và extension (plugin mở rộng) để biến thành trang shop chuyên nghiệp

Và hàng tá các chức năng hay ho khác nữa

Như vậy với các tính năng kể trên, Woocommerce có thể lựa chọn cho những ai cần làm một trang shop đơn giản ngay trên website WordPress của để giới thiệu sản phẩm và cho phép khách đặt hàng trực tuyến để bán hàng tiện lợi hơn

WooCommerce là một phần mềm mã nguồn mở Chúng ta hoàn toàn có thể tải xuống và sử dụng miễn phí Tuy nhiên, chúng ta vẫn cần mua một tên miền và dịch vụ Hosting để thiết lập một trang Web

1 2 Ưu điểm của WooCommerce

WooCommerce rất dễ sử dụng, kể cả với người mới bắt đầu Nó cũng đi kèm với các tính năng cực kỳ mạnh mẽ Bên cạnh đó, WooCommerce còn có rất nhiều ưu điểm:

WooCommerce Plugin miễn phí 100%, cho phép người dùng kiểm soát hoàn toàn Website thương mại điện tử của

Không giống như các nền tảng thương mại điện tử độc quyền khác, giá WooCommerce không bao gồm phí cấp phép Điều này có nghĩa là chúng ta có thể

sử dụng nó để tạo nhiều cửa hàng trực tuyến và Website thương mại điện tử tùy thích

WooCommerce là Plugin được xây dựng trên WordPress Điều này có nghĩa

là chúng ta cũng sẽ được hưởng lợi từ tất cả các tính năng mạnh mẽ của WordPress

Cung cấp hàng nghìn mẫu và thiết kế WooCommerce đẹp mắt để chúng ta lựa chọn và bắt đầu cửa hàng trực tuyến của

14

WooCommerce rất linh hoạt Chúng ta có thể thêm các tính năng bổ sung vào WooCommerce bằng cách sử dụng các tiện ích bổ sung khác nhau Ví dụ như thêm các tính năng đặt chỗ, đăng ký, tích hợp nền tảng vận chuyển,…

Chúng ta có thể thêm sản phẩm không giới hạn, nhập và xuất dữ liệu sản phẩm, thêm hình ảnh, Video, danh mục sản phẩm không giới hạn,…

WooCommerce tích hợp với hàng chục dịch vụ và cổng thanh toán trực tuyến

1.3 Điều kiện sử dụng WooCommerce Plugin

Chúng ta sẽ cần ba điều kiện sau để tạo một trang Web WooCommerce từ đầu:

Tài khoản WordPress Hosting

Domain (tên miền)

Chứng chỉ SSL để Website an toàn và chấp nhận thanh toán trực tuyến Sau khi đáp ứng đủ điều kiện, chúng ta có thể cài đặt và dùng WooCommerce Plugin miễn phí Khi doanh nghiệp bắt đầu kiếm tiền được

từ cửa hàng trực tuyến, chúng ta có thể tự tin mua thêm những tiện ích cao cấp hơn cho Website Chi phí tổng thể cho cửa hàng trực tuyến của chúng ta (sử dụng WooCommerce) sẽ phụ thuộc vào dịch vụ chúng ta chọn mua cho trang Web của

2 Cài đặt WooCommerce

2.1 Cài đặt WooCommerce Plugin

Đầu tiên, chúng ta tải và cài đặt WooCommerce trên Website Chúng ta truy cập trang WordPress và điều hướng đến “Plugin” => chọn “Add New” Chúng ta dùng thanh tìm kiếm để tìm Woocommerce, sau đó nhấp vào “Cài đặt” Hãy chờ Plugin cài đặt xong và nhấp vào nút kích hoạt

2.1.1 Thiết lập ngôn ngữ cho website

Nếu chúng ta muốn Woocommerce là tiếng Việt thì hãy cài đặt tiếng Việt vào website WordPress trước rồi hãy cài Woocommerce sau nhé Ở đây sẽ cài Woocommerce là tiếng Việt Làm tương tự nếu chúng ta muốn sử dụng các ngôn ngữ Woocommerce khác

Gói ngôn ngữ WordPress tiếng Việt do chính đội ngũ CTV của WordPress tại Việt Nam, cùng nhiều người dùng khác cùng tham gia dịch Hiện tại tuy rằng bản dịch chưa được 100% nhưng với hơn 90% các cụm từ đã dịch thì chúng ta có thể sử dụng tốt

Gói ngôn ngữ này bao gồm:

- Bản dịch cho mã nguồn WordPress, bao gồm bên ngoài website và bên trong khu vực quản trị

- Bản dịch của các theme mặc định trong WordPress

15

- Bản dịch của plugin Akismet

- Bản dịch của WordPress Multisite

Những bản dịch này được chia ra làm nhiều file khác nhau nên chúng ta có thể bỏ những cái không cần sử dụng

2.1.2 Cài đặt và thiết lập woocommerce cơ bản

Trước tiên tìm plugin theo từ khóa woocommerce trong Dashboard và cài plugin tên WooCommerce rồi cài nó

Sau khi cài đặt thì kích hoạt như bình thường Khi kích hoạt nó sẽ chuyển thẳng chúng ta đến trang thiết lập ban đầu cho Woocommerce và nó tự sử dụng ngôn ngữ đã thiết lập trên website Ấn nút Bắt đầu nào để tiến hành thiết lập ban đầu

Kế đến là bước cài đặt trang cần thiết cho Woocommerce, ở đây nó sẽ cài

một số trang bắt buộc như Cửa hàng, Giỏ hàng, Thanh toán,…vì nếu không có các trang này thì sẽ không hoàn thiện được Do vậy ta sẽ ấn nút Tiếp tục

Kế tiếp là cài đặt vị trí cửa hàng, ở đây chúng ta sẽ cài đặt quốc gia của cửa hàng chúng ta, loại tiền tệ, định dạng tiền tệ Nếu chúng ta thiết lập cho cửa hàng tại Việt Nam thì nên thiết lập như ảnh dưới

Ở bước cài đặt vận chuyển và thuế chúng ta cứ ấn Tiếp tục mà không cần

chọn gì nhé, cái này chúng ta sẽ thiết lập kỹ hơn ở mục riêng của nó Sau khi thiết lập xong thì quay lại trang quản trị

Ở phần thiết lập thanh toán, chúng ta có thể tạm đánh dấu vào mục Bank Transfer (BACS) Payment và Trả tiền mặt khi nhận hàng, phần này ở bài nói về phương thức thanh toán sẽ hướng dẫn kỹ hơn

Bây giờ chúng ta đã thiết lập thành công, ấn nút cho phép nếu chúng ta muốn giúp tác giả thu thập dữ liệu sử dụng trên website

Ngoài ra chúng ta còn một bước cuối nữa là chỉnh lại định dạng tiền tệ một chút nữa để cho nó phù hợp nhất với định dạng tiền tệ Việt Nam, đó là xóa 2 số 0

ở cuối đi Chúng ta hãy vào [textmarker color=”247BFF”]Woocommerce -> Cài đặt[/textmarker]

Sau đó ở tab [textmarker color=”247BFF”]Chung[/textmarker], chúng ta sửa

thành 0 ở phần Số đơn vị thập phân

Okay, bây giờ giá tiền của sản phẩm sẽ hiển thị chính xác là 150.000 nếu chúng ta nhập giá là 150000

2.3 Các trang trong woocommerce

Mặc định sau khi cài xong Woocommerce, vào phần quản lý trang (Pages)

sẽ thấy có một số trang mặc định mà Woocommerce tự tạo ra để có thể sử dụng các chức năng cần thiết trên trang bán hàng, bao gồm:

16

Cửa hàng: Trang này sẽ hiển thị các sản phẩm mới nhất trên website và có

phân trang

Giỏ hàng: Trang này sẽ là trang giỏ hàng của chúng ta khi thêm hàng vào

giỏ, nó sẽ hiển thị các sản phẩm có trong giỏ hàng

Tài khoản của tôi: Đây là trang quản lý tài khoản của khách hàng nếu họ

đăng nhập vào website

Thanh toán: Trang thanh toán đơn hàng, hay còn gọi là trang Checkout đó

mà

Còn cái Trang mẫu là cái Sample page khi cài WordPress, không có gì cả Trong đó, trang Cửa hàng sẽ được thiết lập ở [textmarker color=”247BFF”] Woocommerce -> Cài đặt -> Sản phẩm -> Hiển thị[/textmarker]

Các trang còn lại tuy không thiết lập ở đây nhưng để nó hoạt động thì nội dung phải cần có các shortcode tương ứng như sau:

Giỏ hàng: [woocommerce_cart]

Tài khoản của tôi: [woocommerce_my_account]

Thanh toán: [woocommerce_checkout]

Dĩ nhiên là những shortcode đó đều có trong các trang mặc định mà Woocommerce tạo ra rồi

Chú ý: Khi một hoặc tất cả trang có sẵn trong Woocommerce bị mất do

chúng ta lỡ xóa đi hoặc vì lý do nào đó, chúng ta có thể tạo lại bằng cách vào [textmarker color=”247BFF”]Woocommerce -> Tình trạng hệ thống -> Công

cụ[/textmarker] và ấn vào nút Cài đặt trang WooCommerce

3 Các thiết lập cài đặt cơ bản

3.1 Cài đặt chung

3.1.1 Tùy chọn chung

Khu vực mặc định: Thiết lập này sẽ chọn khu vực mặc định của cửa hàng

để nó dựa theo mà tính thuế, phí giao nhận,

Khu vực bán hàng: Danh sách các quốc gia được phép đặt hàng trên

website của chúng ta, chúng ta có thể chọn các quốc gia cần bán hoặc chọn toàn bộ quốc gia

Shipping location(s) (khu vực giao hàng): Thiết lập các quốc gia mà chúng

ta có thể ship hàng tới

Default Customer Location (địa chỉ khách hàng mặc định): Phần này sẽ tự

định vị vị trí của khách hàng và nó tự điền vào khi khách đặt hàng, chúng ta nên chọn No location by default dể không tốn bộ nhớ và dung lượng khi xử lý GeoIP

mà khách hàng sẽ tự nhập vào sẽ hay hơn

17

Thông báo của cửa hàng: Bật chức năng hiển thị một dòng thông báo trên

toàn bộ website

3.1.2 Tùy chọn tiền tệ

Tiền tệ: Loại tiền tệ cần sử dụng trên website

Vị trí tiền tệ: Vị trí hiển thị số tiền với ký hiệu tiền tệ

Dấu cách phần ngàn: Dấu ngăn cách đơn vị hàng nghìn trên giá sản phẩm Dấu thập phân: Dấu ngăn cách đơn vị thập phân trên giá sản phẩm

Số đơn vị thập phân: Số lượng số 0 đứng đằng sau đơn vị thập phân, tiền

Việt Nam không sử dụng số này nên nhập là 0

3.2 Tab Sản phẩm

3.2.1 Chung

Đơn vị trọng lượng: Chọn loại đơn vị tính trọng lượng của sản phẩm, nó sẽ

có tác động tới việc tính phí giao nhận

Đơn vị kích thước: Chọn loại đơn vị tính kích thước của sản phẩm, nó sẽ có

tác động tới việc tính phí giao nhận

Đánh giá: Phần xếp hạng sản phẩm là nơi chúng ta chọn các thiết lập liên

quan tới việc gửi đánh giá vào sản phẩm, nó đã có ghi rõ ở phần này rồi nên chúng

ta cứ đọc rồi chọn cái nào cần nhé

3.2.2 Hiển thị

Ở đây sẽ có các thiết lập liên quan đến việc hiển thị sản phẩm ra ngoài website

Cửa hàng & Trang sản phẩm

Trang cửa hàng: Thiết lập trang mà chúng ta muốn nó làm trang cửa hàng

(hiển thị các sản phẩm mới nhất có phân trang)

Hiển thị trang cửa hàng: Tùy chọn kiểu hiển thị sản phẩm ở trang cửa

Thêm vào giỏ: Bật chức năng tự chuyển tới trang giỏ hàng sau khi thêm

hàng vào giỏ và kích hoạt chức năng AJAX khi thêm vào giỏ hàng (không cần tải lại trang)

Hình sản phẩm

Đây là các thiết lập kích thước hình ảnh của sản phẩm hiển thị ra bên ngoài website

18

*Bắt buộc cắt ảnh (hard-crop): Tùy chọn này nghĩa là nó sẽ tự động cắt ảnh

của chúng ta upload lên để nó có kích thước chính xác với cài đặt của chúng ta Nếu không chọn thì nó sẽ thu lại về kích thước được cài đặt mà không cắt ảnh nhưng sẽ không đúng 100%

Ảnh catalog: Thiết lập kích thước ảnh đại diện của sản phẩm mà nó hiển thị

ở trang danh sách các sản phẩm Xem ảnh mô tả

Ảnh sản phẩm đơn lẻ: Thiết lập kích thước của ảnh sản phẩm mà nó hiển

thị đầy đủ trong trang chi tiết sản phẩm Xem ảnh mô tả

Hình thu nhỏ sản phẩm: Thiết lập kích thước của ảnh thu nhỏ sản phẩm ở

phần thư viện ảnh sản phẩm Xem ảnh mô tả

Thư viện ảnh sản phẩm: Đánh dấu bật lightbox nếu chúng ta muốn sử

dụng hiệu ứng lightbox trình diễn ảnh khi click vào ảnh ở thư viện ảnh sản phẩm

Lưu ý: Sau khi thay đổi kích thước hình ảnh, chúng ta phải tiến hành tái tạo

(rebuild) lại hình ảnh trong thư viện để nó tiến hành cắt lại Chúng ta có thể tái tạo lại hình ảnh thông qua plugin Regenerate Thumbnails

3.2.3 Kiểm kê kho hàng

Quản lý kho hàng: Đánh dấu nếu chúng ta cần bật chức năng quản lý sản

phẩm trong kho hàng

Thời gian giữ hàng: Thiết lập thời gian giữ đơn hàng khi khách hàng chưa

thanh toán, nếu quá thời gian thì đơn hàng sẽ bị hủy Đơn vị ở đây tính bằng phút, mặc định là 60 phút

Thông báo: Tùy chọn gửi thông báo khi sản phẩm sắp hết hàng và khi hết

hàng

Người nhận thông báo: Địa chỉ email của người quản trị để nhận thông

báo, chúng ta có thể nhập nhiều email ngăn cách bằng dấu phẩy

Ngưỡng sắp hết hạn: Ngưỡng số lượng sản phẩm trong kho sẽ nhận thông

Phương thức tải tập tin: Chọn phương thức tải tập tin của các sản phẩm có

thể tải về Trong đó, phương thức X-Accel-Redirect/X-Sendfile chúng ta có thể hiểu là chuyển hướng nội bộ để giấu đường dẫn gốc của tập tin

19

Hạn chế truy cập: Đánh dấu nếu muốn đăng nhập mới tải được tập tin Lưu

ý là khi bật tùy chọn này, chúng ta phải bật chức năng đăng ký tại Cài đặt -> Tổng quan trên WordPress

4 Thiết lập Shop làm trang chủ

Ở một số theme riêng dành cho WooCommerce chúng ta có thể dễ dàng thấy các sản phẩm đa phần đều được đưa ra ngoài trang chủ bởi vì thường là những theme đó sẽ giúp chúng ta làm một trang bán hàng thực thụ Còn những theme thông thường không hỗ trợ thì nó thường là hiển thị các bài viết mới nhất thay vì sản phẩm

Dĩ nhiên chúng ta không thể tự biến một theme đơn giản thành một theme

có hỗ trợ WooCommerce đầy đủ được ngoại trừ chúng ta có nhiều kinh nghiệm làm việc với code Nhưng mặc dù không làm cho nó chuyên nghiệp đầy đủ như vậy thì chúng ta vẫn có cách đưa các sản phẩm ra ngoài trang chủ của website theo cách đơn giản

4.1 Thiết lập trang cửa hàng thành trang chủ

Khi cài Woocommerce nó đã cài sẵn cho chúng ta một trang tên Cửa hàng (Shop) để hiển thị danh sách các sản phẩm mới nhất Chúng ta có thể tận dụng chức năng thiết lập một trang tĩnh thành trang chủ của WordPress để đưa trang cửa hàng đó ra ngoài trang chủ, bằng cách truy cập vào [textmarker color=”247BFF”]Cài đặt -> Đọc -> Một trang tĩnh[/textmarker] và chọn trang chính là cửa hàng Nếu chúng ta muốn có một trang hiển thị bài viết mới nhất thì chọn ở phần trang bài viết

Sau khi lưu lại chúng ta sẽ thấy trang chủ của là một trang cửa hàng Chỉ đơn giản là như thế thôi

4.2 Tạo trang riêng và sử dụng ShortCode

Nếu chúng ta cảm thấy trang cửa hàng nó hiển thị sản phẩm không được đa dạng cho lắm mà chúng ta lại muốn hiển thị nhiều sản phẩm từ nhiều danh mục khác nhau thì sẽ còn cách khác là tạo một trang mới, sau đó viết nội dung cần hiển thị vào, trong đó chúng ta có thể sử dụng các shortcode của Woocommerce để hiển thị sản phẩm

Trước tiên hãy tạo một trang mới, đặt tên cho nó là Trang chủ chẳng hạn

[sale_products per_page="12"] – Hiển thị 12 sản phẩm đang được giảm giá [best_selling_products per_page="12"] – Hiển thị 12 sản phẩm bán chạy

Mặc dù không có phân trang nhưng nghĩ hiển thị như vậy cũng đã được rồi, khách hàng có thể vào trực tiếp trang cửa hàng hoặc các danh mục để xem thêm sản phẩm

5 Danh sách các Widget của Woocommerce

Để cho giao diện website thêm phong phú, thuận tiện cho việc điều hướng của người dùng thì chắc chắn không thể nào sử dụng các widget để chèn vào sidebar của giao diện Trong WooCommerce, nó bao gồm sẵn một vài widget rất hay và có ích mà nếu chúng ta ứng dụng nó linh hoạt sẽ có thể hiển thị sản phẩm hoặc các chức năng liên quan tới cửa hàng tốt hơn

Trong bài này sẽ liệt kê qua một số widget của WooCommerce và ý nghĩa của nó, do một số widget được dịch sang tiếng Việt khá…”chuối” nên sẽ viết kèm tên widget tiếng Anh cho dễ hiểu

5.1 Sử dụng widget

Cách sử dụng widget của WooCommerce cũng giống như cách sử dụng các widget khác, đó là chúng ta sẽ kéo nó vào sidebar của theme để hiển thị Thiết lập

tại mục Giao diện -> Widget Danh sách các widget của WooCommerce

Giỏ hàng WooCommerce (WooCommerce Cart) – Hiển thị giỏ hàng mini,

khi thêm sản phẩm nó sẽ liệt kê các sản phẩm có trong giỏ hàng

Chỉ dẫn sản phẩm theo lớp của WooCommerce (WooCommerce Layered

Nav) – Chúng ta nên hiểu đơn giản là bộ lọc sản phẩm theo thuộc tính trong sản

phẩm chứa biến thể Widget này chỉ có thể hiển thị trong trang Cửa hàng (trang lưu trữ cho sản phẩm)

Bộ lọc chỉ dẫn sản phẩm theo lớp của WooCommerce (WooCommerce

Layered Nav Filters) – Hiển thị các thuộc tính mà chúng ta đang lọc xem sản phẩm

với widget WooCommerce Layered Nav, mục đích là cho khách hàng biết họ đang lọc thuộc tính nào để bỏ nó

Bộ lọc giá của WooCommerce (WooCommerce Price Filter) – Hiển thị

một slide chọn khoảng giá để xem sản phẩm Ví dụ chúng ta có thể xem sản phẩm

có giá từ 1.000.000 đến 5.000.000, giá trị lớn nhất sẽ dựa vào sản phẩm có giá cao nhất Widget này chỉ có thể hiển thị trong trang Cửa hàng (trang lưu trữ cho sản phẩm)

Danh mục sản phẩm của WooCommerce (WooCommerce Product

Categories) – Hiển thị danh sách các danh mục sản phẩm có trong website

21

Sản phẩm WooCommerce (WooCommerce Products) – Hiển thị danh

sách sản phẩm trong cửa hàng, chúng ta có thể tùy chọn số lượng sản phẩm hiển thị, hiển thị sản phẩm nổi bật, hiển thị sản phẩm giảm giá và sắp xếp hiển thị (theo thời gian, ngẫu nhiên, bán chạy và giá)

Tìm kiếm sản phẩm trong WooCommerce (WooCommerce Product

Search) – Hiển thị hộp tìm kiếm và chỉ tìm kiếm sản phẩm

Từ khóa sản phẩm trong WooCommerce (WooCommerce Product Tags) – Hiển

thị các từ khóa sản phẩm theo định dạng đám mây

Đánh giá gần đây trong WooCommerce (Woocommerce Recent Reviews) – Hiển

thị các đánh giá trong sản phẩm mới nhất, kèm theo số lượng ngôi sao đánh giá

Vừa được xem gần đây trong WooCommerce (WooCommerce Recent Viewd) –

Hiển thị các sản phẩm mà khách hàng vừa xem qua

Các sản phẩm được xếp hạng cao nhất trong WooCommrece (WooCommerce

Top Raterd Products) – Danh sách các sản phẩm được nhiều người dùng đánh giá

nhất

5.2 Hướng dẫn một số widget tiêu biểu

5.2.1 Chỉ dẫn sản phẩm theo lớp của WooCommerce

Trước tiên chúng ta nên nhớ rằng widget này chỉ hiển thị khi chúng ta xem trang cửa hàng, các trang còn lại sẽ không hiển thị ra bao gồm các trang danh mục sản phẩm và từ khóa sản phẩm Chúng ta hãy thêm nó vào sidebar nào đó mà nó sẽ hiển thị ở trang cửa hàng Ở bài sau qua WooSidebars để tạo ra thêm sidebar thay thế cho từng trang

Khi mở tùy chọn widget này ra chúng ta có một số tùy chọn sau:

Tiêu đề: Tiêu đề hiển thị của widget ở bên ngoài

Thuộc tính: Chọn thuộc tính cần lọc sản phẩm, ở đây nó sẽ hiển thị slug của

thuộc tính nên không có dấu

Kiểu hiển thị: Tùy chọn cách hiển thị chỉ dẫn, thường là dùng Danh sách sẽ

đẹp hơn

Kiểu truy vấn:

VÀ: Chỉ hiển thị các sản phẩm có thuộc tính khớp với tùy chọn của chúng

ta Ví dụ chúng ta chọn màu Đỏ và Đen thì ở truy vấn VÀ nó chỉ hiển thị sản phẩm

có hai thuộc tính Đỏ và Đen

HOẶC: Hiển thị sản phẩm có nhiều hoặc một thuộc tính mà chúng ta đang

chọn

5.2.2 Sản phẩm WooCommerce

Widget này sẽ thường được sử dụng vì nó hỗ trợ nhiều cách hiển thị sản phẩm rất tốt (ngoại trừ xem sản phẩm theo danh mục hoặc từ khóa) Nó có một số tùy chọn như:

22

Tiêu đề: Tiêu đề hiển thị của widget bên ngoài giao diện

Số sản phẩm được hiển thị: Tùy chỉnh số lượng sản phẩm tối đa sẽ được

hiển thị ra bên ngoài

Sản phẩm giảm giá – Hiển thị toàn bộ sản phẩm giảm giá theo thứ tự được

tùy chỉnh phía dưới

Sắp xếp theo:

Ngày – Sắp xếp sản phẩm theo thứ tự ngày tháng

Giá – Sắp xếp sản phẩm theo giá

Ngẫu nhiên – Sắp xếp sản phẩm theo kiểu ngẫu nhiên

Doanh số – Sắp xếp sản phẩm theo doanh số bán hàng

Order (phải ghi là Sắp xếp mới đúng, ai dịch thành Đơn hàng mới ghê):

Giảm – Sắp xếp sản phẩm theo thứ tự giảm dần

Tăng – Sắp xếp sản phẩm theo thứ tự tăng dần

Chỉ vậy thôi , các widget khác sẽ có rất ít tùy chọn hoặc thậm chí là không

có tùy chọn nên không hướng dẫn nhé

5.2.3 Một số plugin cho widget của WooCommerce

Có thể các widget mặc định trong WooCommerce chưa làm thỏa mãn nhu cầu sử dụng của chúng ta, vậy thì hãy thử tham khảo qua một số plugin hỗ trợ tạo thêm một số widget khác hỗ trợ cho WooCommerce nhé

Miễn phí

YITH WooCommerce AJAX Product Filter – Hỗ trợ tạo thêm bộ lọc sản phẩm, có

hỗ trợ kiểu giá trị thuộc tính là màu sắc mà có hướng dẫn ở các bài trước

XoX Woocommerce Slider/Carousel – Plugin này sẽ tạo cái slide nhỏ hiển thị sản phẩm và có hỗ trợ widget hiển thị slide

Search by SKU for Woocommerce – Thêm widget tìm sản phẩm theo mã SKU WooCommerce My Account Widget – Widget hiển thị form đăng nhập và các liên kết tới trang tài khoản của WooCommerce

XO10 – WooCommerce Categories widget – Hiển thị danh sách các danh mục sản phẩm có chứa ảnh đại diện

Trả phí

WooCommerce Product Filter – Thanh lọc xem sản phẩm chuyên nghiệp

WooCommerce Sales Countdown – Hiển thị thời gian đếm ngược tới chương trình giảm giá

WooCommerce Ajax Drop Down Cart – Thêm widget giỏ hàng mini có hỗ trợ AJAX

Shop Assistant for WooCommerce – Trợ lý ảo cho khách hàng

WooCommerce Currency Switcher – Widget hỗ trợ chuyển loại tiền tệ theo tỷ giá

tự động

WooCommerce Cart – WooCart Pro – Tự động hiển thị giỏ hàng mini trên menu đẹp mắt

CÂU HỎI ÔN TẬP

1 Hãy trình bày quy trình cài đặt và sử dụng WooCommerce plugin? Các lưu ý trong trong trình cài đặt và sử dụng WooCommerce plugin

2 Widget là gì? Hãy liệt kê các Widget của WooCommerce

3 Cho biết cách thiết lập Shop làm trang chủ?

BÀI 2 ĐĂNG SẢN PHẨM LÊN WEBSITE

- Liệt kê được các quy trình đăng sản phẩm lên website trong WooCommerce

- Mô tả được các quy trình đăng sản phẩm lên website trong WooCommerce

- Chịu trách nhiệm với kết quả công việc

- Khả năng làm việc độc lập và làm việc nhóm

- Nghiêm túc, tích cực, chủ động trong hoạt động học tập, nghiên cứu

- Tự học tập, rèn luyện kỹ năng nghiệp vụ

NỘI DUNG BÀI HỌC

1 Đưa sản phẩm lên trang

Ngay bên dưới nó là phần Dữ liệu sản phẩm, ở đây chúng ta hãy chọn là Sản

phẩm đơn giản Ở bên dưới khung đó là các phần chúng ta nhập thông tin sản

phẩm như giá cả, mã sản phẩm, quản lý kho hàng,…

- Chung: Phần này sẽ nhập thông tin giá của sản phẩm

+ Giá tiêu chuẩn (Regular price): Đây là mục giá bán ra của một sản phẩm + Giá khuyến mãi (Sale price): Nếu chúng ta muốn giảm giá sản phẩm, hãy nhập giá sau khi đã được giảm vào đây

- Kiểm kê kho hàng: Phần này sẽ thiết lập số lượng sản phẩm trong kho và tình trạng hàng hóa trong kho

+ Mã sản phẩm: Nếu chúng ta muốn quản lý sản phẩm theo mã (SKU) thì nhập mã sản phẩm vào đây

+ Quản lý kho hàng?: Chúng ta muốn thiết lập số lượng hàng trong kho thì đánh dấu vào

+ Tình trạng kho hàng: Tình trạng của sản phẩm này là còn hàng hay hết hàng Nếu chúng ta bật tính năng kiểm kê kho hàng thì khi khách mua hết số lượng

đã thiết lập thì nó đưa về tình trạng hết hàng

+ Soild individually (Bán riêng): Đánh dấu nếu chúng ta muốn khách chỉ được mua với số lượng 1 cái của mặt hàng này trong một đơn hàng

25

- Giao nhận: Thiết lập trọng lượng, kích thước của sản phẩm và loại hình giao

hàng

+ Trọng lượng: Nhập số trọng lượng của sản phẩm, đơn vị sẽ được thiết lập

ở [textmarker color=”247BFF”]Woocommerce -> Cài đặt[/textmarker]

+ Kích thước: Nhập chiều dài, chiều rộng và chiều cao của sản phẩm, đơn vị

sẽ được thiết lập ở [textmarker color=”247BFF”]Woocommerce -> Cài

+ Cross-sells (Bán chéo): Gợi ý khách hàng mua thêm trong lúc xem giỏ hàng, ví dụ chúng ta bán iPhone 6S thì nên thêm các sản phẩm như sạc, vỏ điện thoại vào phần bán chéo để họ mua kèm thêm

+ Nhóm: Chọn nhóm sản phẩm cần đưa vào Nhóm sản phẩm nghĩa là họ mua theo một nhóm chứ không mua riêng lẻ, cái này riêng ở phần khác

- Các thuộc tính: Thiết lập thuộc tính sản phẩm như màu sắc, kích thước,…nhưng

kỹ hơn ở phần khác

- Nâng cao: Một số thiết lập thêm cho sản phẩm

+ Purcahse note (Ghi chú thanh toán): Ghi chú mà chúng ta muốn gửi đến khách hàng sau khi mua hàng

+ Menu đơn hàng: Số thứ tự ưu tiên của sản phẩm trong giỏ hàng, số càng nhỏ thì càng ưu tiên

+ Cho phép đánh giá: Đánh dấu nếu muốn cho khách hàng đánh giá sản phẩm

Tiếp tục kéo xuống dưới, chúng ta sẽ thấy phần mô tả ngắn của sản phẩm

Phần này để chúng ta nhập mô tả ngắn, ví dụ như một lời giới thiệu ngắn về sản phẩm vì nó sẽ hiển thị ngay bên dưới giá sản phẩm trong trang chi tiết của sản phẩm

1.2 Thiết lập danh mục sản phẩm

Tiếp tục nhìn qua bên tay phải của trang thêm sản phẩm sẽ thấy phần thiết lập danh mục sản phẩm, nhìn chung nó giống hệt chức năng Category (Chuyên mục) trong bài viết thôi Nếu chưa có ta có thể thêm mới một danh mục và chọn

nó

1 3 Thiết lập từ khóa sản phẩm

26

Từ khóa sản phẩm là các từ khóa mà chúng ta cho là có liên quan đến sản phẩm Ví dụ đặt danh mục là Áo thun thì nên chọn từ khóa các kiểu như áo lacoste, áo cá sấu, áo pike chẳng hạn

1.4 Ảnh sản phẩm

Mỗi sản phẩm nên có một ảnh sản phẩm, hay còn gọi là ảnh đại diện cho sản phẩm

1.5 Thư viện hình ảnh của sản phẩm

Ngay bên dưới phần ảnh sản phẩm là phần thư viện hình ảnh sản phẩm, nói chính xác hơn thì đây là danh sách nhiều hình ảnh mà chúng ta muốn nó hiển thị theo dưới dạng slide (trình diễn ảnh) trong trang sản phẩm Chúng ta nên chọn một

số tấm ảnh khác của sản phẩm này ở đây, khi chọn ảnh chúng ta hãy ấn Ctrl để chọn nhiều ảnh

1.6 Đăng bài viết

Chọn nút đăng bài viết

Để xem sản phẩm vừa đăng, vào trang cửa hàng Vào mục Trang trong trang quản trị và ấn vào nút xem trang cửa hàng

Nếu không xem được sản phẩm, có thể sẽ cần vào Thiết lập -> Đường dẫn tĩnh và ấn lại nút Lưu thay đổi

Và khi click vào trang chi tiết một sản phẩm nó sẽ hiển thị

1 7 Giỏ hàng và thanh toán

Khi ta chọn thêm sản phẩm của vào giỏ Lúc này nó xuất hiện một thông báo là đã thêm sản phẩm vào giỏ hàng

Nếu cần thêm hàng nhảy chuột vào nút Thêm vào giỏ

Sau khi chọn đủ hàng, chọn nút Thanh toán là kết thúc

2 Theme Storefont

2.1 Giới thiệu: Theme là các giao diện được thiết kế sẵn nhằm mục đích cung

cấp cho người sử dụng một giao diện bán hàng đẹp, bắt mắt và rất chuyên nghiệp Tuy nhiên để sử dụng được các Thêm này chúng ta có thể cần phải mua vì các theme có sẵn thì chưa được chuyên nghiệp

Theme Store font Hoàn toàn miễn phí và mã nguồn mở

Tương thích tốt với các plugin hỗ trợ thiết kế như Origin Page

Builder hoặc Visual Composer để tự thiết kế bố cục cho mỗi trang

Hỗ trợ cấu trúc HTML5 và Schema chuẩn SEO

Khu vực tùy chỉnh Customize đầy đủ

Dễ sử dụng

Hỗ trợ nhiều child theme (trả phí)

Tuy không quá nhiều chức năng nhưng ít nhất là nó không quá thừa thải nên theme này sẽ vô cùng nhẹ

2 2 Thêm dữ liệu mẫu

Dữ liệu mẫu của Woocommerce là một gói dữ liệu đã tạo sẵn một số sản phẩm để chúng ta có thể dễ dàng thử nghiệm các chức năng hoặc theme Mục đích kêu các chúng ta thêm dữ liệu mẫu này vào là để chúng ta có thể thấy theme hiển thị đầy đủ thế nào

Đầu tiên chúng ta tải plugin Woocommerce về máy tính và giải nén ra Khi giải nén ra, chúng ta vào thư mục /woocommerce/dummy-data/ sẽ thấy các tập tin

dữ liệu mẫu Nhưng ở đây chúng ta chỉ sử dụng tập tin dummy-data.xml

Cuối cùng là chúng ta truy cập vào website -> Công cụ -> Nhập vào -> WordPress (cài plugin WordPress Importer nếu chúng ta chưa cài) và upload tập tin dummy-data.xml lên

Đưa các sản phẩm về user của chúng ta và đánh dấu vào Download and import file attachments rồi Submit

Thông báo sau khi nhập dữ liệu mẫu thành công

Kiểm tra chúng ta sẽ thấy nó có khá nhiều sản phẩm mẫu được cấu hình rất đầy đủ

2.3 Cài đặt và kích hoạt Storefront

Để cài theme này, chúng ta truy cập vào phần Giao diện -> Giao diện -> Thêm mới và gõ tìm theme “Storefront“

Sau khi cài đặt xong kích hoạt nó lên

2 4 Cài đặt trang chủ

Theme này không tự hiển thị trang chủ mà chúng ta phải tạo một trang mới

và thiết lập giao diện Homepage cho nó Chúng ta vào phần [textmarker color=”247BFF”]Trang -> Thêm trang mới [/textmarker]để tạo một trang, chúng ta

có thể đặt tên trang là Trang chủ, nội dung bỏ trống và thiết lập Giao diện là Homepage

Đồng thời chúng ta nên tạo một trang mới tên là Blog hoặc Tin tức, nội dung để trống và không thiết lập gì khác nữa

28

Sau đó chúng ta truy cập vào [textmarker color=”247BFF”]Cài đặt -> Đọc[/textmarker] và thiết lập trang chính và trang bài viết theo từng trang mà chúng ta vừa tạo

Lưu lại và ra trang chủ xem kết quả ý nghĩa của các thành phần có trên trang chủ của theme Storefront như:

Shop by Category: Hiển thị các danh mục sản phẩm có trong website Mặc định nó sẽ hiển thị 3 danh mục theo thứ tự chữ cái trên tên danh mục Ta có thể sửa danh mục để thêm hình đại diện vào

New In: Danh sách các sản phẩm mới nhất

We Recommend: Danh sách các sản phẩm nổi bật mới nhất, để thiết lập một sản phẩm thành nổi bật chúng ta vào trang quản lý sản phẩm và đánh vào dấu sao tương ứng của nó

Fan Favorites: Các sản phẩm mới nhất được đánh giá cao nhất

On Sales: Các sản phẩm mới nhất đang giảm giá

Best Sellers: Các sản phẩm mới nhất bán chạy

2.5 Thiết lập khu vực chèn Widget

Theme Storefront hỗ trợ cho chúng ta 6 vị trí chèn widget bao gồm:

sử dụng plugin này để dịch tại đây

2.7 Tùy biến Storefront nâng cao

Storefront là một theme có khả năng tùy biến cao nhờ vào action hook và filter hook Nếu chúng ta nào đã rành về code thì có thể xem tập tin inc/storefront-template-functions.php để xem qua một số hàm riêng được khai báo trong theme này để chúng ta có thể tùy biến lại bằng filter hook

2.7.1 Cài child theme trước khi tùy biến

Khi tùy biến theme, nên tránh sửa hoặc thêm code vào trực tiếp theme vì nó

sẽ mất sạch khi chúng ta update phiên bản theme mới sau này Để không bị mất khi update, chúng ta hãy tạo một child theme đành cho Storefront đã tạo sẵn một child theme đơn giản gồm 2 tập tin:

style.css – Tùy biến CSS của theme

functions.php – Thêm các code PHP tùy biến trong theme

29

2.7.2 Bỏ một số thành phần hiển thị tại trang chủ

Trong tập tin template-homepage.php của theme này chúng ta sẽ thấy có một đoạn khai báo như sau:

30

/* * Sử dụng: remove_action( ‘homepage’, ‘tên_hàm_cần_xóa’, số thứ tự mặc định );

*/ remove_action( ‘homepage’, ‘storefront_featured_products’, 40 );

remove_action( ‘homepage’, ‘storefront_popular_products’, 50 );

} add_action( ‘after_setup_theme’, ‘tp_homepage_blocks’, 10 );

2 Tạo sản phẩm có thuộc tính

Ngoài sản phẩm đơn giản mà chúng ta sẽ sử dụng thường xuyên để thêm các loại sản phẩm thông thường thì Woocommerce còn hỗ trợ thêm một kiểu sản phẩm nữa mà chúng ta sẽ thường xuyên thấy ở các website bán hàng chuyên nghiệp, đó

là sản phẩm có thuộc tính

Ví dụ, chúng ta có sản phẩm là Áo thun và khách hàng có thể chọn những thông tin khi đặt hàng như màu sắc, kích thước và những thông tin để chọn đó là

thuộc tính sản phẩm Ở Woocommerce, chúng ta có thể thiết lập một sản phẩm có nhiều thuộc tính, sau đó cho nó hiển thị ra bên ngoài hoặc cho khách tùy chọn khi mua và nó cũng hỗ trợ chúng ta thiết lập giá sản phẩm riêng cho từng thuộc tính

2.1 Thêm thuộc tính kiểu văn bản

Thuộc tính sản phẩm kiểu văn bản nghĩa là nó sẽ hiển thị ra phần thông tin thêm của sản phẩm và người dùng không thể lựa chọn, hoặc chúng ta không thể thiết lập giá cả và hình ảnh riêng cho nó được Mục đích sử dụng của thuộc tính kiểu này là để khách hàng tham khảo, ví dụ như thông tin phần cứng của các thiết

Bước cuối cùng là chúng ta khai báo thuộc tính này cho sản phẩm, chúng ta

có thể sửa một sản phẩm đã có sẵn hoặc thêm mới một sản phẩm để thêm thuộc tính vào nó

Phần dữ liệu sản phẩm, chúng ta chọn mục “Các thuộc tính“, sau đó chọn

thuộc tính sản phẩm cần áp dụng và ấn nút thêm

Sau khi thêm xong, chúng ta sẽ khai báo giá trị hiển thị của thuộc tính này, chúng

ta có thể dùng dấu để ngăn cách các giá trị với nhau

Khi lưu thuộc tính xong, nhớ ấn cập nhật sản phẩm để nó bắt đầu lưu lại Bây giờ chúng ta ra ngoài xem sản phẩm sẽ thấy có thêm mục thông tin thêm và nơi đó sẽ hiển thị các thuộc tính dạng văn bản

Dĩ nhiên là chúng ta có thể thêm nhiều thuộc tính kiểu văn bản khác nhau

2.2 Thêm thuộc tính kiểu lựa chọn

Trước tiên, chúng ta cũng vào phần Sản phẩm -> Các thuộc tính và tạo ra

thuộc tính kiểu lựa chọn

Và một điểm khác biệt nữa của thuộc tính lựa chọn là chúng ta phải thiết lập chủng loại thuộc tính (nói cách khác là giá trị của thuộc tính) Hãy nhấp vào

biểu tượng vòng tròn trên phần quản lý thuộc tính

Và ở đây chúng ta cần khai báo sẵn các giá trị mà chúng ta sẽ sử dụng nó trên các sản phẩm

Kế tiếp là hãy sửa hoặc tạo mới sản phẩm cần thêm thuộc tính Phần dữ liệu

sản phẩm, chúng ta hãy chọn là sản phẩm có biến thể

Kế tiếp phần các thuộc tính, chúng ta thêm thuộc tính kiểu lựa chọn vừa

thêm vào, nhớ thêm những giá trị thuộc tính cần sử dụng cho sản phẩm này và đánh dấu vào phần dùng cho nhiều biến thể

Kế tiếp hãy qua mục các biến thể và thêm biến thể của sản phẩm này vào

Sau đó chúng ta có thể thiết lập thông tin chi tiết của từng biến thể mà sản phẩm này đã được hỗ trợ bởi các thuộc tính Mỗi biến thể chúng ta nhấp vào nó để thiết lập hình ảnh, giá cả, số lượng trong kho,…và nếu chúng ta muốn thêm nhiều biến thể khác chứ việc ấn nút thêm biến thể là được nhé

Chúng ta có thể ấn nút thêm biến thể và làm tương tự với các biến thể khác

mà chúng ta muốn

Sau đó lưu biến thể lại và cập nhật sản phẩm Kết quả ta có:

Nếu chúng ta cảm thấy chữ Chọn một tùy chọn dài quá thì dùng Loco Translate mà sửa lại bản dịch nhé

3 Tạo sản phẩm chuyên nghiệp với Extra Product Options

Ở bài trước chúng ta đã biết cách tạo ra một số thuộc tính cho sản phẩm, và sau đó tạo sản phẩm kiểu có biến thể để khách hàng chọn lựa các biến thể mà họ thích khi đặt hàng Nhưng giới hạn của Woocommerce dĩ nhiên không chỉ nằm ở

đó, dựa vào mã nguồn của nó mà các lập trình viên có thể phát triển thêm nhiều tính năng hay hơn nữa Nhưng với điều kiện, chúng ta phải biết lập trình

Nhưng nếu chúng ta không biết lập trình thì chúng ta vẫn có thể sử dụng một số plugin hỗ trợ có sẵn để thêm nhiều tính năng hay khác cho Woocommerce

Mà cụ thể trong bài này chúng ta sẽ làm lại phần thuộc tính sản phẩm, biến thể sản phẩm thêm chuyên nghiệp với plugin Woocommerce Extra Product Options có giá

$19 tại Codecanyon

3.1 Woocommerce Extra Product Options là gì?

32

Nói theo cách dễ hiểu thì nó sẽ giúp chúng ta tạo ra các tùy chọn với nhiều kiểu khác nhau như nhập dữ liệu, chọn màu sắc, checkbox, radio, upload field,….và chúng ta có thể thêm đơn giá cho từng options để khách hàng chọn, khi

họ chọn thì nó sẽ tính thêm tiền vào đơn hàng

Trong ví dụ bên dưới, sẽ hướng dẫn các chúng ta chọn ra các options kiểu thế này:

3.2 Cài đặt Woocommerce Extra Product Options

Sau khi mua xong, chúng ta vào phần Download của Codecanyon và tải gói cài đặt của plugin này về

Sau đó giải nén ra, chúng ta sẽ thấy nó có các tập tin và thư mục như sau: Trong đó:

Documentation: Thư mục chứa tài liệu hướng dẫn sử dụng plugin này, nên đọc khi rảnh để hiểu cách sử dụng rõ hơn

Extensions: Các phần mở rộng thêm vào của plugin này, cài nó như một plugin bình thường

Tập tin và thư mục còn lại là chứa gói cài đặt plugin, chúng ta sẽ sử dụng tập tin zip để cài vào website như cài một plugin bình thường nhé

Vào Gói mở rộng -> Cài mới -> Tải plugin lên và chọn tập tin zip đó

Và kích hoạt lên

3.3 Tổng quan trang cấu hình của Extra Product Options

Plugin này cung cấp một trang thiết lập các cấu hình rất chi tiết và nhiều tùy chọn Các thiết lập này không phải là nơi để chúng ta thêm thuộc tính cho sản phẩm nhưng chúng ta sẽ thiết lập lại cách hiển thị, màu sắc hiển thị,… hoặc để mặc định

Các thiết lập này nó trong phần Woocommerce -> Cài đặt -> Extra Product

Options

Các thiết lập này các chúng ta không nhất thiết phải tùy chọn để sử dụng mà mặc định họ đã tùy chọn sẵn một cách tối ưu nhất rồi, nhưng chúng ta có thể tự tìm hiểu và đổi lại nếu muốn

3.4 Thêm extra options vào sản phẩm

Để thêm extra options vào sản phẩm, chúng ta chọn phần TM Extra Product

Options ở khung dữ liệu sản phẩm là được

Tại đây chúng ta sẽ thêm options với kiểu builder, tức là chúng ta có thể

thêm các khu vực (section), sau đó trong mỗi khu vực chúng ta có thể chia một cột hoặc nhiều cột và mỗi khu vực chúng ta sẽ thêm các phần tử (element) bằng cách

click vào dấu cộng

Khi tạo element, chúng ta sẽ có thể chọn được 11 kiểu trường dữ liệu (field)

cho các phần tử như thế này

33

Sau khi thêm element, chúng ta ấn vào biểu tượng bút chì của element đó

mà thêm dữ liệu cho nó

Ở đây có một số thiết lập quan trọng nhưng đa phần đều na ná nhau, nghĩ chúng ta có thể tự hiểu được hoặc chúng ta có thể xem video phía trên để hiểu hơn

Kết quả sau khi thêm một số options vào sản phẩm

Và có thể chúng ta sẽ thấy một số chữ tiếng Anh, đừng lo, chúng ta cứ dùng Loco Translate mà dịch lại trong plugin này nhé

Và khi thanh toán, các extra options sẽ hiển thị vào giỏ hàng luôn

Và trong trang quản lý order sẽ hiển thị chi tiết các options như thế này

4 Thêm sản phẩm liên kết ngoại (Bài 2)

Mặc dù WooCommerce là plugin tạo một trang bán hàng có đầy đủ các tính năng như giỏ hàng, thanh toán nhưng chúng ta vẫn có thể sử dụng nó để làm trang giới thiệu sản phẩm và trỏ liên kết ở website khác vào nút thêm vào giỏ hàng Trường hợp sử dụng rõ ràng nhất là dành cho những chúng ta làm affiliate

Để sử dụng tính năng này, chúng ta chỉ cần chọn kiểu dữ liệu sản phẩm

là sản phẩm bên ngoài/liên kết khi thêm sản phẩm

Sau đó chúng ta thiết lập liên kết bên ngoài của sản phẩm và tên nút bấm hiển thị ra bên ngoài

5 Thêm nhóm sản phẩm

Nhóm sản phẩm trong WooCommerce có thể được hiểu là một tập hợp nhiều sản phẩm đưa vào một nhóm, và người dùng khi mua sẽ mua cả nhóm đó thay vì chỉ mua một sản phẩm riêng lẻ Rất thích hợp cho các chúng ta bán hàng theo gói hoặc khuyến mãi gì đó Các chúng ta đừng nhầm lẫn giữa nhóm sản phẩm với danh mục sản phẩm nhé, hai cái khác nhau hoàn toàn

Trước tiên, chúng ta cần tạo ra một nhóm sản phẩm trước Nhóm sản phẩm cũng là sản phẩm bình thường nhưng chúng ta sẽ chọn kiểu dữ liệu sản phẩm là

“Sản phẩm được nhóm” và không cần nhập giá cho nó

Sau đó tiến hành sửa hoặc thêm mới sản phẩm cần đưa vào nhóm, phần

“Các sản phẩm được kết nối“, chúng ta sẽ thấy có thêm một mục tên là Nhóm và ở

đó chúng ta hãy tìm nhóm chúng ta vừa tạo ra để thêm vào

Bây giờ khi xem nhóm sản phẩm kia, chúng ta sẽ thấy mục chọn số lượng các sản phẩm bên trong nhóm khi đặt hàng

4 YITH ESSENTIAL KIT FOR WOOCOMMERCE

4.1 Giới thiệu YITH

Plugin này là tập hợp nhiều plugin miễn phí dành cho Woocommerce của YITH, khi cài bộ này vào thì nếu chúng ta muốn dùng plugin nào của họ thì chỉ cần kích hoạt là xong Bộ này hiện tại có các plugin như:

34

YITH Woocommerce Wishlist – Tính năng sản phẩm yêu thích, người dùng

có thể đưa các sản phẩm mà họ thích vào danh sách yêu thích của nó

YITH WooCommerce Zoom Magnifier – Tính năng zoom ảnh sản phẩm YITH WooCommerce Compare – Tính năng so sánh thông tin sản phẩm YITH WooCommerce Ajax Product Filter – Tính năng lọc sản phẩm bằng AJAX

YITH WooCommerce Ajax Search – Tính năng tìm kiếm sản phẩm bằng AJAX

YITH WooCommerce Advanced Reviews – Bổ sung một số tính năng thêm cho phần đánh giá khách hàng trong sản phẩm

YITH WooCommerce Order Tracking – Thêm tính năng theo dõi đơn hàng YITH WooCommerce Catalog Mode – Cái này nhiều chúng ta cần đây, chuyển shop sang chế độ Catalog, nghĩa là đăng sản phẩm nhưng không có phần giỏ hàng và thanh toán

YITH WooCommerce Cart Messages – Cho phép thêm một thông báo nào

YITH WooCommerce Mailchimp – Tích hợp mailchimp vào danh sách khách hàng trên website