Người Viết : ViKiMi Editor

Hiển thị thành công Danh Sách Sản Phẩm trên Page của cửa hàng Online với WooCommerce
Sử dụng WooCommerce tạo một Shop Online bán hàng đã đem lại nhiều hiệu quả cho nhiều người. Việc tạo một Shop Online nhanh chóng hiệu quả liệu có khó khăn. Tất nhiên câu trả lời là không khó với bất kỳ một người nào. Vì công việc này thực sự dễ dàng như việc bạn thiết kế những sản phẩm thông thường nhất. Đơn thuần đó là bạn chỉ cần tạo và đưa sản phẩm lên các trang hiển thị.
+ Vậy với WooCommerce việc tạo các trang hiển thị sản phẩm có khó khăn không?
+ Nó có tạo ra hiệu quả công việc nhanh chóng không?
+ Cách tạo ra một Page như vậy có phù hợp không?
Câu trả lời dành cho bạn là nó rất đơn giản và hiệu quả cao. Nó cũng phù hợp khi bạn muốn tạo một Shop Online với những Page hiển thị sản phẩm bán hàng của bạn.
Công việc mà bạn cần thực hiện bao gồm : Tạo Page + Sử dụng các Shortcode phù hợp với yêu cầu phát triển của bạn.
Chúng ta cần hiểu điều cơ bản sau đây :
+ Shortcode chính là đoạn mã ngắn, Đoạn mã ngắn này cho phép thực thi một khối lệnh lớn. Thông qua việc sử dụng gọi Shortcode, chúng ta có thể thực thi khối lệnh mà không cần phải viết lại khối lệnh đó một cách dài dòng. Đó là tác dụng lớn mà Shortcode đem lại.
+ WooCommerce cung cấp cho chúng ta rất nhiều Shortcode hữu ích
A ) CÁC BƯỚC TẠO MỘT PAGE HIỂN THỊ SẢN PHẨM
BƯỚC 1 : Tạo Page hiển thị sản phẩm & sử dụng Shortcode cung cấp bởi WooCommerce
(Lưu ý : Nếu chưa cài đặt WooCommerce, Bạn phải thực hiện cài đặt WooCommerce)
Chúng ta cần tạo một Page thông thường của WordPress :
+ Truy cập : Dashboard >> Pages >> Add New
Thực hiện tạo một Trang mới tên là Products / Sản Phẩm
+ Thực hiện Click vào nút + màu đen để hiển thị trình chỉnh sửa Gutenberg và tiến hành thêm Shortcode
Hình Ảnh 1 :

+ Thực hiện
thêm Shortcode [products] để hiển thị danh sách sản phẩm của bạn trên Page vừa
tạo ra
Hình Ảnh 2 :

+ Thực hiện Xuất Bản / Publish hoặc Cập Nhật / Update trang sản phẩm vừa được tạo ra. Như vậy, bạn đã tạo một trang hiển thị sản phẩm khá đơn giản và hiệu quả. Đây là một ví dụ rất điển hình.
Hình Ảnh 3 ;

B ) VẬY CHÚNG TA CÓ NHỮNG
SHORTCODE NÀO CÓ THỂ SỬ DỤNG ĐỂ HIỂN THỊ TRÊN TRANG SẢN PHẨM
Chúng ta có
thể sử dụng nhiều Shortcode để hiển thị danh sách sản phẩm trên trang sản phẩm
được tạo ra hay không? Câu trả lời là có rất nhiều Shortcode chúng ta có thể
dùng với WooCommerce.
Và bạn cũng
có thể tạo ra vô số trang hiển thị sản phẩm khác nhau cho Shop Online của bạn.
Sau đây là
những gì ngắn gọn bạn có thể sử dụng.
MÃ NGẮN SẢN PHẨM /
PRODUCT SHORTCODES
Product
shortcodes cho phép chúng ta có nhiều tuỳ chỉnh để hiển thị trang sản phẩm, đó
cũng là một điều tiện lợi mà WooCommerce đem lại khi bạn phát triển cửa hàng
Online.
CÁCH 1 : Hiển thị các sản phẩm từ một danh mục
cụ thể / product categories
Với
Shortcode này cho phép bạn hiển thị sản phẩm từ một danh mục cụ thể có chỉ định.
Cách sử dụng Shortcode này thực sự dễ dàng.
Bạn chỉ cần
sử dụng theo đúng cú pháp được cung cấp.
Ví Dụ 1 : Hiển
thị sản phẩm từ Category là “clothing”
[products category=”clothing”]
Ví Dụ 2 : Hiển
thị sản phẩm từ Categories là “clothing” và “shoes”
[products category=”clothing, shoes”]
Với nhiều Categories bạn chỉ cần ngăn
cách chúng bởi dấu phẩy “ , ” . Nếu bạn muốn hiển thị các sản phẩm thì bạn có
thể chọn ở bất kỳ một trang nào, bao gồm cả trang chủ của Shop.
CÁCH 2 : Hiển
thị các sản phẩm theo thuộc tính của chúng
Để hiển thị các sản phẩm theo thuộc
tính của chúng cũng không khó khăn. Bạn có thể hiển thị tất cả các sản phẩm
theo thuộc tính chung.
Các thuộc tính chung mà bạn có thể có
với các sản phẩm khác nhau, ví dụ như sau :
+ Màu Sắc
+ Kích Thước
+ Nhãn Hiệu
+ Chất Liệu
Cách lọc các sản phẩm có chung thuộc
tính không hề khó.
Ví dụ 1 :
[products tag=”levis”
attribute=”new2023″ terms=”brandnew”]
Chúng ta đã có thể lọc các sản phẩm mới
trong năm 2023 dựa vào thiết lập thuộc tính chung của chúng, và các sản phẩm
này đều thuộc Tag Levis.
CÁCH 3 : Hiển
thị các sản phẩm Sale
Khi bạn muốn hiển thị các sản phẩm
Sale trong đợt giảm giá bán của cửa hàng. Điều này cũng được WooCommerce cung cấp
mã ngắn Shortcode, nó vô cùng đơn giản, cho phép cả những người có kiến thức
căn bản về lập trình thực hiện được.
Ví Dụ 1 : Hiển thị các sản phẩm Sale
trên cửa hàng
[products limit=”16″
columns=”4″ orderby=”popularity” on_sale=”true” ]
Hiển thị danh sách sản phẩm Sale của cửa
hàng, với số lượng hiển thị là 16, Khung hiển thị sẽ chia làm 4 cột, sắp xếp
các sản phẩm dựa vào tính phổ biến nhất của sản phẩm (Popularity). On_sale =
true
CÁCH 4 : Hiển
thị các sản phẩm bán chạy nhất / Best-Selling Products
Với Shortcode này bạn có thể hiển thị
các sản phẩm bán chạy nhất trên cửa hàng tới khách hàng của bạn. Và bạn không
quan tâm nó có phải là sản phẩm giảm giá hay không.
Ví Dụ 1 : Hiển thị 3 sản phẩm bán chạy
nhất của cửa hàng
[products limit=”3″
column=”3″ best_selling=”true” ]
Ví Dụ 2 : Chỉ định sản phẩm bán chạy
nhất trên danh mục mà bạn chỉ định
[products limit=”3″
columns=”3″ best_selling=”true” category=”t-shirts,
blue” ]
Chỉ định trên các Categories :
t-shirts và blue
CÁCH 5 : Hiển
thị các sản phẩm mới nhất / Recent Products
Để hiển thị danh sách các sản phẩm mới
nhất trên một Page chúng ta cũng được WooCommerce cung cấp Shortcode vô cùng hiệu
quả. Shortcode cho phép chúng ta có nhiều tuỳ chỉnh hơn.
Ví Dụ 1 :
[products limit=”20″
columns=”4″ orderby=”id” order=”DESC”
visibility=”visible”]
Hiển thị 20 sản phẩm mới nhất trong cửa
hàng Online của bạn. Chúng ta thấy Shortcode này sử dụng các ID sản phẩm để lọc
và sắp xếp chúng theo thứ tự giảm dần DESC. Do đó, chúng ta sẽ thu về danh sách
các sản phẩm mới nhất.
Ví dụ 2 : Lấy các sản phẩm mới từ Categories
chỉ định
[products limit=”20″ columns=”4″
orderby=”id” order=”DESC” visibility=”visible”
category=”blue, shirt”]
Chúng ta có thể lấy về từ các
Categories chỉ định là Blue và Shirt, tương tự cũng như Tags
CÁCH 6 (CUỐI CÙNG): Bạn
có thể hiển thị một sản phẩm trên Post hoặc Page
(Single Product on a page or Post)
Chúng ta có Product Shortcode như sau
:
Ví Dụ 1 :
[product id=“10”]
Đây là một Shortcode cho phép bạn hiển
thị sản phẩm có ID là 22 trên một Page hoặc một Post của WordPress.
Bạn cũng tự hỏi liệu nó hữu ích? Thực
sự khi bạn sử dụng nó trong lập trình thì nó sẽ rất tiết kiệm thời gian cho bạn.
Còn ở đây, nó sẽ giúp bạn đơn giản là không cần nhiều kiến thức lập trình vẫn
có thể tạo ra các sản phẩm hiển thị như mong muốn.
Nếu bạn muốn hiển thị nó trong đẹp mắt
thì có thể sử dụng một Plugin dành cho WooCommerce, đó là “WooCommerce
Quickview”. Với Plugin này bạn sẽ có thể tạo một Button cho phép người dùng xem
sản phẩm dưới dạng một ô cửa sổ mở ra và nó chứa các thông tin của sản phẩm và
Cách mua.
Hình Ảnh 4 :

Chỉ cần cài đặt “WooCommerce Quickview” và sử dụng Shortcode sau:
[quickview-button product-id=”10″]
Hình Ảnh 5
