Elementor và WooCommerce cùng nhau tạo thành một trong những sự kết hợp linh hoạt nhất để xây dựng các cửa hàng trực tuyến tùy chỉnh trên WordPress. Trong khi WooCommerce xử lý các chức năng thương mại điện tử (sản phẩm, giỏ hàng, thanh toán), Elementor cung cấp cho bạn quyền kiểm soát trực quan về cách các trang cửa hàng đó trông như thế nào và hoạt động ra sao. Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn cách xây dựng các trang WooCommerce chính với Elementor, bao gồm các trang sản phẩm, lưu trữ cửa hàng và trải nghiệm giỏ hàng.
Hướng dẫn này giả định rằng bạn đã cài đặt WordPress, WooCommerce và Elementor Pro. Elementor Pro là cần thiết cho các widget WooCommerce - phiên bản miễn phí của Elementor không bao gồm chúng.
Những Gì Bạn Cần Trước Khi Bắt Đầu
| Yêu cầu | Tại sao nó cần thiết | Nơi lấy |
|---|---|---|
| WordPress 6.x+ | Nền tảng CMS chính | wordpress.org |
| WooCommerce (miễn phí) | Chức năng thương mại điện tử | Thư viện plugin WordPress |
| Elementor Pro | Các widget WooCommerce và Theme Builder | PluginTheme.net |
| Giao diện tương thích | Nền tảng cho cửa hàng của bạn | Hướng dẫn chọn giao diện |
| Sản phẩm mẫu | Nội dung để thiết kế mẫu | WooCommerce → Công cụ → Nhập dữ liệu mẫu |
Hiểu Về WooCommerce Builder Của Elementor
Elementor Pro bao gồm một WooCommerce Builder chuyên dụng trong hệ thống Theme Builder của nó. Điều này cho phép bạn tạo các mẫu tùy chỉnh cho:
- Trang Sản Phẩm Đơn: Kiểm soát bố cục của các trang sản phẩm riêng lẻ
- Lưu Trữ Sản Phẩm: Tùy chỉnh trang cửa hàng và các trang danh mục
- Trang Giỏ Hàng: Thiết kế bố cục giỏ hàng tùy chỉnh
- Trang Thanh Toán: Tùy chỉnh bố cục biểu mẫu thanh toán
- Trang Tài Khoản Của Tôi: Thiết kế lại bảng điều khiển tài khoản khách hàng
Mỗi mẫu sử dụng các widget đặc thù của WooCommerce để lấy dữ liệu động từ các sản phẩm của bạn. Điều này có nghĩa là bạn thiết kế bố cục một lần, và nó tự động áp dụng cho tất cả các sản phẩm (hoặc các danh mục cụ thể).
Xây Dựng Một Trang Sản Phẩm Tùy Chỉnh
Bước 1: Tạo Mẫu
- Đi tới Templates → Theme Builder trong quản trị WordPress của bạn
- Nhấp vào "Thêm Mới" và chọn "Sản Phẩm Đơn" làm loại mẫu
- Chọn một mẫu trang sản phẩm đã được xây dựng sẵn hoặc bắt đầu từ một canvas trắng
- Trình chỉnh sửa Elementor sẽ mở ra với các widget WooCommerce có sẵn trong bảng điều khiển
Bước 2: Thêm Các Widget WooCommerce
Các widget WooCommerce chính cho các trang sản phẩm:
| Widget | Nó Hiển Thị Gì | Tùy Chọn Tùy Chỉnh |
|---|---|---|
| Hình Ảnh Sản Phẩm | Thư viện với hình thu nhỏ và lightbox | Bố cục thư viện, vị trí hình thu nhỏ, công tắc phóng to |
| Tiêu Đề Sản Phẩm | Tên sản phẩm (H1) | Kiểu chữ, màu sắc, căn chỉnh |
| Giá Sản Phẩm | Giá thường và giá khuyến mãi | Kiểu chữ, màu sắc nhãn giảm giá, bố cục |
| Đánh Giá Sản Phẩm | Đánh giá sao từ các nhận xét | Màu sắc sao, kích thước, căn chỉnh |
| Thêm Vào Giỏ Hàng | Chọn số lượng + nút thêm vào giỏ hàng | Kiểu nút, màu sắc, bố cục số lượng |
| Mô Tả Ngắn Sản Phẩm | Tóm tắt ngắn gọn về sản phẩm | Kiểu chữ, khoảng cách |
| Dữ Liệu Meta Sản Phẩm | SKU, danh mục, thẻ | Bố cục, kiểu chữ, dấu phân cách |
| Tab Dữ Liệu Sản Phẩm | Mô tả, nhận xét, tab thông tin bổ sung | Kiểu tab, viền, khoảng cách |
| Sản Phẩm Liên Quan | Sản phẩm từ cùng một danh mục | Cột, số lượng, thứ tự |
| Upsells | Upsell liên kết thủ công |
Bước 3: Thực hành Bố cục Tốt nhất
Trang sản phẩm có tỷ lệ chuyển đổi cao tuân theo một mẫu bố cục đã được kiểm chứng:
- Trên cùng: Hình ảnh sản phẩm (bên trái, chiều rộng 50-60%) + tiêu đề, giá, đánh giá, mô tả ngắn và nút thêm vào giỏ hàng (bên phải, chiều rộng 40-50%)
- Dưới cùng: Các tab dữ liệu sản phẩm (mô tả đầy đủ, thông số kỹ thuật, đánh giá)
- Phần dưới: Sản phẩm liên quan và bán thêm theo lưới (3-4 cột)
- Các yếu tố tin cậy: Thông tin vận chuyển, chính sách hoàn trả, biểu tượng bảo mật gần nút thêm vào giỏ hàng
Giữ cho nút thêm vào giỏ hàng luôn hiển thị mà không cần cuộn trên cả máy tính để bàn và di động. Sử dụng màu sắc tương phản cho nút để thu hút sự chú ý.
Tùy chỉnh Trang Cửa hàng (Lưu trữ Sản phẩm)
Bước 1: Tạo Mẫu Lưu trữ
- Đi tới Mẫu → Trình tạo giao diện → Lưu trữ Sản phẩm
- Thêm một mẫu mới và chọn "Lưu trữ Sản phẩm" làm loại
- Gán điều kiện hiển thị (tất cả các lưu trữ, danh mục cụ thể hoặc trang thẻ)
Bước 2: Cấu hình Lưới Sản phẩm
Widget Sản phẩm Lưu trữ hiển thị danh sách sản phẩm của bạn với các tùy chọn sau:
- Các cột: 2-6 cột (3-4 cột hoạt động tốt cho hầu hết các cửa hàng)
- Sản phẩm trên mỗi trang: 12-24 là tiêu chuẩn cho trải nghiệm người dùng
- Phân trang: Các trang đánh số, nút "tải thêm" hoặc cuộn vô hạn
- Danh sách sắp xếp: Cho phép khách hàng sắp xếp theo giá, độ phổ biến hoặc đánh giá
- Biểu tượng giảm giá: Tùy chỉnh vị trí, màu sắc và văn bản của biểu tượng giảm giá
Đối với các cửa hàng có nhiều sản phẩm, hãy thêm bộ lọc danh mục phía trên lưới. Bạn có thể sử dụng widget Menu của Elementor hoặc một plugin lọc sản phẩm như JetWooBuilder cho các tùy chọn lọc nâng cao.
Thiết kế Trang Giỏ hàng
Elementor Pro cho phép bạn tùy chỉnh bố cục trang giỏ hàng. Một trang giỏ hàng tốt nên:
- Hiển thị hình ảnh sản phẩm, tên, giá và số lượng trong một bảng sạch sẽ
- Hiển thị tổng số tiền một cách nổi bật
- Bao gồm một nút "Tiếp tục mua sắm" để quay lại trang cửa hàng
- Hiển thị một máy tính phí vận chuyển để khách hàng có thể ước tính chi phí giao hàng
- Hiển thị các sản phẩm bán chéo bên dưới bảng giỏ hàng
Widget Giỏ hàng của Elementor thay thế bố cục giỏ hàng mặc định của WooCommerce bằng một trình chỉnh sửa trực quan nơi bạn có thể định dạng từng phần tử—đường viền bảng, màu nút, kiểu chữ và khoảng cách.
Tùy chỉnh Trang Thanh toán
Trang thanh toán ảnh hưởng trực tiếp đến tỷ lệ chuyển đổi của bạn. Widget Thanh toán của Elementor Pro cung cấp quyền kiểm soát về:
- Bố cục biểu mẫu: Biểu mẫu thanh toán/giao hàng một cột hoặc hai cột
- Vị trí tóm tắt đơn hàng: Bên cạnh biểu mẫu hoặc ở trên/dưới
- Định dạng nút: Màu sắc, kích thước và văn bản của nút đặt hàng
- Phần thanh toán: Bố cục nút radio hoặc tab cho các phương thức thanh toán
- Biểu tượng tin cậy: Thêm biểu tượng bảo mật và văn bản đảm bảo gần biểu mẫu thanh toán
Để biết thêm mẹo tối ưu hóa chuyển đổi thanh toán, hãy xem hướng dẫn tối ưu hóa thanh toán WooCommerce của chúng tôi.
Các yếu tố về Hiệu suất
Elementor thêm CSS và JavaScript vào các trang của bạn. Đối với một cửa hàng WooCommerce, hiệu suất liên quan trực tiếp đến chuyển đổi. Hãy ghi nhớ những mẹo này:
- Sử dụng các container Flexbox thay vì các phần/cột để giảm số lượng phần tử DOM
- Tối ưu hóa hình ảnh sản phẩm: Sử dụng định dạng WebP, kích thước phù hợp và tải chậm. Xem hướng dẫn tối ưu hóa hình ảnh của chúng tôi
- Giới hạn số lượng widget: Mỗi widget thêm mã; chỉ sử dụng những gì bạn cần
- Bật các tính năng hiệu suất của Elementor: Tải tài sản được cải thiện, Tải CSS được cải thiện
- Sử dụng plugin caching: WP Rocket hoạt động tốt với các thiết lập Elementor WooCommerce
Các Addons Cần Thiết cho Elementor WooCommerce
Các addons Elementor này mở rộng khả năng xây dựng WooCommerce:
| Addon | Các Tính Năng Chính của WooCommerce |
|---|---|
| JetWooBuilder | Lưới sản phẩm nâng cao, mẫu lưu trữ tùy chỉnh, bố cục sản phẩm đơn với logic điều kiện |
| Essential Addons Pro | Lưới sản phẩm, băng chuyền sản phẩm, thanh toán WooCommerce |
| Happy Elementor Addons | Lưới danh mục sản phẩm, giỏ hàng mini, băng chuyền sản phẩm |
Các Câu Hỏi Thường Gặp
Tôi có cần Elementor Pro cho WooCommerce không, hay phiên bản miễn phí cũng đủ?
Elementor Pro là cần thiết cho các widget cụ thể của WooCommerce (Hình ảnh sản phẩm, Thêm vào giỏ, Thẻ dữ liệu sản phẩm, Giỏ hàng, Thanh toán, v.v.). Phiên bản miễn phí của Elementor không bao gồm các widget này. Bạn có thể sử dụng phiên bản miễn phí để thiết kế các trang thông thường, nhưng các mẫu WooCommerce tùy chỉnh yêu cầu Elementor Pro.
Tôi có thể sử dụng Elementor cho trang thanh toán không?
Có. Elementor Pro bao gồm một widget Thanh toán thay thế bố cục thanh toán mặc định của WooCommerce. Bạn có thể tùy chỉnh các trường biểu mẫu, tóm tắt đơn hàng, phần thanh toán và bố cục tổng thể. Tuy nhiên, hãy cẩn thận với các tùy chỉnh nặng có thể làm hỏng tích hợp cổng thanh toán—luôn kiểm tra toàn bộ quy trình mua hàng sau khi thực hiện thay đổi.
Làm thế nào để tôi tạo các bố cục trang sản phẩm khác nhau cho các danh mục khác nhau?
Trong Theme Builder của Elementor, bạn có thể gán các điều kiện hiển thị cho từng mẫu. Tạo một mẫu trang sản phẩm cho quần áo (với các lựa chọn kích thước/màu sắc), một mẫu khác cho sản phẩm kỹ thuật số (không có thông tin vận chuyển), và vân vân. Mỗi mẫu chỉ áp dụng cho các sản phẩm trong các danh mục đã chỉ định.
Elementor có làm chậm WooCommerce không?
Elementor thêm tải CSS và JavaScript vào bất kỳ trang nào. Trên các trang sản phẩm với nhiều widget, điều này có thể làm tăng thời gian tải lên 0.5-1.5 giây so với các mẫu WooCommerce mặc định. Sử dụng các tính năng hiệu suất tích hợp của Elementor, tối ưu hóa hình ảnh và sử dụng plugin caching giúp giảm thiểu tác động này. Đối với các cửa hàng quan trọng về hiệu suất, hãy xem xét một chủ đề nhẹ hơn như GeneratePress.
Tôi có thể sử dụng các mẫu Elementor WooCommerce với bất kỳ chủ đề nào không?
Hầu hết các mẫu Elementor WooCommerce hoạt động với bất kỳ chủ đề nào hỗ trợ WooCommerce. Tuy nhiên, một số chủ đề có thể có kiểu dáng trang sản phẩm riêng của họ gây xung đột với các mẫu Elementor. Các chủ đề như Astra, GeneratePress và OceanWP được thiết kế để hoạt động liền mạch với Elementor và cung cấp nền tảng sạch nhất cho các mẫu tùy chỉnh.
Nhận Elementor Pro để Xây Dựng Cửa Hàng WooCommerce
Truy cập tất cả các widget WooCommerce, Theme Builder và hơn 100 mẫu Pro. Xây dựng các trang sản phẩm tùy chỉnh, lưu trữ cửa hàng và bố cục thanh toán một cách trực quan.
Xem Elementor Pro →
