Hướng dẫn này cần sử dụng Elementor Pro, và áp dụng cho giao diện Elementor tự thiết kế theo hướng dẫn Elementor phần 1 và phần 2.
Bạn hãy nhớ lại ở bước ban đầu cài đặt WooCommerce, website sẽ tự động tạo ra các trang sử dụng cho plugin này bao gồm các trang như Shop, Cart, Checkout,…Các trang này hiện nay được thiết kế bằng Block Editor, nên một số trường hợp bạn không sử dụng Block Editor thì sẽ bị lỗi hiển thị hoặc thành phần hiển thị ra không đồng nhất với thiết kế của website.
Dĩ nhiên nếu bạn sử dụng các theme trả phí dành riêng cho WooCommerce thì các trang này được thiết kế sẵn rất đẹp. Nhưng nếu bạn đang sử dụng Elementor và tự thiết kế theo hướng dẫn của chuỗi bài học này thì sẽ hiển thị bị lỗi.
Vậy tóm lại, trong bài này mình sẽ mô tả qua những thao tác để thiết kế lại các trang này bằng Elementor để nó hiển thị đẹp và theo mong muốn của mình hơn.
Thiết kế trang “Shop” với Elementor
Đầu tiên chúng ta tiến hành tạo một Page mới tại Pages => Add New Page và đặt tên phù hợp, ví dụ như tên “Sản Phẩm”, nội dung bạn để trống. Sau đó ấn vào nút Edit with Elementor để bắt đầu chỉnh sửa.
Khi thiết kế, bạn có thể áp dụng cách chia bố cục website thành 2 cột nhanh bằng cách chọn sẵn bố cục này khi thêm một container mới. Mục đích là ta sẽ để cột nhỏ bên trái hiển thị các tính năng lọc sản phẩm.
Xây dựng khu vực hiển thị sản phẩm (cột phải)
Sau khi chia bố cục xong, thì dĩ nhiên chúng ta sẽ dành cột to nhất để hiển thị các sản phẩm. Chúng ta đang xây dựng trang tên “Sản Phẩm” nghĩa là sẽ muốn nó hiển thị toàn bộ sản phẩm ở khu vực này, có thể phân trang nếu có nhiều sản phẩm, khi người dùng cần tìm sản phẩm theo bộ lọc thì thao tác ở cột bên trái (sẽ làm ở phần sau).
Về quy tắc kỹ thuật, chúng ta sẽ xây dựng một truy vấn để hiển thị các sản phẩm ra trang này. Trong Elementor, bạn có thể chèn widget tên Products để hiển thị các sản phẩm theo bố cục mặc định của WooCommerce, hoặc nếu muốn khả năng tuỳ biến cao hơn thì sử dụng widget tên Grid Loop (trong bài về thiết kế Elementor mình đã hướng dẫn).
Ở đây, mình sẽ sử dụng widget Loop Grid để tuỳ biến hiển thị tốt hơn.
Sau khi thêm widget Loop Grid vào khu vực cần hiển thị, bạn thiết lập lại loại post type template cần sử dụng cho nó, ở đây chúng ta sẽ chọn Products để hiển thị dữ liệu liên quan tới sản phẩm trong WooCommerce.
Và nếu bạn có nhiều sản phẩm thì hãy nhớ thiết lập phân trang ở phần Pagination trong widget này. Bạn có thể chọn kiểu phân trang nào đó mà bạn muốn dùng.
Bây giờ chúng ta sẽ tiến hành tạo template hiển thị từng sản phẩm ra ngoài trang này trong widget Loop Grid. Bấm vào nút Create a template ở giao diện của widget này.
Và việc của chúng ta bây giờ là thêm các widget cần thiết để hiển thị thông tin của một sản phẩm như:
- Featured Image (ảnh đại diện cho sản phẩm): Chọn kích thước vừa phải, khoảng 300×300.
- Product Title (hiển thị tên sản phẩm): HTML Tag chọn là
p, phần Link thì chèn dynamic tag là Post URL. Qua mục Style cho chữ in đậm lên, kích thước điều chỉnh từ 18px đến 20px là đẹp. - Product Price (hiển thị giá sản phẩm): Bạn có thể chọn màu sắc hiển thị giá sản phẩm mà bạn muốn, nếu bạn có sản phẩm đang giảm giá thì có thể chọn màu sắc của giá đang giảm để làm nổi bật nó lên.
- Add To Cart (nút thêm vào giỏ hàng): Bạn có thể tự trang trí lại nút này để hiển thị đồng nhất trong website, có thể vào phần Quantity trong tuỳ chọn widget này tắt tính năng chọn số lượng kế bên nút thêm vào giỏ hàng nếu không cần hiển thị. Nếu muốn nút hiển thị ra giữa khung thì vào mục Button chọn Alignment là Center.
Đại loại template ta sẽ thêm vào như sau:
Cuối cùng nếu bạn muốn từng sản phẩm hiển thị ra có điểm nhấn một chút thì tuỳ chỉnh lại container hiển thị sản phẩm bằng cách ấn vào nút sửa container của nó như hình dưới.
Sau đó thiết lập màu nền (#FAFAFA), viền 1px với màu #F5F5F5, border radius cho 4 4 4 4. Nếu bạn muốn có thêm hiệu ứng nổi bật sản phẩm lên một chút khi rê chuột vào thì ở phần Border, bạn chọn qua mục Hover và thêm hiệu ứng box shadow vào cho nó là được.
Bạn có thể sẽ cần thêm một chút padding cho container này là 5 5 5 5 trong phần Advanced.
Tổng thể cuối cùng ta có phần hiển thị sản phẩm như thế này, trông khá ổn đúng không.
Sau khi đã hoàn tất trang “Sản phẩm” thì bạn sẽ cần thiết lập cho WooCommerce luôn nhớ trang này là trang hiển thị tất cả sản phẩm, thay vì sử dụng trang mặc định tạo sẵn. Bạn truy cập vào trang quản trị, vào WooCommerce => Settings, chọn tab Products và sửa lại Shop page.
Thêm bộ lọc sản phẩm cho Elementor
Thành quả ở trên ta đã hoàn thiện phần sản phẩm bên tay phải, nhưng tay trái còn hơi trống và đó là vị trí mà chúng ta đã chừa ra để hiển thị các thông tin khác như bộ lọc sản phẩm, banner khuyến mãi gì đó,…
Mặc định Elementor không có widget hỗ trợ chèn phần lọc sản phẩm vào mà phải sử dụng thêm plugin hỗ trợ. Trong hướng dẫn này thì mình sẽ sử dụng plugin miễn phí tên Product Filter by WBW rất dễ dùng, đủ tính năng cần thiết.
Sau khi cài plugin xong, bạn truy cập mục WBW Product Filter => Add New Filter để tạo một filter mới.
Sau đó bạn đặt tên để nhận biết filter, đồng thời đánh dấu vào những tính năng cho phép người dùng sử dụng để filter.
Sau khi tạo xong nó sẽ chuyển hướng đến trang thiết lập filter vừa tạo ra. Nếu muốn thì có thể xem thêm các thiết lập của từng loại bộ lọc trong này để tuỳ biến lại. Trường hợp bạn muốn filter theo thuộc tính thì phải chọn nó trong cài đặt của filter.
Bây giờ bạn có thể quay lại giao diện chỉnh sửa trang Sản phẩm trên Elementor và chèn widget tên Woofilter vào cột trái. Sau đó chọn bộ filter bạn vừa tạo ra.
Thêm giỏ hàng vào header
Website bán hàng mà chưa có cái giỏ hàng thì hơi sai sai. Chúng ta tiến hành sửa header đang sử dụng trên cả website, bằng cách chọn sửa template header nhanh trên thanh công cụ admin.
Việc còn lại là bạn chèn widget tên Menu Cart vào khu vực cần hiển thị. Còn lại bạn tự do tuỳ chỉnh style theo ý mình. Kết quả
Nếu bạn có thấy giao diện giỏ hàng khi nhấp vào hiển thị bị lỗi thì không sao nhé, bạn hãy lưu lại và xem thử ở bên ngoài sẽ đẹp hơn. Kết quả ta đã có nút xem giỏ hàng trên menu khá chỉnh chu.
Thiết kế trang “Giỏ hàng”với Elementor
Mặc định trang giỏ hàng (Cart) tạo sẵn của WooCommerce lúc mới cài plugin sẽ sử dụng Block Editor để thiết kế. Việc này có thể tiện lợi với những website đang dùng Block Editor nhưng nó sẽ gây lỗi hiển thị và có thể sẽ không tương thích với một số plugin hỗ trợ cho WooCommerce.
Vì vậy trong phần này chúng ta sẽ tạo một trang giỏ hàng khác bằng Elementor. Trước tiên bạn sẽ cần xoá đi trang giỏ hàng mặc định để tránh nhầm lẫn.
Và vào add new page để tạo một trang mới đặt tên là Giỏ hàng và bắt đầu chỉnh sửa với Elementor.
Lúc này, bạn chỉ cần thả cái widget tên Cart vào nội dung là có ngay một trang giỏ hàng, với rất nhiều tuỳ chỉnh. Các tuỳ chỉnh này bạn tự thao tác thử nhé chứ nói cũng hơi dài.
Sau khi tạo trang giỏ hàng xong, bạn phải thiết lập cho WooCommerce sử dụng trang này làm trang giỏ hàng bằng cách vào WooCommerce => Settings, chọn tab Advanced.
Thiết kế trang “Thanh toán” với Elementor
Tương tự như thao tác tạo trang giỏ hàng, bạn cũng cần xoá trang Thanh toán (Checkout) mặc định mà WooCommerce tạo ra, sau đó tạo một trang thanh toán mới, chọn Edit with Elementor và kéo widget tên Checkout vào là có ngay trang thanh toán.
Bạn đừng vội tuỳ chỉnh lại trang thanh toán này để phù hợp với khách hàng Việt Nam. Bạn chỉ cần cài plugin WooCommerce Vietnam Checkout của Lê Văn Toản vào là trang thanh toán này tự động được sửa lại cách hiển thị, phần này mình sẽ hướng dẫn ở bài sau.
Sau khi tạo xong trang Thanh toán thì bạn cũng phải cài đặt WooCommerce sử dụng nó tại WooCommerce => Settings => Advanced.
Tương tự với các thao tác trên, bạn có thể tạo trang My Account mới, chèn widget My Account vào và thiết lập trong WooCommerce để sử dụng nó.
Thiết kế template hiển thị sản phẩm
Mặc định WooCommerce hiển thị sản phẩm cũng khá chuyên nghiệp và đầy đủ các thông tin như hình ảnh bên dưới. Nhưng bạn sẽ không thể tuỳ biến lại được những bố cục hiển thị ở đây trừ khi bạn tự tạo một template hiển thị cho sản phẩm theo ý mình.
Nếu bạn gặp lỗi: Nếu bạn đang thực hành theo chuỗi bài viết Học WordPress Tinh Gọn nhưng bị lỗi không hiển thị sản phẩm chi tiết, thì có thể bạn đang bị xung đột với template Single Post đã thiết kế trước đó đang áp dụng cho cả sản phẩm. Bạn có thể sửa bằng cách đảm bảo điều kiện hiển thị của template đó chỉ áp dụng với Posts. Kiểm tra tại Templates => Theme Builder => Single Post và ấn nút Edit Conditions để chỉ hiển thị với Posts.
May mắn thay trong Elementor Pro, chúng ta có thể dễ dàng tuỳ biến lại cách hiển thị của sản phẩm ra ngoài website, bằng cách sử dụng tính năng Theme Builder và thiết kế cho template Single Product để có thể tuỳ biến lại cách hiển thị.
Bạn tiến hành truy cập vào Templates => Theme Builder và chọn thêm mới một template trong phần Single Product.
Và nhớ chọn điều kiện hiển thị của nó là Products.
Để tiện thiết kế, bạn cũng nhớ sử dụng tính năng Preview Content để tuỳ chọn nội dung hiển thị xem trước trong lúc thiết kế.
Chúng ta bắt đầu đi vào việc chi tiết thiết kế template hiển thị sản phẩm thôi.
Trong đây bạn sẽ thực hiện chia bố cục hiển thị như mong muốn, sau đó chèn các widget như sau:
- Product Title: Hiển thị tên sản phẩm
- Product Images: Hiển thị ảnh đại diện và các ảnh gallery của sản phẩm bên dưới (nếu có)
- Product Price: Giá sản phẩm
- Short Description: Mô tả ngắn
- Product Meta: Hiển thị tên category, tag và mã SKU của sản phẩm
- Product Rating: Số lượt đánh giá sản phẩm
- Product Content: Mô tả chi tiết của sản phẩm
- WooCommerce Breadcrumbs: Thanh điều hướng breadcrumb cho sản phẩm
- Additional Information: Hiển thị các thông tin thêm của sản phẩm
- Product Data Tabs: Phần hiển thị mô tả chi tiết, additional information, reviews theo dạng tab như mặc định
Về chi tiết các bước thiết kế thì bạn vui lòng xem video hướng dẫn của bài này. Dưới đây là bố cục sau khi hoàn thiện của mình:
Ở hình trên nếu bạn chưa biết thì mình hiển thị phần thông số sản phẩm và giới thiệu sản phẩm bằng widget Accordion mặc định của Elementor, sau đó bên trong mỗi item bên trong mình chèn widget Additional Information và Product Content vào. Mặc định Elementor không có widget hiển thị danh sách reviews của khách hàng nên mình cũng tạm không cho hiển thị phần này.
Sau khi hoàn tất và publish template này thì hãy ra ngoài website tận hưởng thành quả nhé.
Tạo template cho Product Archive
Phần này sẽ thiết kế trang hiển thị cho sản phẩm khi vào xem nội dung chi tiết của danh mục sản phẩm, product tag và kết quả tìm kiếm sản phẩm.
Bạn có thể tạo template cho trang này tại mục Templates => Theme Builder => Product Archive. Bạn có thể tự thiết kế lại bố cục hiển thị theo ý muốn, vẫn sử dụng Loop Grid giống như khi thiết kế trang Sản phẩm ở đầu bài, nhưng nhớ tuỳ chỉnh query về là Current Query nhé.
Khi xuất bản thì nhớ chọn áp dụng cho tất cả trang lưu trữ cho sản phẩm, còn nếu bạn siêng thì tạo nhiều template cho từng phần cũng được 🫠.
Kết bài
Nếu bạn đang tìm câu trả lời làm thế nào để có thể tự thiết kế giao diện hiển thị website bán hàng trên WordPress sử dụng WooCommerce, thì các hướng dẫn trong bài mình đã trình bày ở trên đã đủ để bạn có thể tuỳ ý biến tấu giao diện trang bán hàng của mình với Elementor Pro rồi.
Tiếp theo bài sau mình sẽ có một hướng dẫn ngắn về việc thêm tính năng chọn tỉnh thành vào website thông qua plugin WooCommerce Vietnam Checkout, ngoài ra nó cũng giúp tối ưu hiển thị một số thành phần trong website phù hợp hơn với thói quen sử dụng của người Việt Nam.
