Use Case: Tạo Bộ Xây Dựng Kit Theo từng Bước

Bộ xây dựng kit theo từng bước giúp cho việc cấu hình sản phẩm có thể cấu hình phức tạp trở nên dễ dàng hơn bằng cách chia quá trình cấu hình thành các bước nhỏ. Trong hướng dẫn này, bạn sẽ học cách tạo Build Your Skateboard sản phẩm tổng hợp, như đã thấy trong Hướng Dẫn Chủ Cửa Hàng .

Một trình tạo ván trượt tùy chỉnh.

Plugins/Extensions Used

Cấu hình

Để cấu hình Build Your Skateboard sản phẩm tổng hợp, làm theo các bước sau:

  1. Create the Composite
  • Đi đến Products và nhấp Add New .
  • Nhập một Title , Description Short Description .
  • Tìm đến bảng Product Data và chọn loại Composite product .
  1. Define Components and Component Options

Về cơ bản, một ván trượt bao gồm:

  • một deck (bộ phận thực sự của bộ kiện),
  • một bộ gồm wheels ,
  • một bộ gồm trucks để gắn bánh xe lên bàn,
  • một bộ bánh xe bearings ,
  • một số mounting hardware và,
  • một số grip tape tùy chọn.

Khách hàng sẽ sử dụng trình tạo ván trượt của chúng tôi để tạo ra ván trượt mà họ muốn bằng cách chọn một sản phẩm từ mỗi loại phần này. Hướng dẫn này giả định rằng loại sản phẩm Deck , Trucks , Wheels , Bearings , Hardware Grip Tape đã tồn tại và sản phẩm đã được tạo và thêm vào chúng.

  • Tìm đến bảng Product Data và đi đến Components .
  • Nhấp Add Component để tạo một Component và đặt tên cho nó là Deck .
  • Tìm đến trường Component Options , chọn Select categories trong danh sách thả xuống và chọn loại Decks .
  • Lặp lại các bước b-c cho các Component Trucks , Wheels , Bearings , Hardware Grip Tape .
Ván trượt tùy chỉnh tổng hợp.

  1. Configure Pricing Options

Mỗi ván trượt tùy chỉnh có giá chỉ bằng tổng giá của các phần thành phần, trong khi dịch vụ lắp ráp được cung cấp miễn phí:

  • Đi đến tab Components , mở rộng mỗi Component và đánh dấu vào ô Priced Individually .
  • Đi đến tab General và đảm bảo rằng trường Regular Price Sale Price đều trống.

Lưu ý rằng giá của tất cả sản phẩm có trong Component ván trượt must be positive : WooCommerce không hỗ trợ giá sản phẩm khoản mục giỏ hàng âm.

Configuring the Composite Price

Khi đang xử lý các sản phẩm tổng hợp phức tạp có chứa nhiều lựa chọn Component, hãy tránh chọn tùy chọn Catalog Price > Calculate from/to . Tìm kiếm cấu hình có giá thấp nhất có thể là quá trình tiêu tốn nguồn lực nhiều. Trong những trường hợp như vậy, chúng tôi rất khuyến nghị chọn hoặc tùy chọn Use defaults hoặc tùy chọn Hide .

  1. Configure Shipping Options

Khi hàng order ván trượt tùy chỉnh được xử lý, các phần được lựa chọn luôn luôn assembled together : Khách hàng luôn nhận được một ván trượt hoàn toàn hoạt động. Ngoài ra, trọng lượng của một ván trượt hoàn chỉnh khoảng bằng tổng trọng lượng của tất cả các phần được sử dụng để lắp ráp nó.

  • Tìm đến tab Product Data > Shipping và chọn tùy chọn Composite Type > Assembled .
  • Nhập Dimensions và, nếu muốn, nhập một Shipping Class .
  • Để trường Weight trống và chọn tùy chọn Assembled Weight > Preserve để tính toán trọng lượng của ván trượt hoàn chỉnh dựa trên các phần đã chọn.
  1. Configure Layout Options

Việc cá nhân hóa một ván trượt mà không xem các thiết kế có sẵn hoặc đọc mô tả phần không phải là một trải nghiệm rất dễ chịu.

Kiểu Thumbnails khiến các tùy chọn Component trông giống như danh mục cửa hàng WooCommerce của bạn. Các tùy chọn được phân trang và có thể được sắp xếp / lọc.

Các trình xây dựng theo từng bước được tạo bởi Sản phẩm tổng hợp thường được sắp xếp bằng sử dụng tùy chọn Stepped hoặc tùy chọn Progressive . Phong cách Stepped phù hợp hơn trong tình huống này, do độ phức tạp và độ dài của thông tin được trình bày trong từng Component.

Hiển thị cho khách hàng một bản tóm tắt trực tiếp về lựa chọn của họ là một cách khác để cải thiện trải nghiệm của họ. Trong trường hợp này, tiện ích Tóm tắt Sản phẩm tổng hợp đã được thêm vào thanh bên của chủ đề Storefront .

  • Đi đến tab Components .
  • Chọn phong cách Stepped .
  • Mở rộng tất cả các Component và, trong mỗi một, tìm đến danh sách thả xuống Options Style và chọn Thumbnails .
  • Đi đến Appearance > Widgets . Tìm đến tiện ích WooCommerce Composite Product Summary và thêm nó vào thanh bên của bạn.
  1. Add Finishing Touches

Chọn Hình ảnh Sản phẩm, thêm một số mục Gallery và cuối cùng, điều chỉnh bố cục của trang sản phẩm tổng hợp.

Layout Tweaks

Hầu hết các chủ đề WordPress tương thích với WooCommerce mặc định sử dụng bố cục trang sản phẩm two-column : Cột đầu tiên chứa hình ảnh sản phẩm chính và galerie, trong khi cột thứ hai dành cho chi tiết sản phẩm và tùy chọn. Phương pháp tiết kiệm không gian này hoạt động tốt cho Sản phẩm Đơn giản và Biến đổi, những sản phẩm thường chỉ chứa một số phần tử form nhỏ.

Ngược lại, Sản phẩm tổng hợp thường có những form dài đòi hỏi nhiều bước/ tương tác để hoàn tất. Đôi khi, bạn có thể thấy rằng bố cục hai cột của chủ đề làm cho Sản phẩm tổng hợp trở nên chật chội về không gian và khó tương tác. Một số chủ đề cho phép bạn sửa đổi bố cục của từng trang sản phẩm để display product details and options in a single column . Một ví dụ, nếu bạn đang sử dụng Storefront , plugin Storefront Powerpack bao gồm các tùy chọn để:

  • cấp phát nhiều độ rộng cho nội dung form sản phẩm, hoặc
  • chồng nội dung form sản phẩm dưới hình ảnh sản phẩm chính và galerie.

Nếu bạn đang gặp vấn đề về bố cục với một Sản phẩm tổng hợp và chủ đề của bạn không cung cấp bất kỳ tùy chọn bố cục sản phẩm nào:

  1. Điều hướng đến Product Data > Components .
  2. Tìm đến tùy chọn Form Location .
  3. Chọn Before Tabs để chồng nội dung form trước các tab sản phẩm.

Trong hầu hết các trường hợp, việc chọn Before Tabs sẽ cấp phát toàn bộ độ rộng trang cho nội dung form của Gói của bạn. Tuy nhiên, lưu ý rằng tùy chọn Before Tabs không được đảm bảo sẽ hoạt động đ reliably với tất cả các chủ đề!

Kết quả tương tự có thể đạt được với plugin miễn phí Bố cục Sản phẩm Chồng của WooCommerce .

Kết quả

Câu hỏi & Hỗ trợ

Có một câu hỏi? Vui lòng điền vào mẫu này mẫu dành cho trước khi mua .
Đã mua và cần hỗ trợ? Hãy liên lạc với chúng tôi qua Trung tâm Hỗ trợ!

Leave a Reply

Your email address will not be published. Required fields are marked *

preloader