Trang chủ WordpressWordpress Plugin [Woocommerce] Thêm hiệu ứng zoom ảnh sản phẩm

[Woocommerce] Thêm hiệu ứng zoom ảnh sản phẩm

bởi Thạch Phạm
10 bình luận 6295 views
Khuyến mãi hosting

https://www.youtube.com/watch?v=w9rg-euEq1E

YITH Woocommerce Zoom Magnifier là một tính năng có thể phù hợp với bất cứ một gian hàng điện tử nào, vì nó sẽ giúp khách xem ảnh sản phẩm rõ hơn, chi tiết hơn nhờ vào tính năng tự phóng to ảnh khi rê chuột vào ảnh đại diện trong trang sản phẩm như ảnh dưới.

yith-zoom-magnifier-01

Dĩ nhiên để cài plugin này, bạn nên cài plugin YITH Essential Kit for Woocommerce #1 vào, sau đó vào YITH Plugins -> YITH Essential Kit for Woocommerce #1 và tìm plugin YITH WooCommerce Zoom Magnifier để cài vào.

yith-zoom-magnifier-02

Sau khi cài xong, các sản phẩm của bạn đã tự động có hiệu ứng sẵn, nhưng nó còn cung cấp một phần gọi là khu vực tùy chỉnh của plugin này để bạn có thể thiết lập lại các tùy chọn tại YITH -> Zoom magnifier.

yith-zoom-magnifier-03

Ý nghĩa các tùy chọn:

General Settings

  • Activate YITH WooCommerce Zoom Magnifier: Kích hoạt hiệu ứng zoom ảnh cho sản phẩm.
  • Activate on mobile device: Kích hoạt hiệu ứng trên điện thoại di động.
  • Forced Image Size: Ép hình ảnh phải hiển thị kích thước phù hợp với plugin này, nên chọn nếu bạn muốn hiển thị tốt.

Magnifier Settings

  • Zoom Box Width: Chiều rộng của khu vực hiển thị ảnh ở chế độ zoom.
  • Zoom Box Height: Chiều rộng của khu vực hiển thị ảnh ở chế độ zoom, nên để là auto.
  • Image size: Kích thước hình ảnh của ảnh đại diện sản phẩm.
  • Zoom Box Position: Vị trí hiển thị zoom box.
  • Zoom Box Position for mobile devices: Vị trí hiển thị zoom box cho thiết bị di động.
  • Loading label: Chữ hiển thị khi nó đang loading.
  • Lens Opacity: Độ mờ của lens phóng to.
  • Blur: Kích hoạt tính năng tự làm mờ.

Slider Settings

  • Activate Slider: Kích hoạt tính năng slide ảnh cho ảnh thu nhỏ bên trong sản phẩm.
  • Activate Responsive Slider: Kích hoạt slide cho Responsive.
  • Items: Số lượng ảnh thu nhỏ hiển thị ở slide.
  • Circular carousel: Bật tính năng khi xem hết slide thì slide kế tiếp sẽ là slide đầu tiên.
  • Infinite carousel: Tương tự như ở trên nhưng chưa hiểu lắm về mô tả của nó.

Chỉ vậy thôi, bạn có thể thiết lập lại các tùy chọn theo ý muốn của mình là được.

10 bình luận

Có thể bạn quan tâm

5 1 vote
Article Rating
guest
10 Comments
mới nhất
cũ nhất đánh giá nhiều
Inline Feedbacks
View all comments
123giadung

Nút này có thay thế cho nút Zoom mặc định của theme Flatsome không nhỉ?

Jenny Pham

anh cho hỏi, em mu làm hiệu ứng như sau: khi rê chuot vào hình đại diện sản phẩm sẽ hiện chữ lên là gì và cách làm.
Thanks

Trường

Mình có trang web giới thiệu sản phẩm, cài cái này vào rồi, nhưng vào chi tiết sản phẩm thì mới phóng to được ảnh. Mình muốn hỏi là có cái nào mà rê chuột vào sản phẩm từ trang chủ hay trang danh mục nó đều phóng to anh ra không ạ?

Minh

anh có nhận làm web không ạ

Hoa

Bạn ơi cho mình hỏi xíu. Mình đã cài plugin này theo đúng hướng dẫn như trên. Nhưng không hiểu sao khi load lại sản phẩm thì vẫn không zoom được. Mình đang chạy trên localhost ạ 🙁

canh

Hey zà. Hỏi đại ở đây vậy. A Thạch cho hỏi e cần tìm cái plugin hiển thị hình ảnh woocommerce nào có thể cho hình ảnh hiển thị trên điện thoại dạng full screen ấy. Popup cũng được. Hiện giờ thì nó cũng popup, nhưng hình cái nút next/privius bị tuột mất tiêu, vuốt cũng không cho. Xài vậy ức chế lắm.

Pham Trung

Chào anh Thạch
mình sử dụng plugin này nhưng thấy nó làm giảm tốc độ load web đáng kể, bình thường mình ko dùng plugin này thì load web khoảng 4 giây là xong, bật plugin lên thì load đến 25 giây mới xong trang web, web sử dụng themes bazar mua từ themeforest. Anh có thể chỉ giúp plugin zoom nào tối ưu hơn?

Ân Nghĩa

Anh ơi cho em hỏi, sao khi em chỉnh cái lens kích thướt 75×75 thì cái hình bên phải nó theo kích thướt như vậy ko ạ

Hải Phạm

A Thạch cho e hỏi e đang dùng plugins này, có cách nào làm cho slide sản phẩm nhỏ bên dưới chạy tự động không a?

Kiệt

Mình sử dụng plugin này xong sản phẩm bị x2 ảnh đại diện có cách nào khắc phục không ạ? (Ví dụ ảnh mình để 1 ảnh đại diện + 1 ảnh thêm, thì xài plugin này tự nhiên chỗ ảnh lúc bấm vào xem thành 3)

10
0
Would love your thoughts, please comment.x
()
x