Làm sao để thêm sản phẩm của danh mục bất kỳ lên trang chủ ?

Bạn muốn thêm sản phẩm của danh mục bất kì lên trang chủ ? Hãy đọc bài viết này và cùng làm với chúng mình nhé. Hi vọng những thông tin này nó hữu ích với các bạn.

Để thêm sản phẩm của danh mục bất kỳ lên trang chủ

Bước 1: Đăng nhập để thêm sản phẩm của danh mục

Sau khi đăng nhập vào tài khoản quản trị, tại giao diện trang chủ, các bạn bấm vào sửa trang. Ở đây sẽ hiện chữ Edit with UX Builder

Sau khi UX Builder load xong bạn sẽ thấy một giao diện kéo thả trực quan. Bên trái là các section mỗi mục tương ứng với bên phải. Việc phân chia các phần section như vậy sẽ dễ dàng trong việc quản lý các mục.

Bước 1: Thêm sản phẩm của một danh mục bất kì lên trang chủ
Bước 1: Thêm sản phẩm của một danh mục bất kì lên trang chủ

Xem thêm: VIDEO HƯỚNG DẪN SỬ DỤNG WEBSITE

Bước 2: Chèn Section để thêm sản phẩm của danh mục

Để thêm một section hiển thị các bạn chọn vào Add Elements. Thứ tự phân lớp sẽ là  Section  vào Row vào Block hiển thị sản phẩm. Xây dựng một section tốt như vậy sẽ đảm bảo hiển thị tốt ở các giao diện sẽ không bị kéo rộng ở giao diện có độ phân giải cao.

Bước 2: Thêm sản phẩm của một danh mục bất kì lên trang chủ
Bước 2: Thêm sản phẩm của danh mục bất kì lên trang chủ

Vào Add Elements vào chọn Section. Sau đó bạn sẽ thấy các section vào elements và chọn tiếp theo Row.

Tại đây sẽ hiển thị các tùy chọn, bạn sẽ chọn các số cột hiển thị.
Tại đây sẽ hiển thị các tùy chọn, bạn sẽ chọn các số cột hiển thị.

Sau khi đã hoàn tất các quy trình, bạn vào add elements. Số Row này tùy theo yêu cầu của bạn 

Sau khi đã có Row bạn vào chọn. Bạn bám vào Row vừa chọn, vào Add elements . Tại bước này kéo xuống phần Shop và chọn Product.

Xem thêm: Làm sao để thay đổi logo website ?

Hiển thị Shop Product
Hiển thị Shop Product trong quá trình thêm sản phẩm của danh mục

Bước 3: Thêm sản phẩm của danh mục

Block này sẽ có nhiều tùy chọn hiển thị sản phẩm như: On Sale ( Sản phẩm đang Sale) , Best Selling ( Sản phẩm bán chạy).Trong ví dụ này mình chọn mặc định.

Lúc này sẽ hiện ra một khung tùy chọn chi tiết cho sản phẩm này . Có các tùy chọn chính như Style, Type và Column.

Phần Style có nhiều kiểu hiển thị như Bình thường, chữ nằm trong ảnh(Overlay), Chữ và ảnh nằm ngang (Vertical). Phần này các bạn hãy thử và trải nghiệm. Trong ví dụ này, tôi chọn Kiểu là Normal (Lưu ý kiểu default và normal giống nhau về hiển thị. Nhưng kiểu Normal có tùy chọn chỉnh kích thước ảnh, còn default thì không)

Xem ngay: Hướng dẫn xác định kích thước hình ảnh trên website chính xác

Khung hiển thị đồ chi tiết
Khung hiển thị đồ chi tiết

Ở phần Type khá đơn giản :

Slider: Hiển thị sản phẩm theo kiểu slide

Row: Hiển thị theo kiểu hàng:

Các tùy chọn còn lại , các bạn có thể thử và trải nghiệm. Trong ví dụ này, mình chọn Row.

Hiển thị danh mục sản phẩm
Hiển thị danh mục sản phẩm

Tiếp theo là chọn danh mục để thêm sản phẩm của danh mục

Các bạn kéo xuống, ở phần bài viết, sẽ có 2 phần là Custom Posts và Category Post. Phần Custom Posts là các bạn có thể chọn đích danh các sản phẩm sẽ hiển thị. Ở phần Category Post, các bạn có thể chọn danh mục muốn hiển thị sản phẩm. Khi mục danh mục được chọn, sẽ chỉ có những sản phẩm thuộc danh mục đó được hiển thị ra ngoài.

Xem thêm: Thiết kế website Đà Nẵng

Chỉnh sửa danh mục sản phẩm cho các sản phẩm
Chỉnh sửa danh mục sản phẩm cho các sản phẩm

Ở phần Total Posts là số lượng sản phẩm muốn hiển thị

Các bạn có thể chọn số lượng sản phẩm muốn hiển thị. Phần này tốt nhất nên từ 8 – 32 Sản phẩm, tránh nhiều quá sẽ làm tăng quá trình load trang.

Ở phần hình ảnh, nếu bạn muốn ảnh sản phẩm có hình vuông – phần chiều cao này nhập 100 % , muốn sản phẩm có hình chữ nhật thì giảm con số này xuống khoảng 60 – 85%.

Bước 4: Hoàn thành

Sau khi đã hoàn tất các phần, các bạn bấm vào Apply để hoàn tất quá trình thêm sản phẩm của danh mục.

Lúc này ta đã có 1 section hiển thị sản phẩm theo danh mục. Bước cuối cùng là đặt tên cho Section và kéo nó về vị trí mong muốn.

Trên đây là quy trình làm sao để thêm sản phẩm của danh mục bất kỳ lên trang chủ. Hy vọng nó hữu ích với các bạn. Nếu bạn cần một nhà thiết kế website, bạn chỉ cần liên hệ với chúng tôi. Chúng tôi luôn có mặt khi bạn cần. Chúc các bạn thành công

Xem thêm: Hướng dẫn cài đặt và sử dụng WooCommerce Product Filter

Én Web – Thiết kế Website thương hiệu chuyên nghiệp

Địa chỉ: 132 Trần Thủ Độ, Quận Cẩm Lệ, thành phố Đà Nẵng

Hotline: 0961. 3737.05 – 0345. 6012.69

Fanpage: Én web

Mộc Miên

Bài viết liên quan