Bài 5: Cách sử dụng shortcode WooCommerce để hiển thị sản phẩm

0

Trong bài viết này, mình sẽ hướng dẫn các bạn cách sử dụng shortcode WooCommerce để hiển thị sản phẩm trên website bán hàng WordPress của chúng ta.

Video – Cách sử dụng shortcode WooCommerce để hiển thị sản phẩm

Hướng dẫn chi tiết

Shortcode là gì?

Shortcode là một đoạn mã ngắn, sử dụng để thay thế cho một nội dung hoặc một chức năng nào đó. Nội dung và chức năng đó đã được đăng ký trước với nền tảng WordPress thông qua các hàm được viết trong các plugins.

Nói một cách dễ hiểu qua ví dụ. Chúng ta muốn có 1 form đăng ký => Cài plugins Contact form. Plugins này sẽ tạo ra 1 form cho chúng ta. Nhưng để hiển thị ra giao diện website, chúng ta cần xác định vị trí sẽ hiển thị. Một cách đơn giản để làm việc đó là dùng shortcode. Plugins Contact sẽ sinh ra 1 đoạn mã, đại diện cho form liên hệ, bạn sẽ đặt đoạn mã này vào vị trí muốn hiển thị form, hệ thống sẽ tự tìm và load dữ liệu tương ứng. Cũng giống như việc giới thiệu ban thân bla bla thì bạn chỉ việc đưa số CMND, website sẽ tự tìm hiểu các thông tin.

Thêm dữ liệu mẫu

WooCommerce như đã giới thiệu là plugins nhằm hỗ trợ chúng ta xây dựng website bán hàng trên nền tảng WordPress. Plugins này cũng sử dụng hệ thống shortcode để người dùng tùy chỉnh và hiển thị dữ liệu theo ý muốn.

Đầu tiên, chúng ta cần phải có dữ liệu demo để học bài này. Các bạn vào phần Công cụ => Nhập vào xuất ra và bấm cài đặt nếu bạn chưa cài tính năng này cho web.

Bạn có thể tìm  thấy dữ liệu demo trong thư mục plugins woocommerce như hướng dẫn trong video hoặc tải về tại link google drive này. Bạn cũng có thể nhập dữ liệu bằng trình nhập của woocomerce cũng được nhưng mình thấy sử dụng trình nhập cơ bản của wordpress tiện lợi hơn.

Thêm dữ liệu mẫu woocomerce bằng trình nhập data của wordpress

Các bạn chọn Chạy trình nhập WordPress nhé. Sau đó chọn file Sample_products.xml để tải dữ liệu mẫu lên.

Bạn gán những sản phẩm được up lên cho 1 người dùng nào đó nha. Mình chọn Admin. Nhớ chọn Tải về và nhập vào file đính kèm nha.

Hiển thị sản phẩm ra giao diện

Mình sẽ hiển thị sản phẩm ra trang chủ nhé. Đầu tiên, các bạn tạo 1 trang trắng, chưa có nội dung. Sau đó, đặt trang mới tạo làm trang chủ. Vào tùy biến => cài đặt trang chủ => trang tĩnh

Cài đặt trang chủ

Bạn sử dụng shortcode để hiển thị sản phẩm theo ý muốn nhé

Thường dùng nhất là [products ]. Thêm vào các bộ lọc như

  • limit: Số lượng sản phẩm sẽ hiển thị ra.
  • column: Số cột sản phẩm
  • category: Lọc sản phẩm theo danh mục
  • paginate: Phân trang, có 2 giá trị là true và false. True là phân trang, false là không phân trang. Thường sẽ dùng đối với các trang sản phẩm xếp theo danh mục. Vi dụ: trang dành cho sản phẩm hoodies …
  • orderby: chọn thuộc tính để lọc: id – lọc theo id, date – lọc theo ngày nhập (sản phẩm mới cũ), popularity – được nhiều người quan tâm, rating – lọc theo xếp hạng trung bình.
  • order: chọn thứ tự lọc (ASC – từ thấp tới cao và DESC – từ cao xuống thấp).
  • on_sale: Sản phẩm đang giảm giá
  • best_selling: Sản phẩm bán chạy
  • top_rated: SẢn phẩm được nhiều đánh giá cao

Trong ví dụ mình thực hiện trong video, hiển thị 6 sản phẩm thuộc danh mục áo hoodies, chia 3 cột, lấy các sản phẩm thì shortcode cần dùng sẽ là [products limit=”6″ columns=”3″ category=”hoodies”].

Và còn nhiều shortcode tùy chỉnh khác, bạn có thể lọc theo thuộc tính, giá trị thuộc tính như [product_attribute attribute=’đường dẫn thuộc tính’ filter=’giá trị thuộc tính’]

Bạn có thể tham khảo và tự xây dựng shortcode để hiển thị theo yêu cầu website tại trang docs hướng dẫn của WooCommerce.

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên LikeShare nếu thấy bài viết thú vị.

Liên hệ

 

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.