Xây dựng và thiết kế một trang sản phẩm WooCommerce 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 của bạn 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ế trực quan 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 trình xây dựng trang web WordPress hàng đầu trên thị trường, nhưng bạn có biết rằng bạn có thể xây dựng các cửa hàng WooCommerce bằng cách sử dụng nó không?

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

Tạo kiểu và tùy chỉnh WooCommerce được sử dụng để 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 thiệ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.

Bắt đầu nào.

• Tạo mẫu Elementor
• Hình ảnh hoặc thư viện sản phẩm của Building Elementor
• Tên sản phẩm WooCommerce, giá cả và thêm vào giỏ hàng
• Thiết lập các 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à WooCommerce
• 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à tạo một 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 'Tạo mới' sau đó 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 Phần tử thông thường cho một trang mới.

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

Mỗi Sản phẩm WooCommerce đều có hình ảnh sản phẩm hoặc thư viện hình ảnh giới thiệu các bức ả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 vào cột bên trái; điều này trông thực tế và thực hiện 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 đoạn mã bên dưới.

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

WooCommerce p roduct title, 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 & thả chúng qua để sắp xếp chúng theo trình tự đã nêu ở trên; điều 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 như chủ đề Hello Elementor phần trên. Tạo kiểu mô-đun với 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 tạo kiểu ở 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. Trước 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ự đối với các mô-đun Giá sản phẩm và Thêm vào giỏ 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, trên module Add To Cart, chúng tôi sẽ cập nhật một vài 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 dưới đây:

• Đặ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 điều này trong tab Kiểu cho Số lượng.

Thiết lập các 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à các đá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 Phần tử vào hàng để chèn 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ẽ cần một chút CSS tùy chỉnh một lần nữa. Bắt đầu chỉnh sửa các 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 {background-color: # cc3366; màu: #fff; bán kính đường viền: 0px; }

Mô tả ngắn gọn về Elementor p roduct

Được rồi, cho đến nay chúng ta đã có một thiết kế khá đơn giản, nhưng có vẻ hơi thưa thớt. 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 vấ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 của WooCommerce, sau đó kéo và thả nó bên dưới Giá sản phẩm và phía trên Mô-đun Thêm vào giỏ hàng.

Không cần tạo kiểu ở đây vì nó kế thừa các kiểu từ Hello Elementor.

Elementor và WooCommerce p roduct Upsells

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 WooCommerce, đó là lý do tại sao thật tuyệt khi 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 Phần tử và chèn mô-đun đó vào một hàng mới phía sau các 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 tôi. 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

Thành phẩm sẽ giống như trên. Bạn có thể điều chỉnh mã hex màu nếu bạn thấy phù hợp nếu bạn sử dụng hướng dẫn này làm điểm khởi đầu 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 thời điểm 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 một danh mục cụ thể hoặc có một thẻ cụ thể được liên kết với chúng.

tạo trang Elementor p roduct

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. Sự xuất hiện của cửa hàng WooCommerce của bạn có thể bị ảnh hưởng nếu bạn đang sử dụng một chủ đề WordPress có thể kiểm soát sự xuất hiện của cửa hàng của bạn. Nếu bạn gặp sự cố 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 của bạn 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ó một 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 của thư viện mẫu khi nó xuất hiện và bắt đầu xây dựng trên trang mới được 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 vài trong số các tiện ích WooCommerce 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 widget 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 widget ở bất cứ đâu 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 của bạn 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ế trực quan 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 WooCommerce của bạn và nó rất được khuyến khích. Ngoài việc dễ sử dụng, trình tạo trang bao gồm tất cả các tiện ích con cần thiết và các tùy chọn tạo kiểu để 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 cần thiết để tùy chỉnh sản phẩm WooCommerce và các trang lưu trữ sản phẩm bằng Elementor. Bạn đã sử dụng Elementor để tạo các trang WooCommerce trước đây chưa? Bạn có thể chia sẻ suy nghĩ của bạn trong phần bình luận. Chúng tôi rất vui được xem qua.