Cách Chỉnh Sửa Menu Sản Phẩm – Tự Học Làm Web: Bài 27

Chúng ta sẽ tìm hiểu cách chỉnh sửa menu sản phẩm cho các website WordPress. Tùy vào từng loại giao diện mà menu sản phẩm sẽ có cách chỉnh sửa khác nhau. Tuy nhiên mình sẽ hướng dẫn cách chung nhất để bạn có thể áp dụng cho từng loại giao diện khác nhau.

Tìm hiểu cách chỉnh sửa menu sản phẩm theo từng bước

Tìm những phần có liên quan đến menu sản phẩm

Đây là bước trọng tâm đầu tiên của việc chỉnh sửa menu sản phẩm, tuy cách sắp xếp và phân cấp menu giống với cách thiết lập menu chính của trang. Nhưng menu sản phẩm lại phức tạp và nhiều thành phần hơn do sở thích của mỗi người, cách trang trí cũng cầu kỳ hơn.

Chúng ta sẽ tìm hướng dẫn của nhà cung cấp giao diện ở trong thư mục giao diện sau khi mua hoặc tải về. Các mục có liên quan đến thiết lập menu sản phẩm như là Giao diện > Menu, Giao diện > Widget, Plugin hỗ trợ ví dụ Main mega menu, Static Block,… Page option (cài đặt trang), theme optiontùy biến.

Cách chỉnh sửa menu sản phẩm

Menu sản phẩm của 1 website còn gọi là vertical menu (Click xem ảnh lớn)

Xác định menu sản phẩm thuộc menu nào

Trong danh sách menu, bạn phải xác định được menu sản phẩm đang hiển thị trên demo là menu nào. Có mẹo nhỏ dành cho bạn là tên của các danh mục trong menu trùng khớp với tên các danh mục trong giao diện trực quan (demo). Và khi thay đổi 1 tên trong danh mục bất kỳ thì ngoài giao diện cũng thay đổi.

Còn bố cục của menu, hoàn toàn là do plugin kèm theo của giao diện thiết lập (mega menu). Bố cục menu con có 2 dạng là dạng mặc định và mega menu.

Chỉnh sửa menu sản phẩm theo ý mình

Sau khi xác định menu sản phẩm là menu nào trong danh sách. Chúng ta sẽ tiến hành thiết lập như sau:

Trường hợp nếu là nhiều danh mục con và bạn muốn có bố cục theo ý thích. Hãy nhờ vào các plugin kèm theo giao diện để trợ giúp, trong video là static block. Nó giúp ta sắp xếp bố cụ hoàn toàn đơn giản khi bạn sử dụng rành các trình soạn thảo trang như king composer hay visual composer,… Cũng có thể là CSS để hỗ trợ chỉnh sửa thêm.

Cách chỉnh sửa menu sản phẩm

Menu sản phẩm dạng mega menu (bố cục lưới) (Click xem ảnh lớn)

Trường hợp bạn có ít danh mục thì sử dụng cách sắp xếp menu mặc định của wordpress là sử dụng ổn. Sau khi biết cách thiết lập menu sản phẩm, bạn cần sử dụng CSS để chỉnh sửa thêm cho bắt mắt và đúng ý bạn.

Cách chỉnh sửa menu sản phẩm

Menu phân cấp mặc định của wordpress (click xem ảnh lớn)

Menu con và chỉnh sửa cấp bậc của menu sản phẩm

Menu con và phân cấp menu sản phẩm

Để có được menu con cấp 1, cấp 2 hoặc cấp 3,… (hình trên) bạn chỉ cần vào Giao diện > Menu, trong bộ menu bạn cần chỉnh sửa, hãy kéo các danh mục bên dưới menu cha vào 1 bậc, 2 bậc hoặc 3 bậc,… Hình minh họa bên dưới.

Cách chỉnh sửa menu sản phẩm

Cách kéo danh mục để có menu cấp 1, 2 hoặc 3 (click xem ảnh lớn)

Đây chỉ là loại menu con thông thường và không có bố cục dạng lưới nào bên trong menu con cả. Nếu bạn muốn tìm cách chỉnh sửa menu sản phẩm dạng lưới (mega menu), hoặc bố cục theo ý bạn muốn, có thể xem tiếp phần dưới đây nhé.

Bố cục menu con theo ý muốn

Nếu chỉ là menu mặc định của WordPress thì chúng ta không được hỗ trợ chỉnh sửa phần này, tuy nhiên bạn có thể tìm các plugin trả phí để hỗ trợ. Ví dụ như Main Megamenu, Static block, vertical menu,… các plugin này có thể cài miễn phí nhưng bạn phải trả phí để sử dụng full tính năng của nó. Dưới đây là ảnh minh họa 1 mega menu làm từ static block.

Cách chỉnh sửa menu sản phẩm

Mega Menu này bố cục bằng static block (click xem ảnh lớn)

Tùy mỗi plugin mà chúng ta có cách chỉnh sửa menu sản phẩm khác nhau: Static Block cho phéo bạn tạo mega menu như tạo bố cục 1 trang và hỗ trợ các phần mềm kéo thả như King Composer, Visual Composer (WPBakery), Element,… Main Megamenu thì sửa trực tiếp bên trong Menu,… Mình không thể hướng dẫn tất cả các plugin cho các bạn được, nhưng việc tìm hiểu cách sử dụng của 1 plugin bất kỳ phụ thuộc vào việc bạn có bỏ thời gian ra “dọc phá” trong đó không! Nếu bạn rành về ngoại ngữ thì việc tìm hiểu lại vô cùng đơn giản.

Tổng kết cách thiết lập vertical menu sản phẩm

Tùy vào mỗi giao diện và mỗi plugin hỗ trợ mà chúng ta có cách chỉnh sửa hoàn toàn khác nhau. Mình hướng đến việc chúng ta không ngại một plugin nào cả mà có thể sử dụng được ở bất kỳ giao diện nào, bất kỳ plugin nào nên mình chỉ hướng dẫn chung nhất. Nếu bạn đang tìm hiểu cách thiết lập static Block thì hãy xem video nhé. Cách chỉnh sửa menu sản phẩm theo hướng nào thì phụ thuộc vào sự mài mò tìm hiểu của chúng ta thôi.

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