Xây dựng và thiết kế trang sản phẩm WooC Commerce tuyệt vời với Elementor

Bạn phải sửa đổi trang sản phẩm của mình để phân biệt cửa hàng thương mại điện tử của bạn với đối thủ cạnh tranh và cung cấp cho khách hàng trải nghiệm độc đáo. Hơn nữa, tùy chọn cá nhân hóa về mặt thẩm mỹ trang sản phẩm của bạn là rất quan trọng để duy trì thiết kế hình ảnh nhất quán trong toàn bộ cửa hàng trực tuyến của bạn.

Elementor là một trong những công cụ xây dựng trang web WordPress hàng đầu trên thị trường, nhưng bạn có biết bạn có thể xây dựng các cửa hàng WooC Commerce bằng cách sử dụng nó không?

Nhiều mô-đun Elementor WooC Commerce tích hợp cho phép bạn chèn các khối chức năng hoặc nội dung WooC Commerce hoặc tạo kiểu cho chúng bằng trình tạo Elementor. Khá tuyệt vời phải không?

Tạo kiểu và tùy chỉnh WooC Commerce trước đây yêu cầu PHP và CSS cho mọi thay đổi nhỏ, nhưng khi các công cụ như Elementor cải tiến và trở nên phức tạp hơn, ngày càng có nhiều tùy chọn để kiểm soát giao diện và hoạt động của cửa hàng của bạn.

Hãy bắt đầu.

• Tạo mẫu Elementor
• Hình ảnh hoặc thư viện sản phẩm Building Elementor
• Tiêu đề sản phẩm WooC Commerce, giá và thêm vào giỏ hàng
• Thiết lập tab sản phẩm Elementor
• Mô tả ngắn gọn về sản phẩm Elementor
• Bán thêm sản phẩm Elementor và WooC Commerce
• Kết luận – Trình tạo trang sản phẩm Elementor

Tạo mẫu Elementor

Bước đầu tiên trong quy trình là xây dựng mẫu Elementor mới bằng cách điều hướng đến Mẫu trong bảng điều khiển WordPress. Nhấp vào 'Xây dựng mới' rồi chọn Sản phẩm đơn lẻ làm mẫu bạn muốn tạo.

Khi chúng tôi phát triển mẫu này từ đầu, không cần đặt bất kỳ khối nào; thoát khỏi hộp tiếp theo cho đến khi bạn đến màn hình trình tạo Elementor thông thường cho một trang mới.

Hình ảnh hoặc thư viện sản phẩm Building Elementor

Mỗi Sản phẩm WooC Commerce đều có hình ảnh sản phẩm hoặc thư viện hình ảnh giới thiệu ảnh của sản phẩm cho khách hàng. Elementor cung cấp mô-đun Hình ảnh sản phẩm tích hợp cho phép chúng tôi chèn mô-đun này vào mẫu của mình.

Tạo một hàng 2 cột đơn giản và nhập mô-đun Hình ảnh Sản phẩm ở cột bên trái; điều này có vẻ thiết thực và thực hiện được công việc, nhưng hãy tùy chỉnh huy hiệu bán hàng để phù hợp với Chủ đề Elementor Hello đang được sử dụng cho bài viết này. Để làm điều này, chúng ta cần áp dụng một dòng CSS tùy chỉnh nhỏ, có thể được giới thiệu bằng cách đi tới Nâng cao > CSS tùy chỉnh và dán mã bên dưới.

bộ chọn .onsale { \sbackground-color: #cc3366 ; \S}

phẩm WooC Commerce , giá và thêm vào giỏ hàng

Chúng tôi sẽ thêm các mô-đun Elementor cho Tiêu đề sản phẩm, Giá sản phẩm và Thêm vào giỏ hàng ở cột bên phải.

Tìm kiếm ba mô-đun này trong hàm tạo Elementor, sau đó kéo và thả chúng qua để sắp xếp chúng theo trình tự đã nêu ở trên; cái này có đầy đủ chức năng, nhưng chúng tôi muốn tùy chỉnh nó để phù hợp với kiểu dáng giống như chủ đề Hello Elementor ở phần trên. Việc tạo kiểu mô-đun bằng Elementor rất dễ dàng, tất cả những gì bạn cần làm là nhấp vào mô-đun và trình chỉnh sửa sẽ mở các tùy chọn kiểu dáng ở bên trái.

Nội dung của các mô-đun này là tuyệt vời. Vì vậy, chúng ta sẽ làm việc trong tab Style. Đầu tiên, hãy cập nhật phông chữ và màu sắc của Tiêu đề sản phẩm để phù hợp với phông chữ và màu sắc được sử dụng trong chủ đề Hello Elementor.

Sau đó, chúng ta cần thực hiện tương tự cho các mô-đun Giá sản phẩm và Thêm vào giỏ hàng bằng cách nhấp vào từng mô-đun và sửa đổi màu văn bản. Đối với Giá sản phẩm, tôi sẽ sử dụng màu xám đậm để tương phản với dòng tiêu đề, vì vậy hãy nhập mã hex này nếu bạn đang theo dõi – #54595f

Tiếp theo, ở mô-đun Thêm vào giỏ hàng, chúng tôi sẽ cập nhật một số thứ. Màu nền của nút và bán kính đường viền của nút bằng cách sử dụng các cài đặt bên dưới:

• Đặt nội dung thành 'Thêm vào giỏ hàng.'
• Đặt màu nền thành '#cc3366'
• Đặt bán kính đường viền thành 0

Tôi đã thay đổi bán kính đường viền của bộ chọn số lượng thành 0, bạn có thể thực hiện việc này trong tab Kiểu cho Số lượng.

Thiết lập tab sản phẩm Elementor

Mỗi sản phẩm phải hiển thị một số thông tin cơ bản như mô tả sản phẩm và đánh giá nếu có; điều này thường được xử lý thông qua các tab sản phẩm.

Vui lòng tạo một hàng mới bên dưới phần trên cùng và kéo mô-đun Tab dữ liệu sản phẩm từ trình tạo Elementor vào hàng để chèn. Không cần nhiều kiểu dáng ở đây vì nó kế thừa một số kiểu từ chủ đề Hello Elementor. Tuy nhiên, hãy sửa đổi kiểu của nút gửi đánh giá.

Để làm điều này, chúng ta sẽ lại cần một chút CSS tùy chỉnh. Bắt đầu chỉnh sửa Tab dữ liệu sản phẩm, sau đó nhấp vào tab Nâng cao và cuộn xuống CSS tùy chỉnh. Nhập CSS bên dưới và bạn có thể điều chỉnh màu sắc theo thiết kế của mình.

.woocommerce #review form #reply .form-submit input { màu nền: #cc3366; màu sắc: #fff; bán kính đường viền: 0px; }

Mô tả ngắn gọn về sản phẩm Elementor p

Ok, vậy là chúng ta đã có một thiết kế đẹp, trông đơn giản nhưng có vẻ hơi thưa thớt. Việc thêm mô-đun Mô tả ngắn gọn về sản phẩm vào phần trên cùng có thể giúp giải quyết phần này và thêm nhiều ngữ cảnh hơn.

Vui lòng tìm kiếm mô-đun Mô tả ngắn gọn về WooC Commerce, sau đó kéo và thả mô-đun đó bên dưới Giá sản phẩm và phía trên Mô-đun Thêm vào giỏ hàng.

Ở đây chưa có yêu cầu về kiểu dáng vì nó kế thừa các kiểu từ Hello Elementor.

Bán thêm sản phẩm của Elementor và WooC Commerce

Việc tăng giá trị giỏ hàng trung bình của bạn là rất quan trọng đối với mọi trang web WooC Commerce, đó là lý do tại sao Elementor bao gồm mô-đun Bán thêm sản phẩm để bạn dễ dàng tích hợp tùy chỉnh trên cửa hàng của mình.

Vui lòng tìm kiếm mô-đun Bán thêm sản phẩm trong trình tạo Elementor và chèn nó vào hàng mới phía sau Tab Dữ liệu Sản phẩm.

Như bạn có thể thấy, điều này đòi hỏi một chút điều chỉnh để bổ sung cho phần còn lại của phong cách của chúng ta. Bắt đầu sửa đổi mô-đun và thực hiện các thay đổi sau:

• Đặt màu Tiêu đề thành – #cc3366
• Đặt màu Tiêu đề thành - #cc3366
• Đặt màu Giá thành - #54595f
• Đặt màu nền của Nút thành – #cc3366
• Đặt màu Nút thành - #fff
• Đặt bán kính đường viền Nút t0 – 0

Sản phẩm hoàn thiện sẽ trông giống như trên. Bạn có thể điều chỉnh mã hex màu khi thấy phù hợp nếu bạn sử dụng hướng dẫn này làm điểm xuất phát cho mẫu của mình.

Sau khi hoàn tất, bạn xuất bản mẫu của mình. Trong cửa sổ tiếp theo, bạn sẽ thấy câu hỏi “Bạn muốn hiển thị mẫu của mình ở đâu?”. Nhấp vào “Thêm điều kiện” để xác định khi nào nên sử dụng mẫu này. Bạn có thể chọn “Tất cả sản phẩm” để sử dụng mẫu trên tất cả các trang sản phẩm của mình. Bạn cũng có thể chọn chỉ sử dụng mẫu này cho các sản phẩm thuộc danh mục cụ thể hoặc có thẻ cụ thể được liên kết với chúng.

Kết luận – Trình tạo trang sản phẩm

Một số người dùng có thể gặp khó khăn khi hiển thị cài đặt thiết kế tùy chỉnh của họ, chẳng hạn như màu phông chữ và kiểu chữ, khi sử dụng Elementor. Giao diện cửa hàng WooC Commerce của bạn có thể bị ảnh hưởng nếu bạn đang sử dụng chủ đề WordPress có thể kiểm soát giao diện cửa hàng của mình. Nếu bạn gặp phải vấn đề này, hãy nhớ rằng bài viết của bạn có thể ghi đè cài đặt trang tùy chỉnh trong một số trường hợp.

Bạn cũng có thể chọn một trang trống và tạo một trang từ đầu bằng cách sử dụng các tiện ích sản phẩm để có giao diện hoàn toàn tùy chỉnh. Sử dụng một trang trống, đóng cửa sổ bật lên thư viện mẫu khi nó xuất hiện và bắt đầu xây dựng trên trang mới tạo. Nút “Thêm vào giỏ hàng” tùy chỉnh, “Giá sản phẩm”, “Hình ảnh sản phẩm” và “Tiêu đề và mô tả sản phẩm” chỉ là một số tiện ích WooC Commerce mà bạn có thể sử dụng để tùy chỉnh trang sản phẩm của mình. Bạn có thể xem tất cả các vật dụng khác nhau hiện có bằng cách truy cập trang này. Nếu muốn, bạn có thể sắp xếp các tiện ích ở bất kỳ vị trí nào bạn muốn trên bố cục trang và tùy chỉnh kiểu của chúng để phù hợp với giao diện mong muốn của bạn.

Bạn phải sửa đổi trang sản phẩm của mình để phân biệt cửa hàng thương mại điện tử của bạn với đối thủ cạnh tranh và cung cấp cho khách hàng trải nghiệm độc đáo. Hơn nữa, tùy chọn cá nhân hóa về mặt thẩm mỹ trang sản phẩm của bạn là rất quan trọng để duy trì thiết kế hình ảnh nhất quán trong toàn bộ cửa hàng trực tuyến của bạn. Elementor là một công cụ tuyệt vời để tùy chỉnh các trang trong cửa hàng WooC Commerce của bạn và nó rất được khuyến khích. Ngoài việc sử dụng đơn giản, trình tạo trang còn bao gồm tất cả các tiện ích cần thiết và tùy chọn kiểu dáng để hỗ trợ bạn tạo các trang sản phẩm tùy chỉnh. Chúng tôi hy vọng bạn thấy hướng dẫn này có nhiều thông tin và cung cấp cho bạn thông tin bạn cần để tùy chỉnh các trang lưu trữ sản phẩm và sản phẩm WooC Commerce của bạn bằng Elementor. Trước đây bạn đã sử dụng Elementor để tạo các trang WooC Commerce chưa? Bạn có thể chia sẻ suy nghĩ của mình trong phần bình luận. Chúng tôi rất vui được xem qua.