Làm chủ WooCommerce với Elementor: Hướng dẫn Toàn diện cho Người mới bắt đầu

Tùy chỉnh trang WooCommerce thực sự chỉ với trình soạn thảo Gutenberg khá khó khăn. Font chữ ít, widget hạn chế, không gian tùy chỉnh nhỏ. Đó là lúc Elementor xuất hiện. Mọi góc ngóc của trang WooCommerce đều có thể tùy chỉnh để mang lại trải nghiệm mua sắm tốt nhất cho khách hàng. Bạn đã biết: trải nghiệm càng tốt, chuyển đổi càng cao. Bài viết này về cách sử dụng WooCommerce với Elementor.

TL;DR: Bài viết là hướng dẫn người mới dùng Elementor với WooCommerce. Ngoài ra, khuyên sao lưu web với BlogVault. Sao lưu thời gian thực của BlogVault dành cho WooCommerce, không bao giờ mất đơn hàng, giao dịch, khách hàng, sản phẩm.

Thiết lập cửa hàng WooCommerce lần đầu có thể gây sợ hãi, nhưng thực sự rất dễ dàng. WordPress và WooCommerce đều được thiết kế để người tạo nội dung dễ dàng tiếp cận, không chỉ dành cho lập trình viên.

Elementor ban đầu cũng có thể gây choáng ngợp, nhưng tiềm năng to lớn để mang lại "đặc chất riêng" (je ne sais quoi) cho cửa hàng.

Bài viết sẽ hướng dẫn thiết lập trang WooCommerce, cài Elementor và các plugin khác cần thiết để quản lý trang WooCommerce tuyệt vời. Khuyên cài thêm các plugin này vì khi cửa hàng phát triển, bạn sẽ cần "đội ngũ bảo trì" để mọi thứ chạy trơn tru.

Bắt đầu với cơ bản. Làm sao tạo trang WordPress? Nếu đã thiết lập WooCommerce, bỏ qua đến phần hiểu Elementor.

Tạo trang WordPress

Có vài bước cốt lõi trước khi tùy chỉnh: chọn host, tạo tên miền, cài WordPress, thêm SSL (Security Socket Layer). Đây là bài viết thiết lập WordPress từ con số 0. Tóm tắt các bước:

1. Chọn host: Xem xét: nhu cầu bạn, hỗ trợ từ host, giá cả. Nhiều host để chọn, hãy dành thời gian tìm kiếm phù hợp nhu cầu và ngân sách. Cảnh báo: lựa chọn giá rẻ nhất hiếm khi tốt. Nếu muốn bắt đầu ngay, chúng tôi dùng Cloudways cho trang test. Xây dựng WooCommerce trên Cloudways cực dễ và đã cài sẵn WooCommerce. Nơi tốt để bắt đầu, bảng điều khiển host có thông tin hay về trang web.

2. Đăng ký tên miền: Tên miền là tên trang web. Trước khi chọn, suy nghĩ về mục tiêu trang. Bán gì? Khách hàng là ai? Với đó, đặt tên miền dễ nhớ, dễ nhận diện.
3. Cài WordPress: Quy trình khác nhau tùy host. Xem tài liệu host hoặc liên hệ hỗ trợ. Với Cloudways, chọn WooCommerce khi tạo ứng dụng mới. Với Hostinger, chọn WordPress và tự động cài WordPress.
4. Thêm SSL: Cũng khác nhau tùy host. Một số host cung cấp SSL miễn phí, số khác cần cơ quan chứng chỉ. Với Cloudways, chứng chỉ bảo mật tự động thêm. Khi có chứng chỉ, cài đặt dễ dàng với plugin Really Simple SSL.

Thiết lập trang WooCommerce

Đã có trang WordPress cơ bản, giờ cài WooCommerce và thiết lập. WooCommerce vận hành cửa hàng: liệt kê sản phẩm, quản lý khách hàng, thanh toán.

Phần này nói về cơ bản thiết lập WooCommerce và việc nên làm trước khi chỉnh sửa trang với Elementor. Những gì nên làm:

1. Cài WooCommerce: Nếu dùng Cloudways, bỏ qua bước này. Nếu không, di chuột qua Plugin > Thêm mới. Tìm WooCommerce > nhấn Cài đặt và Kích hoạt.

2. Thiết lập WooCommerce với Trợ lý thiết lập (Setup Wizard): Với Setup Wizard, thêm chi tiết cửa hàng: thông tin cơ bản, phương thức thanh toán ưu tiên, vận chuyển, tiện ích mở rộng cần thiết. Có bài viết chi tiết hơn. Chỉ cần nhấn WooCommerce ở thanh bên để bắt đầu.
3. Cài theme Hello: Hello Theme là theme tối giản của Elementor, thiết kế để bổ sung cho trình xây dựng trang. Không bắt buộc nhưng giúp tận dụng tối đa bản Pro. Cài đặt không cần Elementor. Nhấn Giao diện > Theme > Thêm mới, tìm "Hello" > nhấn Cài đặt và Kích hoạt.

4. Thiết lập cửa hàng: Thêm sản phẩm, ảnh, mô tả, giá, danh mục, chính sách bảo mật, hoàn tiền, v.v. Tạo "canvas" để làm việc khi bắt đầu chỉnh sửa với Elementor.

Giờ sẵn sàng thêm thanh toán.

Thêm phương thức thanh toán

Để xây dựng cửa hàng đầy đủ chức năng, mục tiếp theo là thêm phương thức thanh toán.畢竟, khách hàng thích sản phẩm thì bạn muốn được thanh toán đúng không?

Có nhiều plugin và cổng thanh toán để chọn. Mỗi cái khác nhau rất nhiều, cần nghiên cứu để tìm cái phù hợp nhất. Thêm phương thức thanh toán cũng mở ra trang Giỏ hàng và Thanh toán. Các bước:

1. Chọn phương thức thanh toán: Chọn thanh toán khi giao hàng (COD) hoặc cổng thanh toán. Chọn cổng thanh toán dựa trên cách khách thích thanh toán, phí giao dịch, vị trí cửa hàng.
2. Cài cổng thanh toán: Sau khi chọn, cài plugin và tích hợp tài khoản vào WooCommerce. Chúng tôi có bài tích hợp WooCommerce với Stripe và PayPal – hai lựa chọn phổ biến bao quát nhiều phương thức và vùng địa lý.

3. Kiểm tra phương thức thanh toán: Trải qua quy trình mua hàng xem trải nghiệm khách hàng như thế nào. Cũng thấy trang sản phẩm, giỏ hàng, checkout mặc định trông như thế nào. Nhiều plugin thanh toán có tính năng test/sandbox để mô phỏng quy trình.

Cài Elementor trên trang WooCommerce

Khuyên đầu tư bản Pro vì mảng widget WooCommerce tuyệt vời. Các bước:

1. Cài đặt và Kích hoạt Elementor: Quay lại bảng điều khiển WordPress, vào Plugin > Thêm mới. Tìm Elementor > nhấn Cài đặt > Kích hoạt.

2. Tạo tài khoản: Chuyển đến trang tạo tài khoản, chọn gói. Có 3 loại giấy phép và bản miễn phí. Sẽ giải thích sự khác biệt sau. Khi xong, quay lại bảng điều khiển WP.

Hiểu về Trình soạn thảo Trang Elementor

Elementor là "nhà máy thiết kế", cho phép tạo trang tùy chỉnh cho cửa hàng với giao diện kéo thả dễ dàng. Phạm vi tùy chọn có thể choáng ngợp lúc đầu nhưng đừng lo, chỉ cần chút điều chỉnh để quen. Miễn là có bản sao lưu, "nhảy ngay vào" là cách tốt nhất học Elementor.

Với tâm thế đó, phần này giúp bạn làm quen với bố cục trình soạn thảo trang.

1. Mở trang để chỉnh sửa: Di chuột qua Trang menu bên > Tất cả trang. Di chuột qua trang bất kỳ > Chỉnh sửa. Khi trình soạn thảo trang mở, nhấn Chỉnh sửa với Elementor. Dẫn đến trình soạn thảo trang Elementor.
   
   Ảnh minh họa giao diện:

Có những trang quan trọng trực tiếp góp phần vào trải nghiệm mua sắm. Lưu ý: một số trang sẽ có shortcode như sau:

woocommerce_checkout

Shortcode này quan trọng. Không xóa trừ khi dùng widget WooCommerce của Elementor Pro. Nhưng có thể đặt hình ảnh hoặc văn bản trước/sau shortcode.

Giờ nói về cách chỉnh sửa trang.

2. Thêm Khu vực (Sections): Di chuột qua các phần trang, hộp xanh hiện ra biểu thị một khu vực. Nhấn biểu tượng 6 chấm giữa khu vực để chỉnh sửa. Nhấn + trong hộp chấm. Tạo khu vực mới.
3. Chọn Cột (Columns): Mỗi khu vực chia thành cột. Di chuột qua khu vực, các khối nội dung khác nhau được đánh dấu hộp xanh. Cột chứa các phần tử riêng lẻ, tùy chỉnh riêng biệt. Chọn bố cục cột mong muốn. Sẵn sàng kéo thả phần tử mới.
4. Thêm Phần tử (Elements): Bên trái là thư viện Phần tử. Phân loại theo danh mục: Site, WooCommerce. Kéo thả phần tử vào cột. Chỉnh sửa phần tử ở thanh bên. Nhấn biểu tượng bút xanh góc trên bên phải cột, thanh bên đổi để hiện các tùy chỉnh (tùy phần tử trong cột). Nếu chỉnh văn bản, sẽ thấy trình soạn thảo văn bản bên trái.
5. Xem trước thay đổi: Nhấn nút mắt dưới thanh bên để xem trước.
6. Kiểm tra chế độ Responsive: Nhấn logo Responsive mode dưới cùng, xem trước trang ở các chế độ khác nhau: mobile, desktop, kích thước màn hình khác.
7. Xuất bản/Cập nhật trang: Khi xong, lưu nháp, cập nhật hoặc xuất bản bằng nút góc dưới bên trái.

Đã hiểu bố cục trình soạn thảo, đây là giải thích một số widget cơ bản.

Chỉnh sửa văn bản

1. Kéo thả Tiêu đề (Headline) hoặc Trình soạn thảo văn bản (Text Editor): Thêm khu vực, chọn số cột. Kéo thả Tiêu đề hoặc Trình soạn thảo văn bản từ thanh bên. "Thêm văn bản ở đây" sẽ thêm vào trang.

2. Điền văn bản đúng: Chọn toàn bộ văn bản, thay bằng nội dung mong muốn.
3. Tùy chỉnh văn bản: Chọn văn bản > nhấn Kiểu dáng (Style) thanh bên. Đổi màu bằng thanh màu. Đổi font bằng cách nhấn biểu tượng bút chì bên cạnh Typography. Cũng đổi kiểu nét, thêm bóng, căn chỉnh.

Thêm hình ảnh

1. Kéo thả phần tử Hình ảnh (Image): Thêm khu vực nếu cần, chọn cột. Kéo thả phần tử Hình ảnh.
2. Thêm hình ảnh: Nhấn logo bút chì góc trên bên phải hình ảnh. Thanh bên, di chuột qua hình ảnh > chọn Chọn hình ảnh (Choose Image). Thay hình mặc định bằng hình của bạn.

3. Chỉnh sửa hình ảnh: Đổi kích thước, căn chỉnh, thêm chú thích, liên kết đến file media hoặc URL.

Thêm nút bấm

1. Kéo thả phần tử Nút (Button): Khi đã có cột, kéo thả nút.
2. Tùy chỉnh nút: Đổi loại nút, văn bản trên nút, căn chỉnh, màu, kích thước. Thêm liên kết hoặc hành động.

Với những cơ bản đó, đây là mẹo giảm tải công việc lớn:

Tạo Cài đặt Trang web (Site Settings)

Bạn có thể tạo chủ đề màu, đặt font toàn cục, mẫu cho header, footer, nút bấm. Nhấn biểu tượng hamburger góc trên bên trái trình soạn thảo > Cài đặt trang web (Site Settings). Khi đã xác định thiết kế, tính năng này tiết kiệm nhiều thời gian khi tạo trang mới sau này.

Đó là cơ bản. Khi đã quen điều khiển Elementor, hãy dùng quyền năng mới này hiệu quả.

Cách dùng WooCommerce với Elementor Pro

Nếu sẵn sàng tạo trang WooCommerce với bản Elementor Pro, phần này nói widget nào dùng cho trang cụ thể.

Cách chỉnh sửa trang Sản phẩm WooCommerce với Elementor

Trang này khách hàng tìm hiểu sản phẩm. Các bước chỉnh sửa trang sản phẩm đơn lẻ:

1. Chỉnh sửa Trang Sản phẩm: Chỉnh mẫu có sẵn của Elementor hoặc tạo từ đầu. Dễ hơn chỉnh mẫu nếu không biết widget nào đặt đâu. Chỉ cần chỉnh widget hiện có.
2. Tùy chỉnh bằng widget: Nếu muốn tạo từ đầu, widget nên thêm:

• Tiêu đề sản phẩm (Product title): Widget chứa tiêu đề sản phẩm. Chỉnh sửa ở thanh bên.
• Hình ảnh sản phẩm (Product image): Chỉnh kích thước ảnh ở thanh bên. Chọn ảnh, khám phá cài đặt bên phải.
• Đánh giá sản phẩm (Product Rating): Widget hữu ích cho khách xem ấn tượng của người khác.
• Mô tả ngắn (Short description): Widget thêm mô tả như khi thêm sản phẩm.
• Giá sản phẩm (Product price): Thêm widget này để hiển thị giá. Giá được điền tự động từ khi thêm sản phẩm vào WooCommerce.
• Thêm vào giỏ (Add to cart): Nút thêm sản phẩm vào giỏ. Đổi màu, văn bản, kích thước ở thanh bên.
• Woo Breadcrumbs: Breadcrumbs hiển thị danh mục sản phẩm. Ví dụ: mua giày nam đen từ trang thời trang, breadcrumbs có thể: Trang chủ/Thời trang nam/Giày/Giày da đen.
• Sản phẩm liên quan (Product related): Phần "Sản phẩm liên quan" thường thấy trên web thương mại điện tử. Thêm bằng cách kéo thả widget Products Related.
• Widget Upsells: Widget chạy phần "Có thể bạn cũng thích" trên trang sản phẩm.

Mỗi widget tùy chỉnh được về font, màu, căn chỉnh, vị trí, v.v.

2. Xem lại thay đổi: Nhấn responsive mode, kiểm tra trang trên các thiết bị khác nhau.
3. Xuất bản hoặc cập nhật: Nếu ổn, xuất bản hoặc cập nhật trang.

Khuyến nghị khi chỉnh sửa trang sản phẩm:

• Thêm hình ảnh chất lượng cao cho sản phẩm
• Viết mô tả sản phẩm hay
• Chọn tên sản phẩm mô tả, có ý nghĩa

Cách chỉnh sửa trang Cửa hàng (Shop) WooCommerce với Elementor

Còn gọi là trang lưu trữ (archive), nơi khách thấy tất cả sản phẩm. Mục tiêu: tạo trang khách dễ dàng tìm sản phẩm muốn.

1. Chỉnh mẫu hoặc tạo trang mới: Sau sẽ nói về tạo mẫu mới. Có thể dùng mẫu có sẵn hoặc từ đầu. Nếu từ đầu, di chuột qua Trang > Thêm mới. Thêm các widget sau:
2. Thêm Widget để tùy chỉnh: Widget khuyên dùng cho trải nghiệm mua sắm tốt:

• Danh mục sản phẩm (Product Categories): Giúp khách lọc sản phẩm theo danh mục.
• Giỏ hàng Menu (Menu Cart): Thêm logo giỏ hàng trong menu, khách xem đã thêm gì.
• Sản phẩm (Products): Hiển thị tất cả sản phẩm đã thêm.
• Archive Product: Cho khách sắp xếp theo mặc định, phổ biến, mới nhất, giá.
• Thêm vào giỏ tùy chỉnh (Custom Add to Cart): Tùy chỉnh nút thêm giỏ. Đổi văn bản, màu, kích thước.
• WooCommerce Breadcrumbs: Hiển thị tất cả danh mục và vị trí sản phẩm trong kho. Giống đường dẫn từ trang chủ đến trang khách đang xem.
• Tiêu đề và mô tả lưu trữ (Archive title ad description): Thêm tiêu đề, mô tả, chỉnh cài đặt thanh bên.

3. Xem lại trang: Sau khi chỉnh xong, xem lại trên các thiết bị. Hài lòng > nhấn Xuất bản.

Cách chỉnh sửa trang Giỏ hàng (Cart) WooCommerce với Elementor

Thứ hai quan trọng sau trang checkout, trang giỏ hàng thiết kế tốt có thể làm thành hoặc phá vỡ đơn hàng. Khi thiết kế, khuyên nghiên cứu kỹ xem khách cần thấy gì khi xem lại lựa chọn trước khi thanh toán. Xem các trang thương mại điện tử phổ biến, điều chỉnh thiết kế dần dần.

Dùng widget Cart của Elementor để tùy chỉnh hoàn toàn trang giỏ hàng. Các bước:

1. Chỉnh sửa trang giỏ hàng hiện có: Di chuột qua Trang > Tất cả trang. Nhấn Chỉnh sửa khi di chuột qua trang Giỏ hàng. Nhấn Chỉnh sửa với Elementor.
2. Thay shortcode bằng widget: Shortcode là đoạn code thêm tính năng vào trang. Với widget Cart, không cần shortcode, xóa shortcode và thay bằng widget từ thanh bên.
3. Tùy chỉnh trang: Kiểm tra thanh bên, khám phá cài đặt. Thử các điều sau:

• Chung (General): Chọn số cột mỗi khu vực, làm cột dính (sticky) bằng cách bật trong thanh bên.
• Tóm tắt đơn hàng (Order Summary): Đổi nút Cập nhật giỏ hàng nếu muốn.
• Tổng cộng (Totals): Tùy chỉnh nhãn, căn chỉnh cho phần tổng giỏ hàng, bao gồm nút Tiến hành thanh toán (Proceed to Checkout).
• Tùy chọn bổ sung (Additional Options): Bật/tắt khả năng giỏ hàng tự động cập nhật.
  
  Nhấn Kiểu dáng (Style) thanh bên, những gì tùy chỉnh được:

• Khu vực (Sections): Kiểm soát kiểu dáng các khu vực – thêm bóng đổ, màu nền.
• Chữ in (Typography): Tất cả văn bản đổi cho phù hợp thẩm mỹ web.
• Nút bấm (Buttons): Đổi màu, văn bản, kích thước.
• Tóm tắt đơn hàng (Order Summary): Tùy chỉnh giao diện tóm tắt đơn hàng.
• Tổng cộng (Totals): Chỉnh sửa phần Tổng giỏ hàng.
• Nút Thanh toán (Checkout Button): Tùy chỉnh màu, kích thước, văn bản, căn chỉnh nút thanh toán.
  

4. Xem lại chế độ Mobile: Xong, xem lại trang Mobile. Hài lòng > nhấn Xuất bản.

Cách chỉnh sửa trang Thanh toán (Checkout) WooCommerce với Elementor

Đây là trang quan trọng nhất trang thương mại điện tử. Trang cuối khách thấy, nơi quyết định mua. Trang checkout có tỷ lệ bỏ giỏ cao nhất, cần làm cho mượt mà nhất có thể.

Elementor Pro có widget Checkout giúp chỉnh trang checkout dễ dàng. Hoạt động cùng widget Cart và My Account, cho phép chỉnh trang checkout hiện có. Với widget, thay đổi thiết kế: màu chữ, căn chỉnh, khu vực, v.v.

1. Mở trang checkout với trình soạn thảo Elementor: Di chuột qua Trang > Tất cả trang. Di chuột qua Trang Checkout > Chỉnh sửa. Trên cùng, nhấn Chỉnh sửa với Elementor. Đợi giây lát mở trong trình soạn thảo.
2. Thay shortcode Checkout bằng Widget Checkout: Shortcode là cách WooCommerce đưa trường Checkout vào trang. Nó trông như:

woocommerce_checkout

Thay vào đó, thêm widget checkout từ thư viện bên trái. Sẽ thấy bản xem trước trang checkout.

Lưu ý: Vì đang chỉnh trang checkout, hãy thêm vài sản phẩm vào giỏ, nhấn nút checkout. Sẽ thấy trang có sản phẩm cho trải nghiệm tốt hơn.

3. Tùy chỉnh trang: Khám phá nhiều cài đặt Widget Checkout Elementor ở thanh bên. Một số cài đặt:

• Chung (General): Chọn bố cục 1 hoặc 2 cột, làm một cột dính, thêm offset để header không che khu vực cột.
• Thay đổi biểu mẫu thanh toán hoặc vận chuyển: Chỉnh tiêu đề, placeholder, từng trường của các biểu mẫu.
• Thông tin bổ sung: Khu vực khách thêm hướng dẫn/thông tin đơn hàng.
• Cài đặt mã giảm giá: Tùy chỉnh căn chỉnh, chữ in mã giảm giá.
• Thanh toán (Payment): Tùy chỉnh mọi khía cạnh nút thanh toán; căn chỉnh, màu sắc.

Chỉnh sửa thêm bằng Kiểu dáng (Style):

• Nút mua hàng (Purchase button): Đổi màu, văn bản, khoảng cách cho nút mua hàng – nút khách nhấn để tiến hành thanh toán.
• Tóm tắt đơn hàng (Order summary): Chọn chữ in, khoảng cách danh sách sản phẩm.
• Chữ in (Typography): Tùy chỉnh tất cả văn bản trừ biểu mẫu.
• Biểu mẫu (Forms): Tùy chỉnh chữ in, màu biểu mẫu. Dùng cài đặt Khoảng cách hàng (Rows Gap) tăng khoảng cách.

4. Xem lại trang ở chế độ Mobile: Đảm bảo trang đẹp cả trên mobile.

Khuyến nghị khi chỉnh sửa trang checkout:

• Có đủ tùy chọn thanh toán
• Xóa trường không cần thiết
• Giữ tất cả thông tin checkout trên một trang

Cách xây dựng mẫu (Template) với Elementor

Với Elementor, tạo mẫu tùy chỉnh phù hợp thương hiệu. Tùy chỉnh header, footer để xuất hiện với thương hiệu trên mọi trang. Phần này tạo mẫu tùy chỉnh cho header. Cách làm:

1. Tạo Mẫu mới (Create New Template): Phần tử Global Header là thứ thấy trên mọi trang. Tạo mẫu: nhấn Elementor thanh bên > Theme Builder. Nhấn Thêm mẫu mới (Add New Template).
2. Chọn loại mẫu phù hợp: Tạo header, chọn Header trong menu thả xuống loại mẫu. Đặt tên có ý nghĩa để dễ nhận diện sau. Nhấn Tạo mẫu (Create Template).
3. Duyệt thư viện mẫu: Chọn từ các mẫu định sẵn trong thư viện > nhấn Chèn (Insert). Mọi mẫu đều tùy chỉnh hoàn toàn, chọn cái gần nhất với ý tưởng.
4. Chỉnh sửa và tùy chỉnh mẫu: Dùng trình soạn thảo tạo mẫu mơ ước. Thử màu, hình ảnh, font, v.v.
5. Xuất bản mẫu: Xong chỉnh sửa, nhấn Xuất bản (Publish) dưới thanh bên. Sẽ nhắc chọn nơi hiển thị mẫu. Chọn từ menu thả xuống > Lưu và Đóng (Save and Close). Quay lại trình soạn thảo, mẫu mới đã hoạt động.
6. Xem lại: Nhấn Xem ngay (Have a Look) trong cửa sổ bật lên dưới, dẫn đến trang xem trước. Thay đổi nếu muốn.

Cách xây dựng Popup thương mại điện tử với Elementor

Nếu muốn thêm popup, các bước:

1. Tạo mẫu popup: Nhấn Mẫu (Template) thanh bên > Popups > Thêm mới (Add New). Đặt tên mẫu > Tạo mẫu (Create Template).
2. Tạo popup: Tạo từ đầu hoặc chỉnh mẫu Elementor. Chọn màu, văn bản, v.v.
3. Xuất bản popup: Về cơ bản lưu popup làm mẫu để liên kết sau. Nhấn Xuất bản > Lưu và Đóng.
4. Chỉnh sửa trang: Nhấn Trang thanh bên > Tất cả trang. Chọn trang muốn thêm popup > Chỉnh sửa với Elementor.
5. Thêm nút bấm: Mở trình soạn thảo trang, kéo thả widget Nút từ thanh bên. Thêm văn bản, màu.
6. Liên kết đến popup: Thanh bên, dưới Layout, chọn Liên kết (Link), Động (Dynamic), Hành động (Actions) và Popup. Nhấn Mở Popup (Open Popup) > chọn popup đã tạo.
7. Xem lại: Kiểm tra hoạt động nút > nhấn Cập nhật (Update) khi sẵn sàng.

Elementor so với Elementor Pro: Khi nào nên chuyển?

Bản miễn phí Elementor có công cụ thiết kế trang cơ bản, tốt cho blog. Khi thiết kế trang WooCommerce, nên mua giấy phép Elementor Pro. Nhiều widget và phần tử thiết kế đặc biệt cho trải nghiệm WooCommerce tuyệt vời.

Danh sách widget tuyệt vời nhất nên thử:

1. Danh mục sản phẩm (Product Category): Giúp khách lọc sản phẩm theo danh mục. Dễ dàng tìm và mua hơn.
2. Thêm vào giỏ (Add to Cart): Dễ dàng tùy chỉnh nút theo thương hiệu. Đổi màu, viền, font, v.v.
3. Widget Upsell sản phẩm (Product Upsell widget): Giống phần "Sản phẩm liên quan" trên Amazon. Hiển thị sản phẩm khác khách có thể quan tâm dựa trên sản phẩm đang xem.
4. Thông báo giỏ hàng trống (Empty Cart Message): Thêm thông báo hấp dẫn khi khách thử checkout mà giỏ trống. Cách tốt kéo khách quay lại danh sách sản phẩm.
5. Đánh giá sản phẩm (Product Rating): Bằng chứng xã hội (social proof) là động lực mạnh, xây dựng niềm tin vào sản phẩm và trang. Có thể yêu cầu đánh giá từ khách cũ cho mục đích này.
6. Đánh giá sản phẩm (Product Review): Mang lại uy tín cho sản phẩm với khách mới.

Ưu và nhược điểm của Elementor

Elementor không phải trình xây dựng trang duy nhất, nhiều lập trình viên/nhà thiết kế có sở thích riêng. Chúng tôi thích Elementor vì phổ biến và dễ dùng, nhưng nhu cầu bạn có thể khác. Chúng tôi phân tích các cân nhắc chính chọn trình xây dựng trang thành danh sách ưu/nhược điểm. Nếu tính năng cần thiết nằm ở nhược điểm, hãy tìm trình xây dựng trang thay thế.

Ưu điểm

• Dễ sử dụng: Kéo thả siêu dễ. Tùy chỉnh trang thực sự mà không cần code hay plugin khác.
• Giá trị cho tiền: Có 24 phần tử WooCommerce riêng với bản Pro. Tất cả là khía cạnh chính của quy trình mua sắm, thiết kế cho trải nghiệm khách tốt hơn.
• Thiết kế Responsive tích hợp: Khác với Gutenberg (xem trước trên tab mới), Elementor "thấy gì là được đó". Đổi chế độ xem và tiếp tục chỉnh sửa.

Nhược điểm

• Chi phí: Bản miễn phí giúp tùy chỉnh trang cơ bản, "phép màu" ở bản Pro. 3 gói từ $49 đến $999/năm.
• Cập nhật lỗi và hỗ trợ không đủ: Quá khứ có vấn đề cập nhật lỗi, hỗ trợ rất ít cho chủ trang.
• Vấn đề với WooCommerce: Đôi khi Elementor ngừng hoạt động trên trang WooCommerce. Phần sau sẽ nói cách khắc phục.

Elementor không hoạt động với WooCommerce? Cách khắc phục

Đặc biệt phổ biến nếu cài WooCommerce sau khi đã cài Elementor. Vài điều thử để khắc phục:

• Cập nhật Elementor, WordPress, và phiên bản WooCommerce: Đảm bảo plugin và PHP đều cập nhật mới nhất. Có bài viết cập nhật plugin an toàn có thể hữu ích.
• Bật Chuyển đổi phương pháp tải trình soạn thảo (Switch Editor Loader Method): Nhấn Elementor thanh bên > Cài đặt (Settings). Chuyển tab Nâng cao (Advanced) > bật Switch Editor Loader Method bằng cách tích hộp.
• Xóa cache: Nếu có plugin cache, xóa cache xem có giúp không. Có thể tạm vô hiệu hóa plugin cache để bỏ qua vấn đề cache.
• Kiểm tra plugin khác can thiệp Elementor: Vô hiệu hóa tất cả plugin, xem có tải được Elementor không. Nếu được, kích hoạt lại từng plugin cho đến khi Elementor lỗi lại. Biết plugin nào gây vấn đề. Giữ vô hiệu hóa hoặc rollback về phiên bản cũ.

Plugin khuyên dùng cho trang WooCommerce

• BlogVault: Bảo vệ mọi đơn hàng, mua hàng, khách hàng, giao dịch trên cửa hàng WooCommerce với sao lưu thời gian thực BlogVault. Hoàn toàn tự động, sao lưu đồng bộ mỗi 5 phút, lưu trữ ngoại tuyến an toàn hơn.
• MalCare: Plugin bảo mật WordPress hàng đầu, bảo vệ trang khỏi hacker và mã độc. Quét và dọn mã độc vài cú nhấp, ngăn chặn mã độc xâm nhập với tường lửa tiên tiến. Bảo vệ thông tin khách hàng không bị hacker truy cập.
• Google Analytics: Công cụ phân tích gốc để phân tích traffic, hiểu khách hàng tốt hơn. Có bài tích hợp Google Analytics vào WooCommerce.
• YITH WooCommerce Order Tracking: Quản lý thông tin vận chuyển dễ dàng. Cho phép khách theo dõi đơn hàng.
• YITH Advanced Refund System for WooCommerce: Thiết lập hệ thống hoàn tiền.

Tóm lại

Nếu sẵn sàng đầu tư trình xây dựng trang, Elementor là lựa chọn tuyệt vời. Nhưng trước khi thay đổi, sao lưu trang với BlogVault. Cách tuyệt vời bảo vệ trang khỏi sự cố, đóng vai trò bảo hiểm nếu mọi thứ sai trơn.

Câu hỏi thường gặp

Elementor tốt đến đâu cho trang WooCommerce?

Elementor xuất sắc cho WooCommerce vì nhiều phần tử tùy chỉnh, đặc biệt cải thiện hành trình khách hàng. Với Elementor Pro, không cần plugin khác để xây dựng trang WooCommerce hiệu năng cao.

Elementor có phải trình xây dựng trang tốt nhất?

Elementor là một trong những plugin xây dựng trang tốt nhất, bên cạnh SeedProd, WPBakery. Dễ dùng, tùy chỉnh cao, hoàn toàn xứng đáng chi phí.

Add-on tốt nhất cho WooCommerce là gì?

Add-on thiết yếu: BlogVault (sao lưu), MalCare (bảo mật), YITH WooCommerce Order Tracking, YITH Advanced Refund System.

Làm sao thêm Elementor vào WooCommerce?

Cài Elementor từ thư mục plugin WordPress admin. Kích hoạt, thêm khóa cấp phép nếu dùng Pro. Sẵn sàng xây dựng trang mong muốn.

WooCommerce miễn phí với Elementor?

WooCommerce miễn phí. Elementor có bản miễn phí và trả phí. Tuy nhiên, cho WooCommerce, nên mua bản trả phí Elementor.

Có thể chỉnh sửa WooCommerce với Elementor?

Có, dễ dàng chỉnh trang WooCommerce với Elementor. Thực tế, mọi góc ngóc trang WooCommerce đều chỉnh được. Chỉ cần cài, kích hoạt, tùy chỉnh.

Elementor trong WooCommerce là gì?

Elementor là plugin xây dựng trang cho WordPress và WooCommerce. Cung cấp bản miễn phí và trả phí. Sau khi cài, có nhiều phần tử kéo, thả, tùy chỉnh.