Nguyễn Minh Hùng Blog

  • Cảm ơn trái tim
  • Review tùm lum
  • Sản phẩm linh tinh
  • Dành cho website
Bạn đang ở: Trang chủ / Dành cho website / Tối ưu lightbox Woocommerce – Tăng trải nghiệm người dùn ...

Tối ưu lightbox Woocommerce – Tăng trải nghiệm người dùng

Tháng Chín 13, 2022

Chỉ nói tới ảnh.

Lightbox là 1 lớp màn hình khác bật lên khi người dùng nhấn vào ảnh thu nhỏ, giúp họ xem được ảnh to hơn và tập trung hơn.

Hiểu nôm na đó là 1 chế độ xem ảnh.

Như khi bạn nhấn vào 1 trong các ảnh bên dưới:

Do Bong Noi Dung
Do Bong Noi Dung
Shadow Web 1
Shadow Web 1
Xu Huong Thiet Ke Web 2022
Xu Huong Thiet Ke Web 2022

Điều người làm web bán hàng ít để ý, nhưng nó quan trọng

Lightbox ảnh sản phẩm đơn của trang web dùng Woocommerce (Wordpress)

Trên máy tính không có gì chê.

Nhưng điện thoại thì không hề.

Khi nhấn vào ảnh sản phẩm để mở to ra (lightbox) và muốn tắt chế độ này đi thì chỉ có cách nhấn vào dấu x.

Nhưng người dùng thì lại có thói quen Back bằng cử chỉ, nó sẽ khiến cho trình duyệt back lại trang trước đó thay vì chỉ tắt chế độ xem ảnh ở trang sản phẩm hiện tại.

Điều này sẽ càng tồi tệ hơn khi bạn chia sẻ URL sản phẩm lên Facebook.

Người dùng sử dụng thao tác “Back” chỉ để tắt xem ảnh, nhưng trình duyệt đã đưa họ trở lại Facebook luôn.

Thiệt đau lòng.

Giống như bạn mời họ vào nhà, cho họ xem vài tẩm ảnh xong rồi tống họ đi nhanh chóng.

Video quay thao tác trên điện thoại chạy hệ điều hành Android 13.

YouTube video

Đi tìm giải pháp

Chúng ta sẽ thêm liên kết sâu (deep linking) vào lightbox.

Tức là mỗi ảnh khi ở chế độ lightbox đều có URL riêng.

Như thế này:

Them Deeplink Vao Lightbox

Nhờ đó, mỗi lần người dùng thực hiện thao tác “Back”, nó sẽ chỉ tắt chế độ xem ảnh chứ không rời khỏi trang.

Mình search không ra cách nào để thêm deep linking vào lightbox mặc định của Woocommerce cả.

Cách duy nhất mình tìm ra đó là sử dụng 1 plugin Lightbox khác để thay thế.

Đây là cách thực hiện

Bước 1: Tắt lightbox mặc định của Woocommerce

Chèn đoạn code bên dưới vào cuối file Functions.php của Child theme

add_action( 'wp', 'tu_disable_wc_lightbox', 20 );
function tu_disable_wc_lightbox() {
remove_theme_support( 'wc-product-gallery-lightbox' );
}

Bước 2: Cài đặt plugin Lightbox with PhotoSwipe

Đây là plugin miễn phí nên bạn chỉ cần tìm trong kho plugin Wordpress cài là được.

Plugin Lightbox With Photoswipe

Kích hoạt xong là xong. Đây là kết quả:

YouTube video

Khích lệ tình thần bằng vote 5 sao

Xếp hạng trung bình 5 / 5. Lượt Vote 2

Leave a Comment · Dành cho website

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

  • Email
  • Facebook
  • Instagram
  • YouTube
Nguyễn Minh Hùng

Yêu thời ông bà anh,
sống đời thản nhiên xanh.

Hiền.
Trong sáng.
Biến thái.

Bài viết tốn sức

Plugin FlyingPress vừa tăng tốc website vừa tăng điểm Pagespeed

Vikunja self-hosted (step by step)

Cách Giảm dung lượng ảnh – Nhẹ hơn, đẹp hơn

Chuyển Docudanang.com.vn từ Vultr sang Amazon Lightsail

Tăng tốc website – Tối ưu hóa Wordpress (Siêu Checklist)

Water, is taught by thirst – Hiểu và dịch thơ

NỘI DUNG CHÍNH

  1. Điều người làm web bán hàng ít để ý, nhưng nó quan trọng
  2. Đi tìm giải pháp
  3. Đây là cách thực hiện
    1. Bước 1: Tắt lightbox mặc định của Woocommerce
    2. Bước 2: Cài đặt plugin Lightbox with PhotoSwipe

logo chữ ký nguyenminhhung“Trưởng thành không phải là sự rành rẽ thói đời, rồi biến hóa bản thân từ đơn giản đến phức tạp.
Trưởng thành chính là từ trong sự phức tạp của cuộc đời vẫn giữ cho bản thân đơn thuần, biết hài lòng và vui vẻ với những điều giản đơn nhất.”

Copyright © 2023 · Genesis Theme | AZDIGI Hosting