WooCommerce and Elementor - Hướng dẫn cho người mới bắt đầu

Thực sự tùy chỉnh trang web WooCommerce của bạn chỉ với trình chỉnh sửa Gutenberg có thể khó khăn. Có rất ít phông chữ, số lượng vật dụng hạn chế và rất ít chỗ để chơi. Đây là nơi Elementor xuất hiện. Mỗi bit trên trang WooCommerce của bạn đều có thể được tùy chỉnh để mang lại cho khách hàng trải nghiệm mua sắm tốt nhất. Bạn đã biết rằng trải nghiệm mua sắm càng tốt thì chuyển đổi càng tốt. Bài viết này nói về cách sử dụng WooCommerce với Elementor .

TL; DR :Bài viết này là hướng dẫn cho người mới bắt đầu sử dụng Elementor với WooCommerce. Ngoài ra, chúng tôi khuyên bạn nên sao lưu trang web của mình bằng BlogVault. Các bản sao lưu theo thời gian thực của BlogVault được xây dựng cho các trang web WooCommerce, vì vậy bạn sẽ không bao giờ mất một đơn đặt hàng, giao dịch, khách hàng hoặc sản phẩm nào.

Thiết lập một cửa hàng WooCommerce lần đầu tiên có thể là một viễn cảnh khó khăn, nhưng nó thực sự khá dễ dàng. Cả WordPress và WooCommerce đều được thiết kế để làm cho các trang web có thể truy cập được cho người tạo nội dung, thay vì chỉ các nhà phát triển.

Elementor cũng có thể có vẻ bối rối khi bắt đầu, nhưng nó có tiềm năng rất lớn để mang lại je ne sais quoi nhất định đến cửa hàng của bạn.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thiết lập trang WooCommerce, cài đặt Elementor và các plugin khác mà bạn cần để quản lý một trang WooCommerce tuyệt vời. Chúng tôi cũng khuyên bạn nên sử dụng các plugin bổ sung này vì sau khi cửa hàng của bạn hoạt động, bạn sẽ cần một đội bảo trì để giữ cho bánh xe luôn được bôi trơn.

Hãy bắt đầu với những điều cơ bản. Làm cách nào để bạn tạo một trang WordPress? Nếu bạn đã thiết lập trang web WooCommerce của mình, bạn có thể chuyển sang phần tìm hiểu và khám phá Elementor.

Tạo trang WordPress

Có một số bước cốt lõi để tạo trang web trước khi tùy chỉnh nó: chọn máy chủ lưu trữ, tạo miền, cài đặt WordPress và thêm SSL (Lớp cổng bảo mật). Đây là một bài viết nói về cách thiết lập một trang web WordPress từ đầu. Nhưng đây là các bước ngắn gọn:

Chọn máy chủ: Dưới đây là một số điều cần xem xét khi chọn máy chủ:yêu cầu của bạn là gì, máy chủ có đủ hỗ trợ không và giá cả có phải chăng không? Có rất nhiều máy chủ để lựa chọn, vì vậy chúng tôi khuyên bạn nên dành thời gian để mua sắm xung quanh và tìm kiếm thứ gì đó phù hợp với nhu cầu và túi tiền của mình. Một lời cảnh báo ở đây:tùy chọn có giá thấp nhất hiếm khi là cách tốt nhất. Nếu bạn chỉ muốn tham gia, chúng tôi lưu trữ các trang web thử nghiệm của mình trên Cloudways. Việc xây dựng một trang WooCommerce trên Cloudways cực kỳ dễ dàng và đi kèm với WooCommerce đã được cài đặt. Đó là một nơi tốt để bắt đầu và bảng điều khiển lưu trữ có thông tin tuyệt vời về trang web của bạn, nếu bạn có khuynh hướng đó.

WooCommerce and Elementor - Hướng dẫn cho người mới bắt đầu

Đăng ký miền: Miền là tên của trang web của bạn. Trước khi bạn chọn một miền, hãy nghĩ về mục tiêu của trang web của bạn là gì. Bạn đang cố gắng bán gì? Người mua của bạn là ai? Với ý nghĩ đó, hãy nghĩ ra một tên miền dễ nhận dạng và dễ nhớ.
Cài đặt WordPress: Quá trình cài đặt WordPress sẽ hơi khác nhau giữa các máy chủ. Kiểm tra tài liệu của máy chủ lưu trữ hoặc liên hệ với bộ phận hỗ trợ của họ để được trợ giúp. Với Cloudways, bạn phải chọn WooCommerce khi tạo một ứng dụng mới. Với Hostinger, bạn sẽ phải chọn WordPress và nó sẽ tự động cài đặt WordPress.
Thêm SSL: Một lần nữa, điều này khác nhau giữa các máy chủ. Một số máy chủ cung cấp chứng chỉ SSL miễn phí với máy chủ lưu trữ của họ, trong khi với những máy khác, bạn sẽ cần sử dụng tổ chức phát hành chứng chỉ để thay thế. Với Cloudways, chứng chỉ bảo mật này được thêm tự động. Sau khi có chứng chỉ, bạn có thể thiết lập chứng chỉ rất dễ dàng với plugin Really Simple SSL.

Thiết lập trang WooCommerce

Bây giờ bạn đã có một trang web WordPress cơ bản, đã đến lúc cài đặt WooCommerce và thiết lập nó. WooCommerce cung cấp năng lượng cho cửa hàng của bạn, ngay từ việc liệt kê sản phẩm, đến quản lý khách hàng và tạo điều kiện thanh toán.

Trong phần này, chúng ta sẽ nói về những điều cơ bản của việc thiết lập WooCommerce và những điều bạn nên làm trước khi bắt đầu tinh chỉnh các trang với Elementor. Đây là những gì bạn nên làm:

Cài đặt WooCommerce: Nếu bạn đang sử dụng Cloudways để xây dựng trang web WooCommerce của mình, bạn có thể bỏ qua bước này. Nếu không, hãy di chuột qua các plugin và nhấp vào Thêm mới . Tìm kiếm plugin WooCommerce và nhấp vào Cài đặt và Kích hoạt.

Thiết lập WooCommerce bằng Trình hướng dẫn Thiết lập: Với Trình hướng dẫn thiết lập, bạn có thể thêm thông tin chi tiết về trang WooCommerce của mình như chi tiết cửa hàng cơ bản, tùy chọn thanh toán ưu tiên, chi tiết giao hàng và bất kỳ tiện ích bổ sung nào bạn cần. Đây là một bài viết có thể giúp bạn cung cấp thêm thông tin chi tiết. Chỉ cần nhấp vào WooCommerce trong thanh bên để bắt đầu.
Cài đặt Chủ đề Hello:Chủ đề Hello là một chủ đề đơn giản của Elementor và được thiết kế để bổ sung cho trình tạo trang. Bạn không phải thực hiện bước này nhưng nó chắc chắn giúp bạn nhận được giá trị tiền từ giấy phép Pro của mình. Bạn có thể cài đặt nó mà không cần cài đặt Elementor. Nhấp vào Giao diện trên thanh bên và Chủ đề của bạn. Nhấp vào Thêm mới, tìm kiếm Xin chào trong thanh tìm kiếm và nhấp vào Cài đặt và Kích hoạt .

Thiết lập cửa hàng của bạn: Thêm những thứ như sản phẩm, ảnh, mô tả, giá cả, danh mục, chính sách bảo mật, chính sách hoàn lại tiền, v.v. Điều này cung cấp cho bạn một khung để làm việc khi bạn bắt đầu chỉnh sửa với Elementor.

Bây giờ, bạn đã sẵn sàng để thêm các khoản thanh toán.

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

Để xây dựng một cửa hàng đầy đủ chức năng, mục tiếp theo trong danh sách kiểm tra của bạn là thêm phương thức thanh toán. Rốt cuộc, nếu khách hàng thích một trong những sản phẩm của bạn, bạn muốn được trả tiền phải không?

Có rất nhiều plugin và cổng thanh toán cho bạn lựa chọn. Mỗi loại trong số chúng khác nhau rất nhiều so với cái khác, vì vậy bạn sẽ cần phải thực hiện một số nghiên cứu để tìm ra loại nào phù hợp nhất cho cửa hàng của mình. Việc thêm phương thức thanh toán cũng sẽ mở ra các trang Giỏ hàng và Thanh toán trên trang web của bạn. Dưới đây là các bước để làm như vậy:

Chọn phương thức thanh toán: Bạn có thể chọn phương thức thanh toán tiền mặt khi nhận hàng hoặc sử dụng cổng thanh toán. Chọn cổng thanh toán tùy thuộc vào cách khách hàng muốn thanh toán, phí giao dịch và vị trí đặt cửa hàng của bạn.
Cài đặt cổng thanh toán:Khi bạn đã chọn tùy chọn ưa thích của mình, bạn sẽ phải cài đặt plugin và tích hợp tài khoản của mình vào WooCommerce. Chúng tôi có các bài viết về tích hợp WooCommerce với Stripe và PayPal, hai tùy chọn phổ biến bao gồm nhiều tùy chọn thanh toán và khu vực địa lý.

Kiểm tra phương thức thanh toán: Xem qua quy trình mua hàng và xem trải nghiệm như thế nào đối với khách hàng mua sản phẩm của bạn. Điều này cũng cung cấp cho bạn ý tưởng về các trang sản phẩm, giỏ hàng và thanh toán mặc định trông như thế nào. Nhiều plugin thanh toán sẽ có tính năng thử nghiệm hoặc hộp cát để cho phép bạn sao chép quy trình.

Cài đặt Elementor trên trang WooCommerce của bạn

Chúng tôi khuyên bạn nên đầu tư vào phiên bản Pro vì một loạt các tiện ích WooCommerce tuyệt vời sẽ có sẵn cho bạn. Dưới đây là các bước cho điều đó:

Cài đặt và Kích hoạt Elementor: Quay lại trang tổng quan WordPress của bạn, nhấp vào Plugin và sau đó Thêm mới. Tìm kiếm Elementor trong thanh tìm kiếm. Nhấp vào Cài đặt khi bạn tìm thấy plugin phù hợp và nhấp vào Kích hoạt khi bạn làm xong.

Tạo tài khoản: Bạn sẽ được chuyển hướng đến một trang nơi bạn sẽ được yêu cầu tạo tài khoản và chọn một gói. Có 3 giấy phép để lựa chọn và một phiên bản miễn phí. Chúng tôi sẽ cho bạn biết sự khác biệt là gì trong phần sau. Sau khi hoàn tất, hãy quay lại trang tổng quan WP.

Hiểu Trình chỉnh sửa Trang Elementor

Elementor là một công cụ thiết kế mạnh mẽ, cho phép bạn tạo các trang tùy chỉnh cho cửa hàng của mình với giao diện kéo và thả dễ dàng. Thoạt nhìn có thể khiến bạn bối rối nhưng đừng lo lắng, tất cả chỉ cần một chút tinh chỉnh để làm quen với nó. Miễn là bạn có bản sao lưu, tham gia ngay là cách tốt nhất để học theo cách của bạn thông qua Elementor.

Với ý nghĩ đó, phần này sẽ giúp bạn tự làm quen với bố cục của trình chỉnh sửa trang.

Mở một trang để chỉnh sửa: Di chuột qua các Trang trên menu bên của bạn và nhấp vào Tất cả các trang . Di chuột qua bất kỳ trang nào và nhấp vào Chỉnh sửa. Khi trình chỉnh sửa trang mở ra, hãy nhấp vào Chỉnh sửa bằng Elementor . Điều này sẽ dẫn bạn đến trình chỉnh sửa trang Elementor.

Dưới đây là hình ảnh của nó trông như thế nào:

Có một loạt các trang quan trọng trên cửa hàng của bạn đóng góp trực tiếp vào trải nghiệm mua sắm của khách hàng. Điều quan trọng cần lưu ý là một số trang sẽ có mã ngắn trông như sau:

woocommerce_checkout

Cái này quan trọng. Không xóa trừ khi bạn đang sử dụng các tiện ích WooCommerce của Elementor Pro. Tuy nhiên, bạn có thể đặt hình ảnh hoặc văn bản trước hoặc sau mã ngắn này.

Bây giờ, hãy nói về cách chỉnh sửa trang.

Thêm phần: Nếu bạn di chuột qua các phần khác nhau của trang, bạn sẽ nhận thấy rằng một hộp màu xanh lam sẽ xuất hiện. Điều này biểu thị một phần của trang. Nhấp vào biểu tượng 6 chấm ở giữa phần để chỉnh sửa. Nhấp vào + trong hộp đường chấm chấm. Điều này sẽ tạo ra một phần mới.
Chọn Cột: Mỗi phần được chia thành các cột. Di chuột qua một phần và các khối nội dung khác nhau sẽ được đánh dấu bằng hộp màu xanh lam. Các cột chứa các phần tử riêng lẻ có thể được tùy chỉnh riêng. Bạn có thể chọn bố cục của các cột bạn muốn. Bây giờ bạn đã sẵn sàng để kéo và thả các phần tử mới.
Thêm phần tử: Ở bên trái, bạn sẽ thấy thư viện các phần tử. Chúng được sắp xếp theo danh mục, như Trang web và WooCommerce. Kéo và thả một phần tử vào một cột. Bạn có thể chỉnh sửa phần tử này trong thanh bên. Nhấp vào bút màu xanh lam xuất hiện ở trên cùng bên phải của cột và thanh bên thay đổi để hiển thị các tùy chỉnh khác nhau (tùy thuộc vào phần tử trong cột đó). Ví dụ:nếu bạn đang chỉnh sửa văn bản, bạn sẽ thấy trình chỉnh sửa văn bản ở bên trái.
Xem trước các thay đổi của bạn: Bạn có thể xem trước những thay đổi bạn đã thực hiện đối với trang web của mình bằng cách nhấp vào nút hình con mắt ở cuối thanh bên.
Kiểm tra trang web ở chế độ đáp ứng: Nhấp vào biểu trưng Chế độ đáp ứng ở dưới cùng và bạn có thể xem trước trang ở các chế độ xem khác nhau để xem trang trông như thế nào trên thiết bị di động, máy tính để bàn và các kích thước màn hình khác.
Xuất bản / Cập nhật trang web của bạn: Sau khi hoàn tất, bạn có thể lưu bản nháp, cập nhật hoặc xuất bản trang của mình bằng cách nhấp vào nút ở dưới cùng bên trái.

Bây giờ bạn đã hiểu bố cục của trình chỉnh sửa trang của mình, đây là giải thích về một số tiện ích cơ bản.

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

Kéo và thả phần tử Dòng tiêu đề hoặc Trình chỉnh sửa Văn bản: Thêm một phần và chọn số cột. Sau đó, kéo và thả phần tử Headline hoặc Text Editor từ thanh bên. “ Thêm văn bản vào đây” sẽ được thêm vào trang.

Điền đúng văn bản: Chọn tất cả văn bản và thay thế nó bằng bản sao mong muốn của bạn.
Tùy chỉnh văn bản: Chọn văn bản và nhấp vào Kiểu trong thanh bên. Thay đổi màu bằng cách chọn từ thanh màu. Ngoài ra, bạn có thể thay đổi phông chữ bằng cách nhấp vào bút chì bên cạnh Kiểu chữ. Bạn cũng có thể thay đổi kiểu nét và thêm bóng hoặc thay đổi căn chỉnh của trình soạn thảo văn bản.

Thêm hình ảnh

Kéo và thả phần tử Hình ảnh: Thêm một phần nếu bạn cần và chọn số cột. Sau đó, kéo và thả phần tử Hình ảnh.
Thêm hình ảnh: Nhấp vào biểu tượng bút chì ở góc trên cùng bên phải của hình ảnh. Trong thanh bên, di chuột qua hình ảnh và chọn Chọn hình ảnh . Thay thế hình ảnh mặc định bằng hình ảnh của bạn.

Chỉnh sửa hình ảnh: Bạn có thể thay đổi kích thước hoặc căn chỉnh, thêm chú thích hoặc liên kết nó với tệp phương tiện hoặc URL.

Thêm nút

Kéo và thả phần tử Nút: Khi bạn có một cột, hãy kéo và thả một phần tử nút.
Nút tùy chỉnh: Bạn có thể thay đổi loại nút, văn bản trên nút, căn lề, màu sắc hoặc kích thước. Thêm một liên kết hoặc hành động.

Với những điều cơ bản đang được thực hiện, đây là một mẹo sẽ giúp giảm bớt rất nhiều công việc:

Tạo Cài đặt Trang web

Bạn có thể tạo chủ đề màu, đặt phông chữ chung và đặt mẫu cho những thứ như đầu trang, chân trang và các nút. Nhấp vào biểu tượng bánh hamburger ở góc trên cùng bên trái của trình chỉnh sửa trang của bạn và nhấp vào Cài đặt trang. Khi bạn đã tìm ra thiết kế cho trang web của mình, tính năng này sẽ giúp bạn tiết kiệm rất nhiều thời gian khi tập hợp các trang mới trong tương lai.

Đây là những điều cơ bản. Khi bạn đã quen với các điều khiển của Elementor, bạn có thể sử dụng tốt sức mạnh mới tìm thấy này.

Cách sử dụng WooCommerce với Elementor Pro

Nếu bạn sẵn sàng tạo các trang của trang WooCommerce với giấy phép Elementor Pro, phần này sẽ cho bạn biết những tiện ích con nào cần sử dụng cho các trang cụ thể.

Cách chỉnh sửa trang sản phẩm WooCommerce bằng Elementor

Đây là trang mà khách hàng của bạn có thể tìm hiểu thêm về sản phẩm. Dưới đây là các bước để chỉnh sửa một trang sản phẩm:

Chỉnh sửa Trang Sản phẩm: Bạn có thể chỉnh sửa các mẫu hiện có bằng Elementor hoặc tạo một mẫu từ đầu. Sẽ dễ dàng hơn để chỉnh sửa một mẫu nếu bạn không biết các widget cụ thể sẽ đi đâu. Bạn chỉ có thể chỉnh sửa các widget hiện có.
Tùy chỉnh với các tiện ích con: Nếu bạn muốn bắt đầu lại từ đầu, đây là những tiện ích bạn có thể thêm:

Tên sản phẩm: Đây là tiện ích bao gồm tiêu đề sản phẩm của bạn. Nó có thể được chỉnh sửa trong thanh bên.
Hình ảnh sản phẩm: Bạn có thể chỉnh sửa kích thước của hình ảnh trong thanh bên. Chỉ cần chọn hình ảnh và khám phá cài đặt ở bên phải.
Xếp hạng Sản phẩm: Đây có thể là một tiện ích rất hữu ích cho khách hàng của bạn. Nó mang lại cho họ cơ hội để thấy ấn tượng của người khác về sản phẩm của bạn.
Mô tả ngắn gọn: Đây là một tiện ích bổ sung mô tả của bạn như bạn đã đưa vào khi thêm mô tả sản phẩm.
Giá sản phẩm: Thêm tiện ích này để thêm giá. Giá được thêm vào một sản phẩm cụ thể khi bạn thêm sản phẩm vào trang WooCommerce của mình. Vì vậy, văn bản này ở đây được điền tự động.
Thêm vào giỏ hàng:Đây là nút để thêm sản phẩm vào giỏ hàng. YOu có thể thay đổi màu sắc, văn bản hoặc kích thước trong thanh bên.
Woo Breadcrumbs:Breadcrumbs là một tính năng để hiển thị danh mục sản phẩm. Ví dụ:nếu bạn đang mua một đôi giày nam màu đen từ một trang web thời trang, đường dẫn có thể là Trang chủ / Thời trang nam / Giày / Giày da đen.
Liên quan đến sản phẩm: Đây là phần "Sản phẩm liên quan" mà bạn thường thấy trên các trang thương mại điện tử. Bạn có thể thêm nó bằng cách kéo và thả widget Liên quan đến Sản phẩm.
Tiện ích con bán thêm: Tiện ích này hỗ trợ phần “Bạn cũng có thể thích” trên trang sản phẩm của bạn.

Mỗi widget này có thể được tùy chỉnh về phông chữ, màu sắc, căn chỉnh, vị trí và hơn thế nữa.

Xem lại các thay đổi: Nhấp vào chế độ đáp ứng và kiểm tra giao diện của trang trên các thiết bị khác nhau.
Xuất bản hoặc cập nhật: Nếu mọi thứ đều tốt, bạn có thể xuất bản hoặc cập nhật trang.

Đề xuất khi chỉnh sửa các trang sản phẩm của bạn:

Thêm hình ảnh chất lượng cao cho sản phẩm
Viết mô tả sản phẩm tuyệt vời
Chọn tên mô tả và có ý nghĩa cho sản phẩm

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

Còn được gọi là trang lưu trữ, đây là nơi khách hàng của bạn có thể xem tất cả các sản phẩm của bạn. Mục tiêu của trang này là tạo ra một trang mà khách hàng của bạn có thể dễ dàng tìm thấy những gì họ muốn.

Chỉnh sửa mẫu hoặc tạo một trang mới: Trong phần sau, chúng ta sẽ nói về việc tạo một mẫu mới. Bạn cũng có thể chỉ sử dụng một mẫu hiện có hoặc bắt đầu lại từ đầu. Nếu bạn muốn tạo từ đầu, hãy di chuột qua Trang và nhấp vào Thêm mới . Sau đó, bạn có thể thêm các tiện ích sau:
Thêm Tiện ích con để tùy chỉnh: Chúng tôi đã liệt kê các tiện ích mà chúng tôi khuyên bạn nên thêm vào để có trải nghiệm mua sắm tuyệt vời:

Danh mục Sản phẩm: Điều này sẽ giúp khách hàng của bạn lọc sản phẩm thông qua các danh mục.
Giỏ hàng: Điều này sẽ thêm biểu tượng giỏ hàng vào menu của bạn, nơi khách hàng của bạn có thể thấy tất cả những gì họ đã thêm vào giỏ hàng của mình.
Sản phẩm: Điều này sẽ hiển thị tất cả các sản phẩm bạn đã thêm vào cửa hàng của mình.
Lưu trữ Sản phẩm: Điều này mang lại cho khách hàng cơ hội để sắp xếp theo mặc định, mức độ phổ biến, mới nhất hoặc giá cả.
Thêm tùy chỉnh vào giỏ hàng: Bạn có thể tùy chỉnh nút thêm vào giỏ hàng. Thay đổi văn bản, màu sắc hoặc kích thước.
WooCommerce Breadcrumbs:Phần này hiển thị tất cả các danh mục và vị trí trong kho lưu trữ mà một sản phẩm cụ thể phù hợp. Nó giống như một đường dẫn từ trang chủ đến trang mà khách hàng của bạn hiện đang truy cập.
Lưu trữ mô tả quảng cáo tiêu đề: Bạn có thể thêm tiêu đề và mô tả và chỉnh sửa nó bằng cách thay đổi cài đặt trong thanh bên.

Xem lại trang: Sau khi bạn đã chỉnh sửa những gì bạn muốn, hãy xem lại giao diện của trang trên các thiết bị khác nhau. Khi bạn hài lòng, hãy nhấp vào Xuất bản .

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

Tầm quan trọng chỉ đứng sau trang thanh toán, một trang giỏ hàng được thiết kế tốt có thể tạo ra hoặc phá vỡ doanh số bán hàng của bạn. Khi thiết kế trang này, chúng tôi khuyên bạn nên thực hiện nhiều nghiên cứu để tìm ra những gì khách hàng của bạn cần xem khi xem xét các lựa chọn của họ trước khi thanh toán. Kiểm tra các trang web thương mại điện tử phổ biến và chỉnh sửa thiết kế khi bạn tiếp tục.

Bạn có thể sử dụng tiện ích Giỏ hàng để tùy chỉnh hoàn toàn trang giỏ hàng. Dưới đây là các bước để làm như vậy:

Chỉnh sửa trang giỏ hàng hiện có: Bạn có thể chỉnh sửa trang hiện có bằng cách di chuột qua các trang và nhấp vào Tất cả các trang . Sau đó, nhấp vào Chỉnh sửa khi bạn di chuột qua trang Giỏ hàng. Sau đó, nhấp vào Chỉnh sửa bằng Elementor.
Thay thế mã ngắn bằng một tiện ích con: Mã ngắn là một đoạn mã bổ sung một tính năng cho một trang. Với tiện ích Giỏ hàng, bạn không cần nó, vì vậy hãy xóa mã ngắn và thay thế nó bằng tiện ích từ thanh bên.
Tùy chỉnh trang: Kiểm tra thanh bên và khám phá cài đặt. Bạn có thể thử những cách sau:

Chung: Chọn số lượng cột trong mỗi phần và tạo sự cố định cho các cột nhất định bằng cách chuyển đổi nó trong thanh bên.
Tóm tắt Đơn hàng: Thay đổi nút Cập nhật giỏ hàng nếu bạn muốn.
Tổng số: Bạn có thể tùy chỉnh nhãn, căn chỉnh và hơn thế nữa cho phần tổng giỏ hàng, bao gồm cả Tiến hành thanh toán nút.
Tùy chọn Bổ sung: Cho phép bạn chuyển đổi khả năng tự động cập nhật giỏ hàng.

Nếu bạn nhấp vào Kiểu trong thanh bên, đây là những thứ bạn có thể tùy chỉnh:

Phần: Kiểm soát phong cách của các phần khác nhau - như thêm bóng đổ hoặc màu nền.
Kiểu chữ: Tất cả văn bản có thể được thay đổi để phù hợp với tính thẩm mỹ của trang web của bạn.
Các nút: Thay đổi màu sắc, văn bản, kích thước và hơn thế nữa.
Tóm tắt Đơn hàng: Tùy chỉnh giao diện của tóm tắt đơn hàng.
Tổng số: Chỉnh sửa phần Tổng số giỏ hàng.
Nút Thanh toán: Bạn có thể tùy chỉnh màu sắc, kích thước, văn bản và căn chỉnh của nút thanh toán.

Xem lại ở chế độ xem Điện thoại di động: Sau khi bạn hoàn tất, hãy xem lại trang trong chế độ xem Di động. Nếu bạn hài lòng với giao diện của mọi thứ, hãy nhấp vào Xuất bản .

Cách chỉnh sửa trang thanh toán WooCommerce bằng Elementor

Đúng, đây là trang quan trọng nhất trên trang web thương mại điện tử của bạn. Đây là trang cuối cùng mà khách hàng của bạn nhìn thấy và là nơi họ đưa ra quyết định mua hàng. Các trang thanh toán có tỷ lệ rớt mạng cao nhất và do đó bạn cần đảm bảo rằng trang đó càng ít ma sát càng tốt.

Elementor Pro có tiện ích Checkout giúp chỉnh sửa trang thanh toán rất dễ dàng. Nó hoạt động cùng với các tiện ích Giỏ hàng và Tài khoản của tôi, cho phép bạn chỉnh sửa trang thanh toán hiện có. Với tiện ích này, bạn có thể thực hiện các thay đổi thiết kế cho trang thanh toán của mình như màu văn bản, căn chỉnh, các phần, v.v.

Mở trang thanh toán bằng trình chỉnh sửa Elementor: Di chuột qua Trang và nhấp vào Tất cả các trang . Di chuột qua Trang thanh toán và nhấp vào Chỉnh sửa. Ở trên cùng, nhấp vào Chỉnh sửa bằng Elementor . Chờ một chút và thao tác này sẽ mở trang trong trình chỉnh sửa Elementor.
Thay thế mã ngắn Checkout bằng Tiện ích con Checkout: Mã ngắn là cách WooCommerce đưa các trường Checkout vào trang của bạn. Nó trông như thế này:

woocommerce_checkout

Thay vào đó, hãy thêm tiện ích thanh toán từ thư viện ở bên trái. Điều này sẽ cung cấp cho bạn bản xem trước của trang thanh toán trông như thế nào.

Lưu ý:Vì bạn đang chỉnh sửa tại trang thanh toán, thêm một vài sản phẩm vào giỏ hàng của mình và nhấp vào nút để thanh toán. Điều này sẽ cho bạn biết trang trông như thế nào với các sản phẩm trong đó để có trải nghiệm tốt hơn.

Tùy chỉnh trang: Bạn có thể khám phá nhiều cài đặt của Tiện ích kiểm tra phần tử trong thanh bên. Dưới đây là một số cài đặt bạn có thể thay đổi:

Chung: Bạn có thể chọn một hoặc hai bố cục cột, tạo sự cố định cho một cột và thêm phần bù để tiêu đề không làm gián đoạn cột.
Thay đổi hình thức thanh toán hoặc giao hàng: Bạn có thể chỉnh sửa tiêu đề cho từng biểu mẫu này, từng trình giữ chỗ và từng trường.
Thông tin bổ sung: Đây là phần mà khách hàng của bạn có thể thêm hướng dẫn hoặc thông tin về đơn đặt hàng.
Cài đặt phiếu thưởng: Tùy chỉnh căn chỉnh và kiểu chữ của phiếu giảm giá của bạn.
Thanh toán: Bạn có thể tùy chỉnh tất cả các khía cạnh của nút thanh toán; căn chỉnh và màu sắc chẳng hạn.

Bạn có thể chỉnh sửa nhiều thứ hơn bằng cách nhấp vào Kiểu :

Nút mua: Bạn có thể thay đổi màu sắc, văn bản, khoảng cách, v.v. cho nút mua. Đây là nút mà khách hàng của bạn sẽ nhấp để tiếp tục thanh toán cho giỏ hàng của họ.
Tóm tắt đơn hàng: Bạn có thể chọn kiểu chữ và khoảng cách của danh sách các sản phẩm được đặt hàng.
Kiểu chữ: Bạn có thể tùy chỉnh tất cả văn bản ngoại trừ biểu mẫu.
Biểu mẫu: Tùy chỉnh kiểu chữ và màu sắc của biểu mẫu của bạn. Sử dụng Khoảng cách hàng cài đặt để tăng khoảng cách.

Xem lại trang trong Chế độ xem trên điện thoại di động: Đảm bảo trang web trông đẹp ngay cả khi ở chế độ xem trên thiết bị di động.

Đề xuất khi chỉnh sửa trang thanh toán của bạn:

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

Cách tạo mẫu với Elementor

Với Elementor, bạn có thể tạo các mẫu tùy chỉnh phù hợp với thương hiệu của mình. Ví dụ:bạn có thể tùy chỉnh đầu trang và chân trang để chúng xuất hiện cùng với thương hiệu trang web của bạn trên mọi trang. Trong phần này, chúng tôi sẽ tạo một mẫu tùy chỉnh cho tiêu đề. Đây là cách bạn làm điều đó.

Tạo Mẫu Mới: Phần tử Global Header là những gì bạn thấy trên mỗi trang của trang web của mình. Để tạo mẫu, hãy nhấp vào Phần tử trong thanh bên, sau đó nhấp vào Trình tạo chủ đề . Bây giờ, hãy nhấp vào Thêm mẫu mới .
Chọn loại mẫu phù hợp: Nếu bạn đang tạo tiêu đề, hãy chọn Tiêu đề trong menu thả xuống cho loại mẫu. Chọn một cái tên có ý nghĩa cho mẫu này để bạn có thể dễ dàng xác định sau này. Sau đó, nhấp vào Tạo mẫu.
Duyệt qua thư viện mẫu: Bây giờ, bạn có thể chọn từ các mẫu được xác định trước trong thư viện và nhấp vào Chèn . Mọi mẫu đều có thể tùy chỉnh hoàn toàn, vì vậy hãy chọn mẫu gần nhất với những gì bạn đang tìm kiếm.
Chỉnh sửa và tùy chỉnh mẫu: Sử dụng trình chỉnh sửa để tạo mẫu mơ ước của bạn. Chơi xung quanh với màu sắc, hình ảnh, phông chữ, v.v.
Xuất bản mẫu: Sau khi bạn chỉnh sửa xong mẫu, hãy nhấp vào Xuất bản ở cuối thanh bên và bạn sẽ được nhắc chọn nơi bạn muốn hiển thị mẫu. Chọn những gì bạn muốn từ menu thả xuống. Nhấp vào Lưu và đóng . Bạn sẽ được chuyển hướng quay lại trình chỉnh sửa nhưng mẫu mới của bạn sẽ hoạt động.
Đánh giá: Nhấp vào Xem qua trong cửa sổ bật lên ở dưới cùng và điều này sẽ dẫn bạn đến trang xem trước. Thực hiện các thay đổi như bạn muốn.

Cách tạo cửa sổ bật lên Thương mại điện tử với Elementor

Nếu bạn đang muốn thêm một cửa sổ bật lên, hãy làm theo các bước sau:

Tạo mẫu cửa sổ bật lên :Nhấp vào Mẫu trong thanh bên và nhấp vào Cửa sổ bật lên và Thêm mới . Đặt tên cho mẫu của bạn và nhấp vào Tạo mẫu .
Tạo cửa sổ bật lên: Bạn có thể tạo từ đầu hoặc chỉnh sửa mẫu Elementor. Bạn có thể chọn màu sắc, văn bản, v.v.
Xuất bản cửa sổ bật lên: Về cơ bản, điều này sẽ lưu cửa sổ bật lên của bạn dưới dạng một mẫu mà bạn có thể liên kết sau này. Nhấp vào Xuất bản và Lưu và Đóng .
Chỉnh sửa trang: Nhấp vào Trang trong thanh bên và Tất cả các trang . Chọn trang bạn muốn thêm cửa sổ bật lên và nhấp vào Chỉnh sửa với Elementor .
Thêm nút: Khi trình chỉnh sửa trang mở ra, hãy kéo và thả tiện ích Nút từ thanh bên. Thêm văn bản bạn muốn và đặt nó bằng bất kỳ màu nào bạn muốn.
Liên kết đến cửa sổ bật lên: Trong thanh bên, bên dưới Bố cục, chọn Liên kết, Động, Tác vụ và Cửa sổ bật lên . Sau đó, nhấp vào Mở cửa sổ bật lên và chọn cửa sổ bật lên bạn đã tạo.
Đánh giá: Xem lại hoạt động của nút và nhấp vào Cập nhật khi bạn sẵn sàng.

Elementor so với Elementor Pro:Khi nào thì thực hiện chuyển đổi?

Phiên bản miễn phí của Elementor được cung cấp các công cụ để thiết kế các trang cơ bản và rất phù hợp cho các blog. Khi thiết kế một trang WooCommerce, bạn nên mua giấy phép cho Elementor Pro. Họ có rất nhiều tiện ích và yếu tố được thiết kế đặc biệt cho trải nghiệm WooCommerce tuyệt vời.

Dưới đây là danh sách một số tiện ích tuyệt vời mà bạn chắc chắn nên thử:

Danh mục Sản phẩm: Điều này giúp khách hàng của bạn phân loại sản phẩm theo danh mục. Điều này giúp họ tìm và mua thứ gì đó dễ dàng hơn rất nhiều.
Thêm vào giỏ hàng: Thật dễ dàng để tùy chỉnh nút cho thương hiệu của bạn. Bạn có thể thay đổi màu sắc, đường viền, phông chữ, v.v.
Tiện ích con Bán thêm Sản phẩm: Bạn đã bao giờ xem phần Sản phẩm liên quan trên Amazon chưa? Đây là điều tương tự. Bạn đang hiển thị cho khách hàng của mình các sản phẩm khác mà họ có thể quan tâm dựa trên sản phẩm hiện tại mà họ đang xem.
Thông báo Giỏ hàng trống :Thêm thông điệp hấp dẫn để khách hàng biết rằng giỏ hàng của họ đang trống nếu họ cố gắng thanh toán. Đây là một cách tốt để khiến họ quay trở lại danh sách sản phẩm của bạn để có cái nhìn khác.
Xếp hạng Sản phẩm: Bằng chứng xã hội là một động lực mạnh mẽ và nó xây dựng niềm tin vào sản phẩm của bạn và trên trang web của bạn. Bạn cũng có thể muốn yêu cầu đánh giá từ những khách hàng trước đây vì lý do cụ thể này.
Đánh giá Sản phẩm: Điều này mang lại uy tín cho sản phẩm của bạn đối với những khách hàng mới.

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

Elementor không phải là trình tạo trang duy nhất hiện có và nhiều nhà phát triển hoặc nhà thiết kế chắc chắn sẽ có sở thích. Chúng tôi thích Elementor vì nó phổ biến và dễ sử dụng, nhưng nhu cầu của bạn cũng có thể khác. Chúng tôi đã chia nhỏ những cân nhắc chính khi chọn trình tạo trang thành danh sách ưu và nhược điểm sau đây. Nếu một tính năng cần thiết nằm trong danh sách khuyết điểm, bạn có thể muốn tìm một trình tạo trang thay thế.

Ưu điểm

Tính dễ sử dụng: Chức năng kéo và thả siêu dễ dàng. Bạn thực sự có thể tùy chỉnh trang của mình mà không cần mã hóa hoặc sử dụng bất kỳ plugin nào khác.
Đáng giá tiền: Có 24 phần tử dành riêng cho WooCommerce có sẵn với phiên bản Pro. Chúng là tất cả các khía cạnh chính của quá trình mua sắm và được thiết kế để tạo ra trải nghiệm tốt hơn cho khách hàng của bạn.
Thiết kế đáp ứng tích hợp: Không giống như Gutenberg, nơi bạn phải xem trước các thay đổi của mình trên một tab mới, với Elementor những gì bạn thấy là những gì bạn nhận được. Bạn có thể thay đổi chế độ xem và tiếp tục chỉnh sửa.

Nhược điểm

Chi phí: Mặc dù phiên bản miễn phí giúp tùy chỉnh một trang web cơ bản, nhưng điều kỳ diệu thực sự xảy ra với phiên bản Pro. Có ba gói có thể dao động từ $ 49 đến $ 999 một năm.
Cập nhật không ổn định và không đủ hỗ trợ: Trước đây, họ đã từng gặp vấn đề với các bản cập nhật trục trặc và rất ít hỗ trợ để giúp chủ sở hữu trang web giải quyết vấn đề.
Vấn đề với WooCommerce: Đôi khi, Elementor ngừng hoạt động trên trang WooCommerce. Chúng ta có một phần ở phần sau, nơi chúng ta sẽ nói về cách khắc phục điều đó.

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

Điều này đặc biệt phổ biến nếu bạn đang cài đặt WooCommerce sau khi đã cài đặt Elementor. Dưới đây là một số cách bạn có thể thử để khắc phục sự cố:

Cập nhật Elementor, WordPress của bạn, và phiên bản WooCommerce :Make sure your plugins and PHP are all up to date. We have an article on updating plugins safely that you might find helpful.
Enable Switch Editor Loader Method: Click Elementor in the sidebar and click Settings . Then, head over to the Advanced tab and enable Switch Editor Loader Method by clicking the check box.
Clear your cache: If you have a cache plugin, clear your cache and see if that helps. You can also temporarily disable the caching plugin and this will enable you to bypass any caching issues.
Check if any other plugins are interfering with Elementor functioning: To do so, deactivate all plugins and check to see if you’re able to load Elementor. If so, reactivate all the plugins and keep deactivating them one by one till it works again. Then you know which plugin is the problem. You can either keep the plugin deactivated or roll it back to an older version.

Recommended plugins for WooCommerce sites

BlogVault: Safeguard every order, purchase, customer, and transaction on your WooCommerce store with BlogVault’s real-time backups. Completely automated, BlogVault’s real-time backups sync to your store every 5 minutes, and are stored offsite for even greater safety.
MalCare :This best-in-class WordPress security plugin is all you need to protect your site from hackers and their malware. Easily scan and clean malware in just a few clicks, and prevent malware from entering your site with an advanced firewallProtect your customer details from ever being accessed by hackers with MalCare.
Google Analytics:The OG analytics tool to analyze your traffic and understand your customers better. We have an article on integrating Google Analytics into your WooCommerce site.
YITH WooCommerce Order Tracking: This plugin helps manage shipping information easily. It allows your customers to track their purchases.
YITH Advanced Refund System for WooCommerce: This plugin helps you set up a refund system.

Final thoughts

If you’re ready to invest in a page builder, Elementor can be a great option. But, before you make those changes, backup your site with BlogVault. It’s a great way to protect your site from mishaps and serves as insurance in case something goes terribly wrong.

FAQ

How good is Elementor for a WooCommerce site?

Elementor is excellent for a WooCommerce site because it has so many elements that you can customize, specifically for making your customer’s journey better. With the Pro version of Elementor, you won’t need other plugins to build a high-functioning WooCommerce site.

Is Elementor the best page builder?

Elementor is one of the best page builder plugins, amidst others like SeedProd and WPBakery. It’s easy, highly customizable and totally worth the cost.

What are the best add-Ons for WooCommerce?

Some essential add-ons for WooCommerce sites are BlogVault for backups, MalCare for security, YITH WooCommerce Order Tracking, and YITH Advanced Refund System for WooCommerce.

How do I add Elementor to WooCommerce?

You can install Elementor from your WordPress admin’s plugin directory. Next, activate it and add your license key if you’re using the Pro version. You’re now ready to build the site you want.

Is WooCommerce free with Elementor?

WooCommerce is free. Elementor has both a free and paid version. Though, for WooCommerce, you’re better off buying the paid version of Elementor.

Can I edit WooCommerce with Elementor?

Yes, you can edit a WooCommerce site easily with Elementor. In fact, every inch of your WooCommerce site can be edited with Elementor. Just install, activate, and get customizing.

What is Elementor in WooCommerce?

Elementor is a page builder plugin for WordPress and WooCommerce sites. They offer free and paid versions of the plugin. Once you install it, you have a wide range of elements to drag, drop, and customize.