Bạn có muốn tìm hiểu cách tạo trang cửa hàng được cá nhân hóa không? WooCommerce với Elementor?
Như bạn có thể biết, Elementor Pro đi kèm với tính năng xây dựng WooCommerce cho phép bạn tạo một trang web của thương mại điện tử được cá nhân hóa với WooCommerce không cần mã hóa. Tính năng này cho phép bạn tạo các trang WooC Commerce tùy chỉnh bằng trình chỉnh sửa trực quan của Elementor, cung cấp giao diện trực quan.
Xem thêm: Cách cài đặt Elementor trên WordPress
Tại thời điểm viết bài này, bạn có thể tạo các trang tùy chỉnh cho trang cửa hàng, trang sản phẩm và các trang lưu trữ sản phẩm (thẻ và danh mục). Ngay sau đó, bạn cũng sẽ có thể tạo các trang tùy chỉnh cho trang thanh toán và trang giỏ hàng.
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo trang cửa hàng WooCommerce tùy chỉnh bằng cách sử dụng tính năng trình tạo WooCommerce của Elementor Pro.
Bản thân trang cửa hàng là một trong những trang mặc định trong WooCommerce. Trang này hoạt động như một nơi trưng bày để trưng bày các sản phẩm của bạn. Bạn có thể truy cập trang này bằng cách đi tới yourite.com/store. Theo mặc định, trang cửa hàng WooCommerce chỉ hiển thị các sản phẩm WooCommerce.
Bằng cách tạo trang cửa hàng tùy chỉnh bằng Elementor Pro, bạn có thể thêm các yếu tố để làm cho mặt tiền cửa hàng của mình hấp dẫn hơn.
Cách tạo trang tùy chỉnh của cửa hàng WooCommerce với Elementor
Có ít nhất hai tiện ích Elementor mà bạn có thể sử dụng để tạo trang tùy chỉnh của cửa hàng WooCommerce: Lưu trữ sản phẩm và Các sản phẩm.
Trong ví dụ này, chúng tôi sử dụng cái sau.
Chức năng của widget Sản phẩm khá giống với tiện ích con Bài viết. Sự khác biệt là tiện ích Sản phẩm được sử dụng để hiển thị các sản phẩm WooCommerce trong khi tiện ích Bài đăng được sử dụng để hiển thị các bài đăng trên blog.
Đọc cũng: Cách nhập hoặc xuất mô hình trong Elementor
Xin lưu ý rằng bạn chỉ có thể tìm thấy tiện ích Sản phẩm khi plugin WooCommerce được cài đặt và kích hoạt.
Để bắt đầu tạo trang cửa hàng WooCommerce tùy chỉnh bằng Elementor Pro, hãy truy cập đầu tiên à Mẫu -> Trình tạo Chủ đề trên bảng điều khiển WordPress của bạn. Bấm vào tab Sản phẩm lưu trữ của trang Trình tạo chủ đề, sau đó nhấp vào nút thêm vào MỘT SẢN PHẨM SẮP XẾP.
Đặt tên cho mô hình của bạn và nhấp vào nút TẠO MÔ HÌNH.
Có ba mẫu trang cửa hàng tùy chỉnh mà bạn có thể chọn trong trường hợp bạn muốn tạo trang cửa hàng tùy chỉnh từ một mẫu. Nếu bạn muốn xây dựng trang cửa hàng tùy chỉnh từ đầu, bạn chỉ cần đóng thư viện mẫu.
Xem thêm: Cách sử dụng Trình lấy mẫu màu trong Elementor
Trong ví dụ này, chúng tôi sẽ tạo trang cửa hàng tùy chỉnh từ đầu. Như đã đề cập ở trên, chúng tôi sẽ sử dụng tiện ích Sản phẩm để hiển thị các sản phẩm.
Trước khi thêm tiện ích Sản phẩm vào hộp chỉnh sửa, bạn có thể xác định bố cục bằng cách thêm các phần và cột. Khi bố cục đã sẵn sàng, bạn chỉ cần kéo tiện ích Sản phẩm vào hộp chỉnh sửa.
Như bạn có thể thấy, tiện ích Sản phẩm tự động tải và hiển thị các sản phẩm WooCommerce mới nhất. Bạn có thể sửa đổi truy vấn bằng cách mở khối Truy vấn dưới tab Nội dung từ bảng cài đặt. Có năm tùy chọn để lựa chọn:
- Truy vấn hiện tại - Truy vấn hiện tại
- Sản phẩm mới nhất - Sản phẩm mới nhất
- Bán - Giảm giá
- Nổi bật - Nổi bật
- Lựa chọn thủ công - Lựa chọn thủ công
Bạn cũng có thể đặt thứ tự các sản phẩm được hiển thị hoặc loại trừ một số
Để đặt số cột và hàng, bạn có thể mở khối Nội dung dưới tab Nội dung. Từ khối này, bạn cũng có thể kích hoạt sự đánh số trang.
Bạn có thể thử với bảng cài đặt cho đến khi có được cài đặt tốt nhất cho tiện ích Sản phẩm. Sau khi hoàn tất với tiện ích Sản phẩm, bạn có thể thêm các tiện ích khác vào trang của mình.
Đọc cũng: Cách sử dụng công cụ chọn màu trong Elementor
Sau khi hoàn tất việc chỉnh sửa trang, bạn có thể nhấp vào nút PUBLISH ở cuối bảng cài đặt.
Thêm điều kiện hiển thị bằng cách nhấp vào nút thêm một điều kiện. Vì bạn muốn tạo trang cửa hàng tùy chỉnh, hãy chọn tùy chọn Cửa hàng Page. Nhấp vào nút LƯU & ĐÓNG để lưu thay đổi.
Cho đến nay, bạn đã tạo thành công trang cửa hàng WooCommerce tùy chỉnh bằng Elementor Pro. Bạn có thể đi tại site.com/store của bạn để kiểm tra kết quả.
Tùy chỉnh tiện ích Sản phẩm
Trước khi xuất bản trang của mình, bạn có thể tùy chỉnh tiện ích Sản phẩm để làm cho trang hấp dẫn hơn. Để làm như vậy, hãy nhấp vào tiện ích trong hộp chỉnh sửa và điều hướng đến tab Phong cách từ bảng cài đặt. Có bốn khối bạn có thể mở như sau:
Sản phẩm
Bạn có thể mở khối này để xác định khoảng cách giữa các cột và hàng. Từ khối này bạn cũng có thể thiết lập kiểu chữ (họ phông chữ, cỡ chữ, v.v.) cũng như màu chữ của các yếu tố sản phẩm như tiêu đề sản phẩm, giá sản phẩm, xếp hạng của sản phẩm, v.v…. Bạn cũng có thể đặt đường viền của hình ảnh sản phẩm,
- Hộp
Trong ngữ cảnh này, Box dùng để chỉ hộp đựng của mỗi sản phẩm. Bạn có thể mở khối Hộp để xác định chiều rộng đường viền của vùng chứa, bán kính đường viền, bóng của chiếc hộp, màu nền, màu đường viền, v.v.
- Sự đánh số trang
Nếu bạn kích hoạt tùy chọn Sự đánh số trang từ khối Nội dung, bạn có thể mở khối Sự đánh số trang dưới tab Phong cách để tùy chỉnh phân trang. Bạn có thể đặt những thứ như khoảng cách, màu đường viền, màu nền, v.v.
Bạn cũng có thể xác định các tham số khác nhau trên mỗi trạng thái (bình thường, trỏ và hoạt động).
- Giảm giá chớp nhoáng
Khi bạn thêm một sản phẩm mới trong WooCommerce, bạn có thể đặt thuộc tính giá ưu đãi để cho khách truy cập biết rằng sản phẩm được liên kết được giảm giá. Để nhấn mạnh điều này, bạn có thể hiển thị thuộc tính giảm giá trên trang cửa hàng để các sản phẩm giảm giá có huy hiệu giảm giá.
Bạn có thể mở khối Giảm giá chớp nhoáng để cá nhân hóa huy hiệu bán hàng. Bạn có thể xác định các yếu tố như màu văn bản, màu nền, kiểu chữ, bán kính đường viền, kích thước (chiều rộng và chiều cao), khoảng cách, v.v.….
Cuối cùng
WooCommerce Builder là một trong những tính năng được cung cấp bởi Elementor Pro. Nó cho phép bạn tạo một trang web nền tảng thương mại điện tử được cá nhân hóa và duy nhất với WooCommerce và không cần mã hóa. Không cần cài đặt theme WordPress mà tuyên bố được thiết kế cho WooCommerce. Thay vào đó, bạn có thể tự tạo các trang WooCommerce tùy chỉnh bằng trình chỉnh sửa trực quan của Elementor.
Đọc cũng: Cách thêm dải phân cách để tạo phần trong Elementor
Cho đến phiên bản 3.2.2, Elementor Pro chỉ cho phép bạn tạo Trang cửa hàng tùy chỉnh, Trang sản phẩm đơn tùy chỉnh và Trang lưu trữ sản phẩm tùy chỉnh. Nhưng Elementor đã thông báo rằng trên phiên bản tiếp theo của Elementor Pro, bạn cũng sẽ có thể tạo trang giỏ hàng tùy chỉnh, trang thanh toán tùy chỉnh và trang tài khoản khách hàng tùy chỉnh.
Tải xuống Elementor Pro ngay!
Kết luận
Đây là ! Đó là vì bài viết này hướng dẫn bạn cách tạo trang tùy chỉnh cho cửa hàng WooCommerce với Elementor. Nếu bạn có bất kỳ mối quan tâm nào về cách đến đó fcho chúng tôi biết trong ý kiến.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
