Trang Danh Mục Sản Phẩm – Tự Học Thiết Kế Web: Bài 33

Bài này chúng ta cùng nhau chỉnh sửa 1 trang mới đó là trang danh mục sản phẩm và trang sản phẩm hay còn gọi là trang cửa hàng (shop page). Về cơ bản, cách chỉnh sửa hoàn toàn giống với bài 30 chỉnh sửa trang chuyên mục bài viết. Nếu bạn đã xem kỹ bài đó thì bài này bạn không cần xem cũng làm được.

Trang danh mục sản phẩm và trang cửa hàng

Trang cửa hàng và trang danh mục khác nhau duy nhất ở một điểm:

Trang cửa hàng thì chứa toàn bộ sản phẩm được đăng lên tất cả các danh mục, chúng là trang do chúng ta tạo và có tất cả các thuộc tính hoặc cài đặt của trang.

Còn danh mục nào thì chỉ chứa các sản phẩm được đăng lên danh mục đó, đây là trang tự tạo của woocommerce, nên việc thiết lập chỉnh sửa dựa vào theme option, tùy biến, mã nguồn và CSS.

Sửa trang danh mục sản phẩm

Sản phẩm hiển thị trong trang danh mục (Click xem ảnh lớn)

Thông thường cả 2 loại trang này đều có cài đặt giống nhau để đơn giản hóa trong quá trình quản trị và sử dụng website.

Các bước chỉnh sửa trang cửa hàng và danh mục

Quan sát chung và lên ý tưởng chỉnh sửa

Đây là bước cơ bản nhất thường sử dụng cho bất kỳ trang nào. Chúng ta cần quan sát 1 cách tổng thể trang cần chỉnh sửa, sau đó tính xem chúng ta nên xóa bỏ mục nào, để lại mục nào, chỉnh sửa mục nào, từ đó có hướng xử lý.

Chỉnh sửa các tùy chọn trong theme option/tùy biến

Theme option và tùy biến chứa một số tùy chọn cho chúng ta sửa trang sản phẩm, đây chỉ là một số chỉnh sửa chung cho cả 2 loại trang này. Còn Widget thì sẽ thiết lập sidebar cho các trang liên quan đến sản phẩm.

Riêng đối với trang cửa hàng, bạn có thể tạo trang như bình thường ở mục Trang > Tạo trang mới sau đó thiết lập trang đó thành trang cửa hàng bằng cách vào Woocommerce > Sản phẩm > Chung > Trang cửa hàng và chọn trang đó làm shop page.

Sửa trang danh mục sản phẩm

Chọn 1 trang làm trang cửa hàng (click xem ảnh lớn)

Chỉnh sửa hiển thị sản phẩm trong shop page

Trong phần hiển thị sản phẩm, số lượng mỗi cột và mỗi dòng đều do bạn tùy chỉnh trong theme option nếu không có thì trong tùy biến hoặc dùng CSS để hiệu chỉnh. Áp dụng cả trang shop và trang danh mục sản phẩm.

Sửa trang danh mục sản phẩm

Các block sản phẩm hiển thị đều nhau sau khi sửa CSS (Click xem ảnh lớn)

Trong phần này để các block sản phẩm đều nhau và không bị cao thấp, bạn nên chỉnh sửa CSS cho chiều cao của tiêu đề sản phẩm ngay bên trong block. Vì chúng ta đăng sản phẩm, tiêu đề chúng ta đặt sẽ không thể đều nhau được nên nó dài ngắn cũng sẽ làm block cao thấp theo.

Tổng kết cách chỉnh sửa trang cửa hàng

Trong bài này mình chỉ nói chung chung, vì thực tế các chỉnh sửa trang cửa hàng và trang danh mục sản phẩm rất dễ, áp dụng nhiều CSS trong đó cũng là cơ hội các bạn rèn luyện CSS.

Chúc bạn thành công!