Bỏ qua đến nội dung chính

Cách thêm một thông tin về sản phẩm WooC Commerce với Divi

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 701.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Khi tạo trang sản phẩm trong Divi, chúng ta có thể sử dụng mô-đun accordion để hiển thị thông tin sản phẩm bằng nội dung động. Điều này sẽ cung cấp cho bạn một thiết kế độc đáo cho các trang sản phẩm, đồng thời duy trì không gian có giá trị trên trang.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sử dụng tính năng nội dung động của Divi để tạo đàn accordion thông tin sản phẩm, cũng như cách thiết kế đàn accordion (và nội dung của nó) bằng Divi Visual Builder.

Chúng ta hãy bắt đầu.

khảo sát

Dưới đây là bản xem trước của thiết kế mà chúng tôi sẽ xây dựng trong hướng dẫn này.

Divi accordion thiết kế

Hãy nhớ rằng bạn phải thiết lập sản phẩm như được mô tả trong hướng dẫn này để đạt được kết quả tương tự.

Commencer

Để bắt đầu, bạn sẽ cần làm như sau:

  • Nếu bạn chưa làm như vậy, hãy cài đặt và kích hoạt chủ đề Divi đã cài đặt (hoặc plugin Divi Builder nếu bạn không sử dụng chủ đề Divi).
  • Cài đặt và kích hoạt plugin WooCommerce. Nếu bạn đang thiết lập WooCommerce lần đầu tiên, bạn sẽ cần chạy trình hướng dẫn thiết lập cơ bản để chuẩn bị cho cửa hàng của mình. Sau khi hoàn tất, bạn đã sẵn sàng để thêm các sản phẩm mới của mình.
  • Tạo một sản phẩm mới như hình dưới đây.

Thiết lập sản phẩm mẫu

Để định cấu hình sản phẩm mẫu cho hướng dẫn này, hãy chuyển đến Sản phẩm> Thêm mới. Đặt tiêu đề cho sản phẩm là “Massage (một buổi)” và nhấp để sử dụng Divi Builder.

Tạo một sản phẩm woocommerce divi 1

Sau đó cập nhật cài đặt trang sản phẩm và thông tin sản phẩm sau:

1. Trong Cài đặt trang Divi, chọn bố cục Không có thanh bên.

2. Thêm / chọn danh mục sản phẩm

3. Thêm hình ảnh sản phẩm

4. Thêm nội dung của mô tả.

5. Trong Dữ liệu sản phẩm, thay đổi loại sản phẩm thành Sản phẩm biến.

6. Thêm thuộc tính có tên “Loại” với các giá trị sau: Tiếng Thụy Điển | Đá nóng | Liệu pháp hương thơm | Mô sâu. Đảm bảo chọn "Được sử dụng cho các biến thể".

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Mô hình divi chiều rộng đầy đủ

7. Sau đó, trong tab Biến thể trong Chuyển đổi dữ liệu sản phẩm, hãy sử dụng mục nhập thả xuống để tạo các biến thể từ tất cả các thuộc tính.

Tạo các biến thể Woocommerce
Các biến thể của sản phẩm Woocommerce

8. Chọn "Đặt giá thông thường" từ menu thả xuống để đặt giá thông thường cho ba biến.

Xác định các biến thể giá thông thường woocommerce

9. Trong hộp thoại, nhập giá trị "50" và chọn OK.

Đặt giá trị giá thương mại điện tử

10. một Một khi bạn đã hoàn thành, lưu hoặc xuất bản sản phẩm.

Bây giờ bạn đã sẵn sàng để bắt đầu thiết kế bố cục của mình với Sản phẩm phù hợp tùy chỉnh.

Tạo đàn accordion Thông tin sản phẩm với nội dung động trong Divi

Bố cục sản phẩm mặc định hiển thị thông tin sản phẩm bằng cách sử dụng các mô-đun Woo khác nhau. Đối với ví dụ này, chúng tôi muốn sử dụng đàn accordion để hiển thị ba thông tin chính về sản phẩm: mô tả sản phẩm, thông tin sản phẩm bổ sung và đánh giá sản phẩm. Ba phần nội dung này hiện được hiển thị trong mô-đun các tab woo. Tất cả những gì chúng ta phải làm là loại bỏ mô-đun woo tabs và thay thế nó bằng một mô-đun đàn accordion có cùng thông tin được giới thiệu qua nội dung động.

Đây là cách để làm điều đó.

Đầu tiên, nhấp để sử dụng Divi trên hệ thống front-end để triển khai trình tạo trực quan. Sau đó, loại bỏ mô-đun Woo Tabs.

Xóa mô-đun woocommerce

Sau đó thêm một mô-đun Accordion mới để thay thế các tab.

Đàn accordion Woocommerce

Trong cửa sổ bật lên Cài đặt Accordion, nhấp vào biểu tượng bánh răng trên đàn accordion đầu tiên để mở cài đặt đàn accordion riêng lẻ.

Tham số Accordeon và divi

Nhập tiêu đề "Giới thiệu về sản phẩm".

Tiếp theo, di chuột qua hộp nhập nội dung nội dung và nhấp vào biểu tượng nội dung động.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Sử dụng nội dung woocommerce wordpress động

Chọn "Mô tả sản phẩm" từ danh sách nội dung động.

Mô tả sản phẩm woocommerce

Điều này sẽ hiển thị mô tả dài về sản phẩm chúng tôi đã xác định cho sản phẩm trên phụ trợ.

Khi đã có nội dung accordion đầu tiên, hãy mở cài đặt accordion thứ hai và cập nhật các thông tin sau:

  • Tiêu đề: Thông số kỹ thuật

Sau đó thêm nội dung động "Thông tin sản phẩm bổ sung" vào phần thân.

Khi nội dung accordion thứ hai đã sẵn sàng, hãy thêm một yếu tố accordion mới và cập nhật cài đặt accordion như sau:

  • Tiêu đề: Thông tin bổ sung

Sau đó thêm nội dung động "Đánh giá sản phẩm" vào phần nội dung để nhúng mục / nội dung đánh giá sản phẩm.

LƯU Ý: Đảm bảo bạn đã thêm ít nhất một bài đánh giá sản phẩm để xem nội dung trên trang trực tiếp.

Thiết kế sản phẩm và thỏa thuận nội dung với Divi

Bây giờ, accordion thông tin sản phẩm của chúng tôi có nội dung động để hiển thị thông tin sản phẩm, chúng tôi đã sẵn sàng tùy chỉnh nó bằng cách sử dụng cài đặt của mô-đun accordion tích hợp.

Mở cài đặt mô-đun Accordion và cập nhật các thông tin sau:

  • Màu biểu tượng: # ff9375
  • Sử dụng kích thước phông chữ biểu tượng: CÓ
  • Kích thước phông chữ biểu tượng: 26px
Biểu tượng phông chữ cấu hình accordions
  • Chuyển đổi màu nền: #ffffff
  • Mở tiêu đề văn bản Màu: #ff9375
  • Tiêu đề văn bản: #222222
  • Phông chữ: Lato
  • Phông chữ: In đậm
  • Tiêu đề Kiểu chữ: TT
  • Kích thước tiêu đề văn bản: 20px
  • Không gian của các chữ cái của tiêu đề: 0.2em
  • Chiều cao của dòng tiêu đề: 2em
Cấu hình bảng điều khiển Woocommerce
  • Phông chữ cơ thể: Lato
  • Kích thước văn bản cơ thể: 16px
  • Chiều cao cơ thể: 1.8em
Cấu hình phông chữ cơ thể đàn accordion Woocommerce
  • Màu văn bản liên kết: #ff9375

Điều này sẽ nhắm mục tiêu tất cả các liên kết bạn có trong nội dung động cho mỗi accordion, như xếp hạng sao.

Cấu hình màu liên kết Woocommerce
  • Màu văn bản của danh sách không có thứ tự: # ff9375
  • Kiểu kiểu danh sách không sắp xếp: Circle
  • Thụt lề mục danh sách không có thứ tự: 5%
  • Chiều rộng của đường viền: 0px
  • Chiều rộng của đường viền trên cùng: 1px
  • Màu của đường viền trên cùng: #222222
Cấu hình đường viền Accordion divi woocommerce

Và cho bước cuối cùng, hãy thêm một trích xuất css nhỏ để trích xuất lề mặc định giữa các tỷ lệ accordion.

Trên tab Nâng cao, thêm CSS sau vào phần tử Toggle:

margin-bottom: 0px;

Bây giờ chúng ta hãy nhìn vào thiết kế cuối cùng của đàn accordion thông tin sản phẩm.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Thông tin sản phẩm divi accordion

Điều chỉnh cuối cùng cho bố cục

Một số điều chỉnh có thể được thực hiện đối với bố cục để phù hợp với thiết kế của đàn accordion. Ví dụ: chúng tôi có thể điều chỉnh phông chữ của từng mô-đun thành Lato, thêm đường viền và bán kính đường viền tùy chỉnh xung quanh danh sách thả xuống biến và cập nhật nút Thêm vào giỏ hàng với màu nền đồng nhất Phù hợp với anh ta.

Sau khi thực hiện, đây là kết quả cuối cùng.

Thông tin sản phẩm divi accordion

Tôi đã bao gồm thiết kế này dưới dạng tải xuống miễn phí ở trên. Xin vui lòng kiểm tra nó cho chính mình. Lưu ý rằng bạn phải có cấu hình sản phẩm được mô tả trong hướng dẫn này để đạt được kết quả tương tự.

LƯU Ý: Màu mặc định của hầu hết các phần tử WooCommerce của sản phẩm trong Divi được kế thừa từ giá trị màu phụ của cài đặt tùy chỉnh của chủ đề. Có thể dễ dàng cập nhật màu thứ cấp này hơn khi các màu được chỉnh sửa theo ý muốn.

cuối cùng suy nghĩ

Như chúng ta đã biết, Woo Mods không phải là thứ duy nhất có thể được sử dụng để trích xuất thông tin sản phẩm động. Accordion Thông tin Sản phẩm là một ví dụ tuyệt vời về cách bạn có thể sử dụng bất kỳ mô-đun Divi nào để hiển thị thông tin sản phẩm một cách độc đáo và ngắn gọn. Hãy tự do khám phá các thiết kế đàn accordion mới, thú vị cho các trang sản phẩm của bạn. Và, tất nhiên, bạn có thể sử dụng nhiều mô-đun rocker thay vì một đàn accordion để đạt được kết quả tương tự.

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
1 cổ phiếu
cổ phiếu1
tweet
Enregistrer