Cách chỉnh sửa trang cửa hàng WooCommerce bằng Elementor

Chỉnh sửa trang cửa hàng WooCommerce để có thiết kế độc đáo cho trang web WooCommerce của bạn. Vì trang cửa hàng là trang được truy cập nhiều nhất trên bất kỳ trang web WooCommerce nào và nó rất giống nhau trên hầu hết các trang web WooCommerce.

Vì vậy, nếu bạn muốn nổi bật so với các trang web khác, bạn cần tùy chỉnh trang cửa hàng để có trang cửa hàng độc đáo.

Tùy chỉnh với trình soạn thảo Block là một ý tưởng tốt cho người mới bắt đầu, nhưng nếu bạn muốn có sự tự do hơn trong việc tùy chỉnh, việc sử dụng Elementor là bắt buộc. Để thực hiện tùy chỉnh mạnh mẽ hơn miễn phí, bạn cần sử dụng các tiện ích bổ sung với Elementor. WooLentor, còn được biết đến là ShopLentor trong kho lưu trữ plugin WordPress, là một tiện ích bổ sung xuất sắc để tạo trang web cá nhân hóa hơn.

Trong hướng dẫn này, chúng ta sẽ chỉnh sửa hoặc tùy chỉnh trang cửa hàng của cửa hàng WooCommerce bằng cách sử dụng Elementor và WooLentor miễn phí. Mặc dù chúng tôi đã tạo một thiết kế tùy chỉnh ở đây, bạn có thể theo dõi quá trình và tạo phiên bản cá nhân hóa của riêng bạn.

**Cách chỉnh sửa trang cửa hàng WooCommerce với Elementor**

**Bước 1: Cài đặt Plugin**

– Đi đến Bảng điều khiển WordPress, rồi di chuột qua Plugins và nhấn Add New để thêm một plugin mới.
– Bạn sẽ thấy kho lưu trữ plugin WordPress, tìm kiếm Elementor, sau đó cài đặt và kích hoạt nó. Hãy xem hướng dẫn cài đặt plugin nếu bạn gặp bất kỳ vấn đề nào.
– Bạn cần cài đặt thêm một plugin nữa, ShopLentor. Bạn có thể cài đặt nó theo cùng cách mà chúng tôi đã cài đặt Elementor. Trong trường hợp đó, bạn cần tìm kiếm ShopLentor.
– Di chuột qua Plugins và nhấn Add New. Sau đó trên trang mới, nhấp vào Upload Plugin.
– Bây giờ, tải lên tệp plugin đã nén của WooLentor Addons, cài đặt và kích hoạt nó.

**Bước 2: Thiết lập Mẫu**

– Sau khi kích hoạt cả hai plugin, đi đến Bảng điều khiển WordPress, rồi di chuột qua Tùy chọn Mẫu và nhấn vào Mẫu Đã Lưu.
– Nhấp vào Thêm Mới để thêm một mẫu mới.
– Bây giờ, chọn loại mẫu là Trang, và đặt tên tùy chỉnh. Chúng tôi đặt tên là “trang-cua-hang-tuy-chinh”, bạn có thể chọn bất kỳ tên nào bạn muốn. Sau đó, nhấp vào Tạo Mẫu để tạo một mẫu mới.

**Bước 3: Thiết lập WOOLENTOR ADDONS & Tùy chỉnh**

– Sau khi tạo mẫu, bạn sẽ thấy một trang mới, nơi có nhiều tùy chọn của Elementor. Cuộn xuống, tìm tùy chọn WOOLENTOR ADDONS, và nhấp vào đó.
– Bạn sẽ thấy nhiều tùy chọn dưới WOOLENTOR ADDONS. Chọn WL- Universal Product Layout, sau đó kéo và thả nó vào trang.
– Bây giờ, bạn sẽ thấy các sản phẩm trên trang đó. Ban đầu, bạn chỉ sẽ thấy 3 sản phẩm, đừng lo, bạn sẽ sớm có các sản phẩm khác. Ở bên trái, bạn sẽ thấy Cài đặt Bố trí đầu tiên. Trong cài đặt đó, bạn có thể đặt Bố trí, Chiều cao và cột. Vì mục đích thử nghiệm, chúng tôi chọn Bố trí Tab và 5 cột.
– Sau khi thiết lập Cài đặt Bố trí, nhấp vào Cài đặt Truy vấn, sau đó chọn cách bạn muốn sản phẩm được lọc, giới hạn sản phẩm và bật/tắt thứ tự tùy chỉnh. Vì mục đích thử nghiệm, chúng tôi chọn Lọc theo sản phẩm ngẫu nhiên, giới hạn sản phẩm 30 và vô hiệu hóa thứ tự tùy chỉnh. Bạn cũng có thể thử sử dụng Cài đặt Nội dung dưới Cài đặt Truy vấn.
– Sau đó, bạn sẽ thấy Cài đặt Nút hành động. Bạn có thể đặt Nút hành động, Kiểu, Hiển thị trên và Vị trí. Để mục đích thử, chúng tôi kích hoạt Nút hành động, chọn Kiểu Ba và Hiển thị khi Di chuột qua.
– Sau Cài đặt Nút hành động, bạn sẽ thấy Cài đặt Hình ảnh và Cài đặt Đếm ngược để thực hiện thêm tùy chỉnh.
– Bạn có thể thực hiện thêm tùy chỉnh nếu bạn muốn sử dụng Style. Để làm điều đó, nhấp vào Style và thực hiện tùy chỉnh bằng các tùy chọn khác nhau. Chúng tôi sẽ không thực hiện bất kỳ tùy chỉnh nào trong khu vực này, bạn có thể làm theo ý muốn.
– Bạn thậm chí có thể thử nghiệm thêm các tùy chọn tùy chỉnh bằng cách sử dụng tùy chọn Nâng cao. Sau khi thực hiện tất cả các tùy chỉnh đó, nhấp vào Xuất bản để lưu nó.

**Bước 4: Sử dụng ShopLentor/WooLentor**

– Đừng bối rối với hai tên khác nhau. WooLentor và ShopLentor là cùng một plugin dưới hai tên khác nhau. Trong kho lưu trữ WordPress, nó được gọi là ShopLentor, và trên trang web chính thức của nó, nó được gọi là WooLentor.
– Sau khi lưu điều đó, quay lại Bảng điều khiển WordPress. Sau đó di chuột qua ShopLentor, sau đó nhấn vào Cài đặt.
– Sau đó, một trang mới sẽ xuất hiện. Nhấp vào Template của WooCommerce.
– Dưới Mẫu WooCommerce, bạn sẽ thấy một tùy chọn gọi là Mẫu trang cửa hàng sản phẩm. Chọn mẫu đã được tạo trước mà bạn đã tạo. Chúng tôi chọn trang-cua-hang-tuy-chinh vì chúng tôi đã chuẩn bị điều này cho trang cửa hàng của chúng tôi. Sau đó lưu lại bằng cách nhấp vào Lưu thay đổi.

**Xem trước**

Chúng tôi hy vọng bạn đã thành công trong việc tùy chỉnh trang cửa hàng WooCommerce của mình bằng Elementor. Trong trường hợp bạn gặp bất kỳ khó khăn nào, đừng ngần ngại liên hệ với chúng tôi. Chúng tôi sẽ cố gắng hết sức để giúp bạn.

Nếu bạn cảm thấy không thoải mái khi sử dụng Elementor, bạn có thể thử tùy chỉnh trang cửa hàng bằng trình soạn thảo block. Mặc dù nó có ít tùy chỉnh hơn, nhưng nó dễ dàng hơn.