Plugin WooCommerce chỉ có một giao diện để hiển thị các sản phẩm theo mặc định. Trong khi chế độ xem lưới được chấp nhận, nó rất chuẩn và bạn có thể muốn chuyển đổi mọi thứ. Chuyển trang cửa hàng WooC Commerce của bạn để liệt kê xem nếu bạn sẽ tạo một cửa hàng trực tuyến vừa hữu ích vừa hấp dẫn.

Đối với các công ty thương mại điện tử muốn thành lập một cửa hàng trực tuyến, Divi và WooC Commerce là một sự pha trộn thành công. Không giống như các chủ đề Wooc Commerce khác, bạn có thể gặp phải mức độ tùy chỉnh của trang web nhờ sự kết hợp đã thử và thực sự của WordPress và WooC Commerce, cũng như trình tạo Divi cực mạnh.

Tuy nhiên, một số khía cạnh của chủ đề, chẳng hạn như màn hình lưới thông thường cho các sản phẩm WooC Commerce, không thể được sửa đổi. Trong khi một số plugin xem danh sách WooC Commerce có sẵn, mỗi plugin, mỗi plugin phục vụ một mục đích cụ thể và không phải lúc nào cũng tương thích với Divi.

Chúng tôi đã xây dựng công cụ xây dựng cửa hàng Divi cho người dùng Divi muốn phát triển các cửa hàng trực tuyến độc đáo, kết hợp mô-đun Woo Shop Plus. Một trong nhiều tính năng của plugin này là khả năng xây dựng chế độ xem danh sách sản phẩm WooC Commerce một cách nhanh chóng.

Bạn có thể tạo bản trình bày danh sách một không hai cho các sản phẩm WooC Commerce của bạn với Divi Shop Builder trong hộp công cụ phát triển của bạn, như thế này:

HÌNH ẢNH

Nó không phải là tuyệt đẹp sao?

Chuẩn bị cho một chuyến tham quan đầy đủ của plugin Builder Divi Shop, bao gồm:

• Một lời giải thích về lý do tại sao cửa hàng WooCommerce của bạn nên có màn hình xem danh sách.
• Hướng dẫn cài đặt plugin Divi Shop Builder,
• Hướng dẫn này sẽ chỉ cho bạn cách sử dụng plugin để tạo màn hình xem danh sách.
• Cách sử dụng bản demo trên trên cửa hàng trực tuyến của bạn để tiết kiệm thời gian.

Tại sao bạn nên sử dụng ListView cho các sản phẩm WooCommerce?

Màn hình bố trí cửa hàng WooCommerce mặc định là một lưới đơn giản, như đã nêu trước đó. Tiêu đề, giá cả và hình ảnh nổi bật được hiển thị trong lưới này, thường rộng một vài cột.

Từ chủ đề trẻ em divi WooCommerce Store, đây là ảnh chụp màn hình chế độ xem sản phẩm WooCommerce theo kiểu lưới.

HÌNH ẢNH

Trong bố cục lưới, sản phẩm sẽ tự động hiển thị với hình ảnh khổng lồ. Điều này làm giảm lượng không gian có sẵn. Bởi vì hình ảnh chiếm vị trí trung tâm, không có nhiều chỗ cho thông tin bổ sung như mô tả sản phẩm, số lượng cổ phiếu hoặc bất cứ điều gì khác. Trong bố cục lưới, sản phẩm sẽ tự động hiển thị với hình ảnh khổng lồ.Điều này làm giảm lượng không gian có sẵn.

Mô hình lưới này nói chung là tinh tế; Không có sai sót đáng kể, mặc dù nó bị hạn chế nghiêm trọng. Bởi vì hình ảnh chiếm vị trí trung tâm, không có nhiều chỗ cho thông tin bổ sung như mô tả sản phẩm, số lượng cổ phiếu hoặc bất cứ điều gì khác. Trong bố cục lưới, sản phẩm sẽ tự động hiển thị với hình ảnh khổng lồ.Điều này làm giảm lượng không gian có sẵn. Do hạn chế này, kiểu lưới không phải lúc nào cũng phù hợp với mọi thiết kế trang web, kinh doanh, ngành công nghiệp hoặc sở thích của khách hàng.

• Chế độ xem lưới điện sẽ khó khăn cho các nhà hàng, spa và các công ty dịch vụ khác bán phương pháp điều trị. Menu có hiển thị tương đối điển hình về chế độ xem danh sách các sản phẩm, có thể chứa một mô tả ngắn về sản phẩm và giá cả, cho dù bạn đang bán thực phẩm hay thuốc men. Thật khó để tạo một menu trực tuyến với lưới.
• Các thương hiệu bán các mặt hàng “xây dựng của riêng bạn” cũng khan hiếm tương tự. Cuộn mãi mãi để có được đến từng mảnh sản phẩm sẽ gây khó chịu cho người tiêu dùng của bạn nếu họ cần chọn nhiều thứ cùng một lúc để tạo ra một sản phẩm theo thông số kỹ thuật của họ.
• Một số sản phẩm thậm chí không yêu cầu hình ảnh. Chế độ xem lưới là một sự lãng phí không gian cho nhiều nhà bán lẻ trực tuyến, và nếu không có đồ họa, lưới sẽ xuất hiện kỳ lạ.

Plugin Divi Shop Builder của chúng tôi làm giảm bớt những lo ngại này. Bạn sẽ có thể xây dựng chế độ xem danh sách cho các sản phẩm WooCommerce của mình bằng plugin của chúng tôi.

Bạn đã sẵn sàng để tìm hiểu làm thế nào để tạo ra các cửa hàng internet của những giấc mơ của bạn? Chúng ta hãy xem cách Divi Shop Builder hoạt động.

Cách thực hiện dạng xem Danh sách Sản phẩm WooCommerce

Plugin Divi Shop Builder được cài đặt.

Đầu tiên và quan trọng nhất, bạn phải có được plugin Divi Space từ cửa hàng của họ. Sau khi bạn đã mua plugin, hãy truy cập Tài khoản của tôi và tải xuống. Plugin sau đó sẽ được cài đặt và kích hoạt trên trang web của bạn. Để hoàn tất việc mua plugin của mình, bạn sẽ được yêu cầu nhập khóa giấy phép của mình.

Bạn sẽ tìm thấy plugin trong menu Divi sau khi nó được cài đặt, kích hoạt và sẵn sàng để sử dụng.

HÌNH ẢNH

Divi Shop Builder hoạt động bằng cách kết hợp một số mô-đun vào Divi Builder. Plugin không có bất kỳ tùy chọn cấu hình hoặc quy trình thiết lập nào; thay vào đó, nó phục vụ như một lời nhắc nhở về các tính năng của plugin. Nếu bạn bị mắc kẹt hoặc cần hỗ trợ, hãy truy cập trang bảng điều khiển plugin để được hỗ trợ.

HÌNH ẢNH

Hãy chắc chắn rằng bạn đã thêm một vài sản phẩm vào cửa hàng WooCommerce của mình trước khi bạn bắt đầu lộn xộn với plugin công cụ xây dựng Divi Shop. Bạn có thể bắt đầu sử dụng plugin sau khi tải lên một vài sản phẩm. Thêm mô-đun Woo Shop Plus sau khi tạo hàng và phần như bình thường.

Sử dụng WooCommerce để tạo dạng xem danh sách sản phẩm

HÌNH ẢNH

Sản phẩm của bạn sẽ xuất hiện ở định dạng lưới điển hình khi bạn đã thêm mô-đun.

HÌNH ẢNH

Theo mặc định, Woo Shop Plus sử dụng các cài đặt tương tự như Divi, bao gồm phông chữ Open Sans và điểm nhấn chủ đề màu xanh. Các yếu tố sản phẩm khác nhau, bao gồm huy hiệu, hình ảnh nổi bật, tiêu đề, xếp hạng, giá cả, số lượng sản phẩm, nút Thêm vào Giỏ hàng, danh mục, số lượng cổ phiếu và mô tả sản phẩm, cũng được tự động hiển thị.

Giống như bất kỳ mô-đun Divi nào khác, mọi khía cạnh trong mô-đun Woo Shop Plus có thể được tùy chỉnh bằng tab Thiết kế. Bây giờ, chúng ta hãy lắc lên định dạng lưới điển hình này. Chúng ta sẽ trang trí mô-đun sau.

Để chuyển đổi điều này thành dạng xem danh sách, hãy đi đến tab Sản phẩm, mở mô-đun, cuộn xuống cho đến khi bạn thấy tùy chọn Bố trí, nhấp vào menu thả xuống và chọn Danh sách. Bạn có thể đã xây dựng màn hình xem danh sách sản phẩm WooCommerce cho doanh nghiệp trực tuyến của mình chỉ trong vài giây.

HÌNH ẢNH

Bạn không thể quyết định xem bạn muốn xem dữ liệu của mình trong lưới hay danh sách? Khi bạn chọn Grid/List View Switch từ menu thả xuống Bố trí, một biểu tượng sẽ xuất hiện chuyển đổi giữa hai dạng xem.

HÌNH ẢNH

Bất kể mô-đun Woo Shop Plus ở chế độ dạng xem Grid hay List khi bạn thêm nó vào bố cục trang hoặc bài đăng, nó sẽ tự động hiển thị mô tả sản phẩm. Theo mặc định, độ dài của mô tả sản phẩm này được giới hạn ở 55 ký tự. Bạn có tùy chọn giới hạn bản sao mô tả sản phẩm ở bất kỳ độ cao nào khi tùy chỉnh thiết kế của bạn.

Để làm như vậy, hãy đi đến tùy chọn Độ dài Mô tả Sản phẩm và tùy chỉnh độ dài.

HÌNH ẢNH

Bạn có thể tùy chỉnh độ dài mô tả sản phẩm của mình cho mỗi chế độ xem thiết bị (máy tính để bàn, máy tính bảng và điện thoại di động) để đảm bảo rằng chúng trông đẹp trên tất cả các màn hình.

HÌNH ẢNH

Bạn có thể chọn nơi plugin lấy nội dung mô tả khi xác định mô tả sản phẩm. Điều này có thể đến từ một trong những nguồn sau:

• Mô tả sản phẩm hoặc mô tả ngắn được cung cấp trong danh sách sản phẩm
• Đoạn văn bản trong phụ trợ của sản phẩm

Khi xác định lựa chọn thay thế nào trong hai lựa chọn thay thế bạn muốn hiển thị, hãy vào menu thả xuống Mô tả sản phẩm và chọn lựa chọn lựa chọn bạn muốn.

HÌNH ẢNH

Khi dạng xem Danh sách được bật, plugin sẽ hiển thị nội dung Mô tả ngắn của danh sách sản phẩm theo mặc định.

Hãy nhớ giữ cho ngôn ngữ thú vị và hấp dẫn trong khi viết bản sao sản phẩm cho Divi Shop Builder, cho dù bạn hiển thị văn bản Mô tả ngắn hoặc Mô tả sản phẩm tùy chỉnh. Bạn chỉ có một vài ký tự để thúc giục khách truy cập cửa hàng của bạn điều tra thêm một sản phẩm, cùng với hình ảnh đặc trưng của sản phẩm. Bạn có thể thấy khó khăn khi viết bản sao mô tả duy nhất từng sản phẩm nếu bạn có những thứ khá giống nhau. Làm việc với một copywriter nếu bạn gặp khó khăn khi viết bản sao sản phẩm.

Tìm hiểu các tùy chọn của plugin Divi Shop Builder

Sau khi bạn đã thiết lập bố cục Danh sách, bạn có thể thử nghiệm với các cài đặt khác của mô-đun Woo Shop Plus.

HÌNH ẢNH

• Chế độ xem sản phẩm: Bạn có thể chọn sản phẩm nào để hiển thị ở đây, chẳng hạn như tất cả các sản phẩm, sản phẩm nổi bật, sản phẩm đang bán, v.v.
• Số lượng sản phẩm: Sau đó, bạn có thể chọn số lượng sản phẩm bạn muốn hiển thị trong mô-đun Woo Shop Plus này.
• Sau đó, bạn có thể chọn thứ tự nào để hiển thị sản phẩm, chẳng hạn như theo mức độ phổ biến, xếp hạng, ngày hoặc giá.
• Đặt giới hạn ký tự cho độ dài của màn hình mô tả sản phẩm, cũng như giới hạn duy nhất cho máy tính để bàn, máy tính bảng và điện thoại di động.
• Bố trí:Chọn xem bạn muốn có lưới hay bản trình bày dựa trên danh sách hoặc nếu bạn muốn thiết lập một chuyển đổi lật giữa hai dạng xem.
• Để mô tả sản phẩm, hãy chọn giữa việc sử dụng mô tả ngắn gọn hoặc mô tả tùy chỉnh.
• Hiển thị kết quả đếm sản phẩm: Nếu bạn muốn hiển thị toàn bộ văn bản đếm sản phẩm, chẳng hạn như “Hiển thị 1 – 12 trong số 24 kết quả”, bạn có thể chọn xem nó sẽ xuất hiện ở trên, dưới, ở cả hai điểm hoặc không nơi nào.
• Sắp xếp sản phẩm để hiển thị:Nếu có, hãy quyết định nơi bạn muốn menu thả xuống phân loại sản phẩm xuất hiện.
• Hiển thị phân trang:Ở đây, bạn có thể chọn xem bạn muốn số lượng phân trang xuất hiện ở trên cùng, dưới cùng, cả hai hoặc không hiển thị cửa hàng.
• Nhấp nháy của bán màn hình:Để hiển thị huy hiệu bán hàng nhấp nháy, hãy bật hoặc tắt tùy chọn này.
• Đặt có hay không các huy hiệu nên bao gồm hình ảnh, và nếu có, ở vị trí nào.

Một số toggles cho phép bạn lựa chọn xem bạn có muốn hay không:

• Nút để thêm vào giỏ hàng sẽ được hiển thị.
• Hiển thị trường số lượng trong giỏ hàng.
• Đặt giá trị mặc định của trường số.
• Giới thiệu hình ảnh của sản phẩm
• Hiển thị giá của sản phẩm.
• Hiển thị xếp hạng sao của sản phẩm.
• Giới thiệu danh mục của bạn
• Hiển thị số lượng sản phẩm trong kho.
• Giới thiệu cái mới! Huy hiệu.

Plugin Divi Shop Builder đang được tạo kiểu.

Bạn có thể cấu hình chế độ xem sản phẩm của mình để phản ánh thiết kế thương hiệu của mình khi bạn đã thiết lập nó để xuất hiện như bạn muốn. Mỗi yếu tố trong mô-đun Woo Shop Plus có thể được tùy chỉnh bằng cách sử dụng Divi Builder, giống như phần còn lại của các mô-đun của chủ đề Divi. Đây là một thay đổi trò chơi, vì mức độ tùy chỉnh này trước đây yêu cầu lập trình phức tạp và CSS.

Bạn sẽ khám phá rất nhiều tùy chọn để tạo kiểu: trên tab Thiết kế.

• Nút để thêm vào giỏ hàng
• Huy hiệu đã được cập nhật.
• Menu thả xuống có thể được sắp xếp theo nhiều cách khác nhau.
• Mỗi yếu tố văn bản đã được xem xét cẩn thận, từ văn bản tiêu đề sản phẩm đến văn bản chứng khoán.
• Ảnh
• Đó không phải là tất cả.

HÌNH ẢNH

Mọi thứ đều có thể chỉnh sửa, bao gồm trường số lượng, phân trang và các yếu tố đếm kết quả, tất cả đều có thể được thiết kế từ tab Thiết kế của Divi Builder.

Nút View Cart, xuất hiện ngay lập tức khi một sản phẩm được thêm vào giỏ hàng, là một tính năng tuyệt vời bổ sung giúp nâng cao đáng kể trải nghiệm người dùng của cửa hàng trực tuyến. Tab Thiết kế cho phép bạn thay đổi diện mạo của nút này.

HÌNH ẢNH

Plugin Divi Shop Builder có khả năng tùy biến nâng cao.

Cuối cùng, tab Nâng cao có tất cả các thông số tùy chỉnh mô-đun nâng cao điển hình, chẳng hạn như lớp CSS và ID, cài đặt hiển thị thiết bị, lựa chọn vị trí, v.v.

HÌNH ẢNH

Thế thôi! Bạn có thể tạo một chế độ xem danh sách thần thánh cho các sản phẩm WooCommerce của mình chỉ trong vài giây chỉ với vài cú nhấp chuột. Cửa hàng trực tuyến của bạn sẽ nổi bật so với đối thủ cạnh tranh!

Sử dụng Bố cục JSON của chúng tôi, bạn có thể tạo dạng xem danh sách sản phẩm.

Bài thuyết trình ngắn này sẽ chỉ cho bạn cách xây dựng các bố cục và thiết kế khác nhau. Như đã nói trước đây, mỗi yếu tố trong mô-đun Woo Shop Plus có thể thay đổi bằng cách sử dụng Divi Builder và có thể được sửa đổi chỉ với một vài cú nhấp chuột, cho phép bạn phù hợp với màu sắc thương hiệu của mình một cách dễ dàng.

Sử dụng một trong những bố cục được tạo khéo léo của chúng tôi, như bố cục được hiển thị ở đầu phần này hoặc sau đây, để bỏ qua quy trình thiết lập và tạo kiểu mô-đun:

HÌNH ẢNH

Tạo thiết kế trang thân thiện với người dùng, chuyển đổi giữa lưới và dạng xem danh sách bằng chức năng chuyển đổi.

HÌNH ẢNH

Khi bạn mua plugin Divi Shop Builder, bạn sẽ nhận được những mẫu tuyệt vời này miễn phí, cùng với một loạt các mẫu khác. Những bố cục này có sẵn ở định dạng JSON và có thể nhanh chóng được nhập vào Thư viện Divi và thêm vào một trang. Những bố cục này có thể được sử dụng trên nhiều trang web như bạn muốn.

Divi Shop Builder Layouts có thể được tải xuống miễn phí.

Đi tới trang giới thiệu bản demo này và bấm Tải xuống Tất cả Bố cục sau khi bạn đã mua plugin. Khi tải xuống xong, bạn sẽ tìm thấy tệp .zip có tên Woo-Shop-Demos-UNPACKAGE-THIS-FILE trong thư mục tải xuống của mình. Bấm đúp vào tệp để giải nén tệp, như được đề xuất bởi tên. Bạn sẽ tìm thấy các bố cục bên trong sau khi tất cả đã hoàn thành.

Bố cục Divi Shop Builder cần được cài đặt trước.

Truy cập menu Divi của trang web của bạn và chọn Thư viện Divi.

Bấm nút Nhập và Xuất bên trong Thư viện Divi để đưa ra cửa sổ bật lên. Chọn bố trí Woo Shop + demo bạn muốn từ máy tính của mình bằng cách bấm tùy chọn Nhập.

HÌNH ẢNH

Bài học này có hai bố cục khác nhau:

• Demo 5 cho Woo Shop and Module (ví dụ về cốc và áo phông, được hiển thị ở đầu bài đăng này)
• Bản demo 7 của Mô-đun Woo Shop Plus (ví dụ về rau, được hiển thị ở đầu phần này)

Cho phép đủ thời gian để cài đặt hoàn thành. Khi bạn hoàn thành, bạn sẽ nhận thấy rằng tất cả các bố cục đã được đưa vào Thư viện Divi của bạn và đã sẵn sàng để sử dụng!

HÌNH ẢNH

Bố cục cho Divi Shop Builder

Tạo trang mới và cho phép Divi Builder sử dụng các mẫu Divi Shop Builder. Hai trình diễn xem danh sách sản phẩm WooCommerce này là cả hai phần; bấm tab Thêm từ Thư viện khi tạo nhóm mới để xem hai mô-đun dạng xem danh sách.

HÌNH ẢNH

Hai cuộc biểu tình miễn phí này sẽ giúp bạn tiết kiệm rất nhiều thời gian trong quá trình phát triển. Bạn có thể điều chỉnh các lựa chọn trong tab Sản phẩm sau khi chúng đã được cài đặt để chọn cấu hình ưa thích của bạn. Bạn có thể đi đến tab Thiết kế và thử nghiệm các tùy chọn phong cách khác nhau cho mỗi yếu tố để thay đổi một vài khía cạnh thiết kế.

Những suy nghĩ để kết thúc

Không nhìn xa hơn plugin Divi Shop Builder nếu bạn muốn xây dựng chế độ xem sản phẩm thực sự có một không hai cho cửa hàng trực tuyến của mình. Tạo chế độ xem danh sách duy nhất cho các sản phẩm WooCommerce của bạn rất đơn giản, nhanh chóng và không có mã, như bạn vừa thấy.

Đây chỉ là một trong nhiều tính năng của plugin. Tạo kiểu trang giỏ hàng, tạo trải nghiệm thanh toán riêng biệt và nhiều hơn nữa!

We hope you had fun creating a lovely WooCommerce product list display. Vui lòng đăng bất kỳ thắc mắc nào bạn có về plugin Divi Shop Builder trong phần bình luận bên dưới. Nếu bạn có yêu cầu tính năng, đừng ngần ngại liên hệ với nhóm hỗ trợ của chúng tôi.

Nếu bạn đã mua plugin và sử dụng nó để tạo chế độ xem danh sách, hãy đưa liên kết đến các sản phẩm WooCommerce của bạn vào dạng xem danh sách; Chúng tôi rất muốn xem những gì bạn nghĩ ra!