Tạo menu thay đổi tùy biến cho nhà hàng – P1 – Dùng Elementor

Làm thế nào để tạo các menu món ăn thay đổi hàng tuần mà chủ nhà hàng không cần phải thuê coder làm lại mỗi tuần? Chỉ có một cách duy nhất là bạn phải tạo tính năng cho phép chủ nhà hàng tự chọn món, sau đó tự động hiển thị món ăn được chọn lên menu mà thôi.

Để làm được một menu thay đổi tùy biến khi cần như vậy, có một cách khá đơn giản đó là tạo mỗi món ăn như một sản phẩm, sau đó hiển thị từng sản phẩm được chọn lên trang menu.

Menu của bạn đẹp hay không sẽ phụ thuộc vào giao diện / theme mà bạn sử dụng nhé. Trong bài viết này, mình sẽ sử dụng một theme miễn phí là Di Restaurant để làm ví dụ. Ngoài ra, mình sẽ kết hợp sử dụng thêm các plugin sau đây:

  1. WooCommerce: để tạo sản phẩm.
  2. Elementor (bản pro): là một plugin page builder, nó sẽ giúp bạn tạo giao diện và hiển thị sản phẩm dễ dàng hơn mà không cần code.

Bước 1: Tạo các món ăn trên website

Sau khi cài và kích hoạt WooCommerce, bạn sẽ có thấy trong admin panel có thêm một mục là Products.

Bạn vào Products > Add New để thêm từng sản phẩm vào, mỗi sản phẩm là thông tin về một món ăn của bạn nhé.

Tạo các món ăn cần hiển thị trên menu của website bằng plugin WooCommerce

Ở đây mình đã tạo ví dụ một số lượng lớn món ăn để lát nữa phân chia menu thành các phần như: món tráng miệng, đồ uống, món chính, …

Lưu ý:

Nếu bạn không muốn dùng WooCommerce, bạn có thể tạo custom post type mới cho sản phẩm và mỗi món ăn sẽ là một bài viết. Để hiển thị giá và các thông tin đặc biệt khác của món ăn, bạn cần tạo custom fields cho nó và plugin Meta Box có thể giúp bạn làm việc này. Nhưng mình khuyến cáo là cách này sẽ làm bạn phải thao tác nhiều hơn ở bước số 3 (hiển thị món ăn) đấy nhé.

Bước 2: Tạo trang menu

Bước này khá đơn giản, vẫn như việc tạo trang thông thường của bạn thôi.

Bạn vào Pages > Add New và điền thông tin cho trang.

Lúc này bạn sẽ cần làm giao diện sao cho menu nhìn hấp dẫn. Mình sẽ dùng Elementor ở đây để kéo thả cho nhanh. Đồng thời Elementor cũng hỗ trợ tính năng hiển thị sản phẩm WooCommerce khá tiện nên mình cũng đỡ công code khá nhiều.

Sau khi cài Elementor, trong phần chỉnh sửa trang sẽ có nút Edit with Elementor. Bạn kích vào đó để chuyển sang giao diện kéo thả để thiết kế giao diện cho trang nhé.

Tạo trang menu thay đổi tùy biến bằng plugin Elementor

Bước 3: Tạo giao diện cho trang menu và hiển thị món ăn

Bạn muốn menu hiển thị như nào cho đẹp là tùy bạn. Ở đây, mình sẽ dựng demo một giao diện như hình dưới đây nhé. Và tất nhiên là mình sử dụng Elementor để làm cho nhanh rồi.

Giao diện cho trang menu thay đổi tùy biến

Trong phần chỉnh sửa trang bằng Elementor (đã nói ở bước 2), mình kéo widget Inner Section sang phần nội dung của trang menu.

Dùng Elementor để kéo widget Inner Section sang phần nội dung của trang menu.

Lúc này, bạn sẽ có 1 block với 2 cột để thêm nội dung như sau:

Nhập vào món ăn và giá cả tương ứng vào menu

Phía cột bên trái, mình sẽ đặt widget dạng thư viện ảnh để thêm ảnh các món ăn, và phía cột phải sẽ để danh sách các món ăn cùng với giá.

Mình lần lượt kéo các widget là Gallery Products vào vị trí mình muốn.

Kéo và thả để thêm ảnh cho các món ăn trong menu thay đổi tùy biến
Kéo và thả để thêm ảnh cho món ăn
Kéo và thả để thêm giá cả cho các món ăn trong menu thay đổi tùy biến
Kéo để thêm giá cho món ăn

Ở widget Gallery, bạn tự upload vài tấm ảnh cho phù hợp với nhóm món ăn bạn đang chỉnh sửa và điều chỉnh các thông số sao cho ảnh hiển thị đẹp. Những bức ảnh này sẽ không tự lấy từ ảnh của sản phẩm, mà do bạn tự upload lên. Ảnh sẽ hiển thị cố định và không thay đổi khi bạn đổi món ăn, trừ khi bạn tự chọn lại ảnh.

Thêm ảnh cho nhóm các món ăn trên menu thay đổi tùy biến

Ở widget Products, bạn cần điều chỉnh setting một chút đó là chọn Source Manual Selection để cho phép chọn món ăn bất kỳ hiển thị vào khu vực này.

Tùy chọn hiển thị các món ăn trên menu

Sau đó, bạn chỉ cần gõ một vài ký tự vào ô Search & Select để tìm món ăn, Elementor sẽ liệt kê danh sách các món ăn (products) khớp với ký tự bạn gõ vào. Bạn chỉ việc chọn món mình muốn là được.

Chọn các món ăn bạn muốn trong danh sách mà Elementor liệt kê

Bạn có thể làm tương tự với các nhóm món ăn khác là hoàn thành menu của bạn rồi.

Sau này, chủ nhà hàng chỉ việc vào giao diện chỉnh sửa này, click vào các block danh sách món ăn và chọn lại món từ mục Search & Select là được nhé.

Lưu ý:

Ở bước 1 mình có nói là các bạn hoàn toàn có thể tạo các món ăn dưới dạng bài viết của một custom post type mới. Nếu bạn làm như vậy thì ở bước 3 này, bạn sẽ cần tự code lại hoặc dùng thêm 1 plugin là Elementor Custom Skin (miễn phí) để thay đổi layout của widget Elementor và hiển thị giá trị các custom fields (các thông tin thêm về món ăn như giá chẳng hạn). Mình thấy làm như vậy phức tạp hơn khá nhiều so với tạo món ăn bằng WooCommerce, nhưng vẫn đưa ra đây để các bạn tham khảo thôi nhé.

Lời cuối

Như vậy là bạn đã tạo xong menu mới giao diện đơn giản và có thể tùy biến danh sách các món ăn bất cứ lúc nào mà không cần phải thay đổi giao diện rồi. Nhưng nếu bạn không dùng Elementor, thì hãy đón đọc bài hướng dẫn sắp tới của mình để thử một cách làm khác với Gutenberg nhé.

Rất hy vọng bạn có thể ứng dụng các cách này vào việc làm website cho bạn hoặc cho khách hàng. Nếu bạn có ý tưởng nào khác, hãy chia sẻ với chúng mình bằng cách để lại comment nhé.

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *