Hướng Dẫn Tạo Menu Dọc Mega Cho Flatsome Và WooCommerce
Chào mừng bạn đến với bài viết chi tiết hướng dẫn cách tạo menu dọc mega (vertical mega menu) cho theme Flatsome trên nền tảng WooCommerce. Menu dọc mega không chỉ giúp website của bạn trở nên chuyên nghiệp, mà còn cải thiện trải nghiệm người dùng (UX), đặc biệt đối với các cửa hàng trực tuyến có danh mục sản phẩm đa dạng. Với Flatsome – một trong những theme WooCommerce phổ biến nhất hiện nay – việc thiết kế menu dọc mega trở nên dễ dàng nhờ các tính năng tích hợp và hỗ trợ từ plugin.
Bài viết này sẽ hướng dẫn bạn từng bước để tạo menu dọc với dropdown đa cột (mega style), tích hợp danh mục sản phẩm WooCommerce, thêm icon, hình ảnh và tối ưu responsive cho mọi thiết bị. Thời gian thực hiện dự kiến khoảng 15-30 phút nếu bạn đã quen với WordPress. Chúng tôi cũng sẽ chia sẻ các mẹo nâng cao và cách khắc phục lỗi phổ biến để đảm bảo menu hoạt động mượt mà. Hãy cùng bắt đầu!
Tại Sao Nên Sử Dụng Menu Dọc Mega Trong Flatsome WooCommerce?
Menu dọc mega mang lại nhiều lợi ích vượt trội cho website bán hàng:
- Cải thiện điều hướng: Menu dọc hiển thị song song với nội dung chính, giúp khách hàng dễ dàng truy cập danh mục sản phẩm mà không làm rối giao diện header.
- Tích hợp mạnh mẽ với WooCommerce: Hiển thị hình ảnh sản phẩm, icon danh mục và sub-menu, giúp tăng tỷ lệ nhấp chuột và chuyển đổi.
- Tùy chỉnh linh hoạt: Flatsome hỗ trợ UX Builder, cho phép thiết kế dropdown tùy chỉnh mà không cần code phức tạp.
- Responsive tối ưu: Menu dọc hoạt động tốt trên cả desktop, tablet và mobile, đảm bảo trải nghiệm liền mạch.
- Thẩm mỹ và chuyên nghiệp: Dropdown đa cột với hình ảnh và icon giúp website trông hiện đại, thu hút khách hàng.
Theo tài liệu chính thức của Flatsome, menu dọc có thể tùy chỉnh chiều rộng, màu sắc, font chữ và bố cục để phù hợp với thương hiệu của bạn.
Các Bước Chuẩn Bị Trước Khi Tạo Menu
Trước khi bắt đầu, hãy đảm bảo bạn đã hoàn thành các bước sau:
- Kiểm tra theme và plugin:
- Theme Flatsome (phiên bản 3.15 trở lên, lý tưởng là 3.20.2 để hỗ trợ tốt nhất).
- Plugin WooCommerce đã được cài đặt và cấu hình đầy đủ danh mục sản phẩm.
- (Tùy chọn) Plugin hỗ trợ như OT Flatsome Vertical Menu hoặc Groovy Mega Menu để tăng tính năng.
- Backup website: Sử dụng plugin như UpdraftPlus để sao lưu toàn bộ dữ liệu, phòng trường hợp xảy ra lỗi trong quá trình chỉnh sửa.
- Quyền truy cập: Đảm bảo bạn có quyền admin để vào Dashboard WordPress > Giao diện > Menus hoặc Flatsome > Advanced.
- Hình ảnh/icon: Chuẩn bị sẵn hình ảnh hoặc icon cho danh mục sản phẩm (kích thước đề xuất: 50x50px cho icon, 200x200px cho hình sản phẩm).
- Kiểm tra responsive: Xem trước website trên mobile để xác định cách menu sẽ hiển thị trên các thiết bị khác nhau.
Hướng Dẫn Tạo Menu Dọc Mega Bước Từng Bước
Dưới đây là quy trình chi tiết để tạo menu dọc mega cho Flatsome và WooCommerce. Chúng tôi sẽ chia thành các bước cụ thể, kèm mẹo và lưu ý để bạn dễ dàng thực hiện.
Bước 1: Tạo Và Cấu Hình Menu Trong WordPress
- Truy cập trình quản lý menu:
- Vào Giao diện > Menus (Appearance > Menus) trong WordPress Dashboard.
- Nhấn Create a new menu (Tạo menu mới) hoặc chỉnh sửa menu hiện có (ví dụ: đặt tên là “Main Vertical Menu”).
- Thêm mục menu:
- Trong phần Add menu items, chọn Product Categories (Danh mục sản phẩm) từ WooCommerce để tích hợp danh mục sản phẩm.
- Thêm các danh mục chính (menu cha), ví dụ: “Điện Thoại”, “Laptop”, “Phụ Kiện”.
- Kéo thả để tạo cấu trúc phân cấp: Menu cha > Sub-menu (ví dụ: “Điện Thoại” > “iPhone”, “Samsung”, “Xiaomi”).
- Để tạo mega style, thêm nhiều sub-menu (tối đa 3-4 cấp) để hiển thị dạng lưới (grid) trong dropdown.
- Kích hoạt chế độ Vertical Menu:
- Trong Menu Settings, tìm tùy chọn Vertical Menu (nếu có) và tick vào để chuyển menu sang dạng dọc.
- Nếu không thấy tùy chọn này, bạn có thể cần plugin OT Flatsome Vertical Menu để hỗ trợ.
- Gán menu:
- Sau khi lưu menu, gán nó vào vị trí Vertical Menu hoặc Primary Menu trong Manage Locations.
- Nếu sử dụng Flatsome Header Builder, bạn sẽ chọn menu này ở bước sau.
Mẹo:
- Sử dụng plugin OT Flatsome Vertical Menu (miễn phí trên WordPress.org) để thêm tính năng như icon, màu sắc tùy chỉnh và chiều rộng menu. Sau khi cài đặt, vào Menu Settings để bật vertical mode.
- Để tăng tính trực quan, thêm Navigation Label ngắn gọn và mô tả rõ ràng (ví dụ: thay “Danh mục sản phẩm điện thoại di động” thành “Điện Thoại”).
Bước 2: Thiết Lập Header Với Vertical Menu Trong Flatsome
Flatsome cung cấp Header Builder để tùy chỉnh giao diện header, bao gồm vị trí menu dọc:
- Truy cập Header Builder:
- Vào Flatsome > Header hoặc Giao diện > Tùy chỉnh > Header trong WordPress Dashboard.
- Mở trình chỉnh sửa Header Builder (giao diện kéo thả).
- Thêm Vertical Menu:
- Từ sidebar trái, kéo phần tử Vertical Menu vào vị trí mong muốn (thường là cột trái của header).
- Trong cài đặt phần tử, chọn menu đã tạo ở Bước 1 (ví dụ: “Main Vertical Menu”).
- Cấu hình Vertical Menu:
- Width: Đặt chiều rộng menu (ví dụ: 250px cho menu hẹp, 300px cho menu rộng hơn).
- Dropdown Style: Chọn “Mega Menu – Grid Layout” để tạo dropdown đa cột, phù hợp với WooCommerce.
- Columns: Đặt số cột cho dropdown (3-5 cột là lý tưởng để hiển thị danh mục sản phẩm).
- Background: Chọn màu nền phù hợp với thương hiệu (ví dụ: #f63345 cho màu đỏ nổi bật).
- Hover Effect: Thêm hiệu ứng hover như “Fade” hoặc “Slide” để tăng trải nghiệm.
- Lưu và xem trước:
- Nhấn Publish để lưu thay đổi.
- Mở website trên frontend để kiểm tra menu dọc và dropdown.
Mẹo nâng cao:
- Nếu sử dụng plugin OT Flatsome Vertical Menu, bạn có thể kéo phần tử Vertical Menu (màu đỏ) vào header và cấu hình thêm icon, font chữ hoặc animation qua plugin settings.
- Để menu dọc dính (sticky) khi cuộn trang, vào Header Settings > bật Sticky Header và đảm bảo menu nằm trong sticky container.
Bước 3: Tạo Mega Dropdown Với UX Builder
Flatsome’s UX Builder là công cụ mạnh mẽ để thiết kế dropdown tùy chỉnh với hình ảnh và nội dung đa dạng:
- Tạo Block mới:
- Vào Trang > Thêm mới hoặc Flatsome > Blocks > Add New.
- Đặt tiêu đề block, ví dụ: “Mega Dropdown Categories”.
- Mở UX Builder:
- Nhấn nút UX Builder để vào trình chỉnh sửa giao diện kéo thả.
- Thêm Row với 3-5 cột để tạo layout grid cho mega dropdown.
- Thêm nội dung vào cột:
- Trong mỗi cột, thêm Product Category Widget (từ WooCommerce) để hiển thị danh mục sản phẩm.
- Hoặc sử dụng Image + Text để thêm hình ảnh sản phẩm, tiêu đề danh mục và mô tả ngắn.
- Tùy chọn: Thêm Icon Box để hiển thị icon bên cạnh danh mục.
- Tùy chỉnh thiết kế:
- Đặt chiều rộng cột (ví dụ: 25% cho 4 cột).
- Thêm padding/margin để khoảng cách giữa các cột đều nhau.
- Tải lên hình ảnh sản phẩm (kích thước đề xuất: 200x200px) hoặc icon (50x50px).
- Lưu Block:
- Nhấn Publish để lưu block.
- Gán Block vào Menu:
- Quay lại Giao diện > Menus, chỉnh sửa menu cha (ví dụ: “Điện Thoại”).
- Trong Menu Item Settings, tìm Custom Block và chọn block vừa tạo (“Mega Dropdown Categories”).
- Lưu menu và kiểm tra dropdown trên frontend.
Mẹo:
- Để mega dropdown full-width, vào Vertical Menu Settings > đặt Container Width = 100%.
- Thêm Button trong UX Builder để dẫn khách hàng trực tiếp đến trang sản phẩm nổi bật.
Bước 4: Tùy Chỉnh CSS Để Hoàn Thiện Menu
Để menu dọc mega trông chuyên nghiệp hơn, bạn có thể thêm CSS tùy chỉnh:
- Truy cập Custom CSS:
- Vào Flatsome > Advanced > Custom CSS hoặc Giao diện > Tùy chỉnh > Additional CSS.
- Thêm CSS cho menu dọc:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
#mega-menu-wrap { width: 250px; background: #f63345; /* Màu nền thương hiệu */ border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } #mega-menu-title { text-transform: uppercase; font-size: 18px; text-align: center; padding: 15px 0; color: #fff; } .vertical-menu .sub-menu { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 cột cho dropdown */ gap: 15px; padding: 20px; background: #fff; border: 1px solid #ddd; } .vertical-menu .sub-menu li { padding: 10px; transition: all 0.3s ease; } .vertical-menu .sub-menu li:hover { background: #f9f9f9; transform: translateX(5px); } /* Responsive cho mobile */ @media (max-width: 768px) { #mega-menu-wrap { width: 100%; position: relative; } .vertical-menu .sub-menu { grid-template-columns: 1fr; /* Chuyển thành 1 cột trên mobile */ } } |
- CSS cho sub-menu dọc (nếu cần):
|
1 2 3 4 5 6 |
.nav-header .sub-menu { flex-direction: column !important; max-height: 400px; overflow-y: auto; } |
Mẹo:
- Sử dụng !important nếu CSS không áp dụng do xung đột với theme.
- Tùy chỉnh màu sắc (#f63345) và font chữ để khớp với thương hiệu.
Bước 5: Tối Ưu Responsive Và Hiệu Suất
Để menu dọc mega hoạt động tốt trên mọi thiết bị:
- Responsive cho mobile:
- Vào Flatsome > Header > Mobile, bật Mobile Tabs để menu dọc chuyển thành tabs hoặc hamburger menu trên di động.
- Đảm bảo sub-menu không che khuất nội dung chính (sử dụng
z-index: 999nếu cần).
- Tối ưu hiệu suất:
- Giới hạn số lượng sub-menu (dưới 10 items) để tránh tải chậm.
- Sử dụng lazy load cho hình ảnh trong mega dropdown (Flatsome hỗ trợ sẵn).
- Xóa cache sau mỗi thay đổi bằng plugin như WP Rocket hoặc W3 Total Cache.
- Kiểm tra trên các thiết bị:
- Sử dụng Browser Developer Tools (Ctrl+Shift+I) để mô phỏng giao diện trên mobile, tablet.
- Đảm bảo dropdown không bị cắt hoặc hiển thị sai lệch.
Mẹo Nâng Cao Để Tối Ưu Menu Dọc Mega
Dưới đây là một số mẹo giúp menu dọc của bạn nổi bật và hiệu quả hơn:
| Mẹo | Mô Tả | Lợi Ích |
|---|---|---|
| Thêm Icon WooCommerce | Sử dụng plugin như Max Mega Menu hoặc OT Flatsome Vertical Menu để thêm icon cho danh mục. | Tăng tính trực quan, thu hút khách hàng. |
| Sticky Menu | Bật Sticky Header trong Flatsome để menu dọc luôn hiển thị khi cuộn trang. | Giữ navigation dễ tiếp cận, tăng UX. |
| Hiệu ứng Animation | Thêm animation như “Slide” hoặc “Fade” cho dropdown qua Header Builder. | Tạo cảm giác mượt mà, chuyên nghiệp. |
| Tích hợp Search | Thêm Search Bar trong mega dropdown để khách hàng tìm sản phẩm nhanh. | Giảm bounce rate, tăng chuyển đổi. |
| SEO Optimization | Sử dụng tên danh mục ngắn gọn, chứa từ khóa (ví dụ: “Điện Thoại” thay vì “Tất cả sản phẩm điện thoại”). | Cải thiện thứ hạng tìm kiếm. |
| A/B Testing | Thử nghiệm 2 phiên bản menu (có/không mega) bằng Google Optimize. | Xác định thiết kế nào tăng tỷ lệ nhấp chuột. |
Plugin đề xuất:
- Groovy Mega Menu: Hỗ trợ vertical mode và tích hợp tốt với Flatsome qua child theme. Cung cấp tùy chọn thêm widget và hình ảnh.
- Max Mega Menu: Miễn phí, cho phép thêm icon và tùy chỉnh grid layout dễ dàng.
Khắc Phục Lỗi Thường Gặp
Dưới đây là các lỗi phổ biến và cách xử lý:
- Menu không hiển thị:
- Nguyên nhân: Menu chưa được gán đúng vị trí hoặc xung đột cache.
- Khắc phục: Kiểm tra Manage Locations trong Menus, xóa cache bằng WP Rocket.
- Dropdown không responsive:
- Nguyên nhân: CSS không tối ưu cho mobile.
- Khắc phục: Thêm media queries như trong Bước 4.
- Hình ảnh không tải:
- Nguyên nhân: Kích thước hình ảnh quá lớn hoặc không bật lazy load.
- Khắc phục: Sử dụng hình ảnh tối ưu (dưới 200KB), bật lazy load trong Flatsome.
- Tương thích WooCommerce:
- Nguyên nhân: Theme hoặc plugin lỗi thời.
- Khắc phục: Cập nhật Flatsome lên phiên bản mới nhất (3.20.2) và WooCommerce (9.0+).
Nếu gặp vấn đề phức tạp, tham khảo tài liệu chính thức: Flatsome Docs – Vertical Menu hoặc liên hệ support Ftechx Solutions.
Kết Luận
Tạo menu dọc mega cho Flatsome và WooCommerce không chỉ giúp website của bạn trở nên chuyên nghiệp mà còn cải thiện trải nghiệm người dùng và tăng tỷ lệ chuyển đổi. Với các bước trên, bạn có thể dễ dàng thiết kế menu dọc với dropdown đa cột, tích hợp hình ảnh, icon và tối ưu responsive. Đừng quên thử nghiệm và tùy chỉnh để phù hợp với phong cách thương hiệu của bạn.
Nếu bạn cần hỗ trợ thêm, hãy comment bên dưới hoặc gửi câu hỏi qua Flatsome Support. Chúc bạn thành công trong việc xây dựng website bán hàng ấn tượng!
