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

6

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 ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: https://my.azdigi.com/aff.php?aff=1612
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

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ệ

 

  1. Ann nói

    Mình thực hiện cho hiển thị tất cả các sản phẩm theo danh mục và k giới hạn số lượng sản phẩm. Nhưng trang của mình chỉ hiện thị 12 sản phẩm dù phân trang nhưng vẫn k hiển thị hết ạ.
    Giới mình với ạ.

    1. Admin nói

      bạn ko giới hạn nhưng WordPress có mặc định nha. Bạn vào cài đặt => đọc để chỉnh nha

  2. thanh nói

    sử dụng shortcode hiện ra sản phẩm rồi .. nhưng hiển thị trên điện thoại chỉ được 1 sảp phẩm trên 1 hàng

    1. Admin nói

      giao diện của bạn nó respnsive cho màn di động nên nó hiện 1 sản phẩm

  3. Tùng Lê nói

    Xin cảm ơn tác giả,

    Cho mình hỏi là, khi mình muốn hiển thị thuộc tính theo hàm này vào trang chủ của wordpress [product_attribute attribute=’đường dẫn thuộc tính’ filter=’giá trị thuộc tính’] thì nó sẽ hiện ra tất cả thông tin của sản phẩm thuộc thuộc tính đó, có hàm nào chỉ hiện tên của thuộc tính lên và khi nhấp vào nó sẽ dẫn tới trang sản phẩm chứa thuộc tính đã lọc đó không?
    Và hàm [product_categories] thì sẽ hiện ra các danh mục sản phẩm kèm hình đại diện, mình muốn bỏ cái hình đại diện chỉ hiện text thôi thì có hàm nào không?
    Mong được giải đáp ạ. Xin cảm ơn rất nhiều!

    1. Admin nói

      Bạn nên coi docs WooCommerce nhé. Nếu ko có thì nghĩa là ko đc, phải tự custom để lấy dữ liệu thui

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

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