connect-telegram

Trước / Sau Trình so sánh sản phẩm Slider

Tổng quan

Trình so sánh sản phẩm Trước / Sau Slider là một tiện ích mở rộng cho WooCommerce cho phép chủ cửa hàng hiển thị hình ảnh trước và sau của sản phẩm. Những hình ảnh so sánh này được hiển thị trên trang sản phẩm đơn trong khu vực hình ảnh nổi bật truyền thống.


Cài đặt

Một khi bạn đã mua Trình so sánh sản phẩm Trước / Sau Slider, bạn có thể tải xuống tiện ích mở rộng từ email xác nhận hoặc Tài khoản WooCommerce của bạn. Để cài đặt nó, hãy làm theo các bước sau:

  1. Đảm bảo rằng WooCommerce đã được cài đặt & hoạt động
  2. Đi đến Plugins > Add New > Upload
  3. Chọn tệp ZIP bạn vừa tải về
  4. Nhấp vào Cài đặt ngay, sau đó kích hoạt

Sau khi bạn đã cài đặt và kích hoạt tiện ích mở rộng, điều hướng đến WooCommerce > Settings > Products > Before / After Slider để cấu hình cài đặt hiển thị cho các thanh trượt. Điều chỉnh các slide riêng lẻ hoặc trên cơ sở từng sản phẩm, vui lòng điều hướng đến Products > All Products > Your Before/After Slider Product > Before / After Slider.

Thông tin thêm tại Cài đặt và Quản lý Tiện ích mở rộng .


Thiết lập và Cấu hình

Trình so sánh Slider – Cài đặt toàn cửa hàng

Để cấu hình cài đặt hiển thị trình thanh trượt cho tất cả sản phẩm, điều hướng đến WooCommerce > Settings > Products > Before / After Slider :

  • Default offset : Phần trăm hình ảnh ban đầu được hiển thị khi trình thanh trượt tải (mặc định là 70%)
  • Orientation : Hướng trình thanh trượt có thể là ngang hoặc dọc (mặc định là ngang)
  • Before label : Văn bản để sử dụng trên hình ảnh “trước”
  • Before label background : Màu nền để sử dụng trên nhãn “trước”
  • Before label text color : Màu văn bản để sử dụng trên nhãn “trước”
  • After label : Văn bản để sử dụng trên hình ảnh “sau”
  • After label background : Màu nền để sử dụng trên nhãn “sau”
  • After label text color : Màu văn bản để sử dụng trên nhãn “sau”

Trình so sánh Slider – Cài đặt theo từng sản phẩm

Để cấu hình hình ảnh trình thanh trượt trước / sau trên cơ sở từng sản phẩm , điều hướng đến Products > All Products > Your Before/After Slider Product > Before / After Slider . Một bảng tải ảnh mới sẽ xuất hiện ở phía bên phải của trang chỉnh sửa sản phẩm (trong khu vực quản trị).

  • Before Image : Hình ảnh “trước” thường là hình ảnh gốc của sản phẩm / dịch vụ trước khi mua hoặc áp dụng.
  • Hình ảnh sau: Hình ảnh “sau” thường là hình ảnh mới của sản phẩm / dịch vụ sau khi sản phẩm của bạn được mua hoặc áp dụng.

Lưu ý: Để có kết quả tốt nhất, chúng tôi khuyến nghị cả hai hình ảnh trước và sau có cùng kích thước.


Sử dụng Trình so sánh Trước / Sau

Trên trang sản phẩm đơn (ở phía người dùng), khách hàng sẽ thấy trình so sánh trước / sau khi những điều kiện sau đây được thoả mãn:

Images

  • Đã tải lên một hình ảnh “Trước” trên bảng tải ảnh đã mô tả trong “Cài đặt từng sản phẩm”
  • Một hình ảnh “Sau” đã được tải lên.

Labels

  • Nhãn trước / sau chỉ xuất hiện khi di chuột qua trình so sánh trượt. Những nhãn này sẽ mờ đi ngay khi bắt đầu thao tác kéo.

Câu hỏi thường gặp

Can I hide the before / after labels on the front-end slider?

Có – Để ẩn các trình thanh trượt, điều hướng đến WooCommerce > Cài đặt > Sản phẩm > Trình so sánh Trước / Sau và xóa văn bản từ Nhãn trước Nhãn sau cài đặt khu vực.

Will this work with my theme?

Đúng – Chúng tôi đã thử nghiệm Trình so sánh sản phẩm Trước / Sau với nhiều loại giao diện khác nhau. Nếu trang web của bạn sử dụng việc ghi đè mẫu trong chủ đề con hoặc chủ đề chính, hãy đảm bảo nó chứa woocommerce_before_single_product_summary hook trong woocommerce/templates/content-single-product.php .

Ngoài ra, bạn cũng có thể mua tiện ích mở rộng này và thử nghiệm nó trên trang web của bạn. Nếu trình thanh trượt không xuất hiện, hãy liên hệ với chúng tôi để nhận thêm hỗ trợ hoặc yêu cầu hoàn tiền.

Can I hide the image zoom button?

Có – biểu tượng phóng to hình ảnh (nút kính lúp) có thể được ẩn bằng CSS tùy chỉnh. Thêm CSS tùy chỉnh sau trong cài đặt WordPress của bạn tại Giao diện > Tùy chỉnh > CSS bổ sung :

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {  display: none;}

Leave a Reply

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

preloader