Trong kỷ nguyên số, một website thương mại điện tử không chỉ cần cung cấp sản phẩm tốt mà còn phải mang lại trải nghiệm mua sắm mượt mà, trực quan. Một trong những vấn đề thường gặp trên các trang sản phẩm có biến thể của WooCommerce là sự trùng lặp thông tin, gây khó hiểu và giảm hiệu quả tương tác với khách hàng. Bài viết này sẽ phân tích sâu về giải pháp tinh chỉnh hiển thị giá và mô tả biến thể, mang lại sự gọn gàng và tinh tế cho website của bạn.

Tại sao cần tinh chỉnh hiển thị biến thể sản phẩm?

Mặc định, WooCommerce thường hiển thị giá và mô tả ngắn cho sản phẩm có biến thể ở hai vị trí khác nhau. Khi người dùng chọn một biến thể (ví dụ: kích cỡ, màu sắc), thông tin mới sẽ xuất hiện, nhưng thông tin gốc có thể vẫn còn đó, hoặc hiển thị một cách không đồng nhất. Điều này tạo ra sự lộn xộn về mặt thị giác và gây ra nhiều thách thức về trải nghiệm người dùng (UX) và hiệu quả chuyển đổi:

• Gây nhiễu thông tin: Việc có hai mức giá hoặc hai đoạn mô tả ngắn cùng lúc khiến người dùng phải mất thêm thời gian để xác định thông tin chính xác, làm tăng gánh nặng nhận thức.
• Giảm tính chuyên nghiệp: Một giao diện lộn xộn có thể khiến khách hàng cảm thấy website thiếu sự chăm chút, từ đó ảnh hưởng đến niềm tin vào thương hiệu.
• Kéo dài quá trình ra quyết định: Sự không rõ ràng về giá hoặc mô tả có thể khiến khách hàng do dự, mất nhiều thời gian hơn để đưa ra quyết định mua hàng, thậm chí bỏ giỏ hàng.

Việc tinh chỉnh hiển thị biến thể không chỉ đơn thuần là loại bỏ các phần tử thừa mà còn là một chiến lược quan trọng để:

• Nâng cao sự rõ ràng và trực quan: Đảm bảo khách hàng luôn thấy thông tin chính xác nhất cho biến thể họ đã chọn.
• Tối ưu hóa hành trình mua sắm: Giảm thiểu ma sát, giúp khách hàng dễ dàng tìm thấy và hiểu sản phẩm mong muốn.
• Cải thiện tỷ lệ chuyển đổi: Một trải nghiệm mượt mà, dễ hiểu sẽ khuyến khích khách hàng hoàn tất giao dịch.

Cơ chế hoạt động của giải pháp này là gì?

Giải pháp này sử dụng kết hợp JavaScript và CSS để kiểm soát động việc hiển thị giá và mô tả biến thể.

JavaScript: Lắng nghe và cập nhật động

Đoạn mã JavaScript được đặt trong Flatsome > Advanced > Global Settings > Footer Script đóng vai trò là “bộ não” điều khiển logic hiển thị:

• Phát hiện form biến thể: Mã kiểm tra sự tồn tại của form .variations_form.cart – đây là dấu hiệu nhận biết một sản phẩm có biến thể.
• Lưu trữ giá gốc: Trước khi bất kỳ biến thể nào được chọn, mã sẽ lưu lại giá sản phẩm mặc định (oldPrice). Điều này đảm bảo rằng khi người dùng bỏ chọn biến thể, giá gốc sẽ được khôi phục.
• Lắng nghe sự kiện biến thể:
  • $(this).on('show_variation', function (e, variation) { ... });: Khi một biến thể được chọn, sự kiện show_variation được kích hoạt. Mã sẽ nhận dữ liệu của biến thể (variation), bao gồm variation.price_html (giá của biến thể) và variation.variation_description (mô tả của biến thể).
  • Giá mới sẽ được cập nhật vào phần tử .price-wrapper > .price.
  • Mô tả biến thể sẽ được thêm động vào phần tử .product-short-description bên trong một div có class devvn_variation_description để dễ dàng quản lý và loại bỏ sau này.
• $(this).on('hide_variation', function (e) { ... });: Khi người dùng bỏ chọn biến thể, sự kiện hide_variation được kích hoạt. Mã sẽ khôi phục giá gốc đã lưu và loại bỏ mô tả biến thể động.

Cơ chế này đảm bảo rằng thông tin giá và mô tả luôn được cập nhật theo thời gian thực một cách linh hoạt, chỉ hiển thị những gì người dùng cần thấy tại thời điểm đó.

CSS: Ẩn đi các phần tử thừa

Đoạn mã CSS được chèn vào Flatsome > Advanced > Custom Css > All Screen có nhiệm vụ ẩn đi các phần tử mặc định của WooCommerce mà chúng ta không muốn hiển thị:

• .woocommerce-variation-description, .woocommerce-variation-price { display: none; }: Dòng này là cốt lõi, đảm bảo rằng các khu vực hiển thị mô tả và giá biến thể mặc định của WooCommerce sẽ bị ẩn hoàn toàn khỏi tầm nhìn. Điều này ngăn chặn sự trùng lặp với thông tin được chèn động bằng JavaScript.
• .product-short-description > p:last-of-type { margin-bottom: 0; }: Đây là một tinh chỉnh nhỏ để loại bỏ khoảng trống thừa ở cuối mô tả ngắn, giúp giao diện gọn gàng hơn.

Sự kết hợp giữa JavaScript động và CSS tĩnh tạo nên một giải pháp mạnh mẽ, cho phép kiểm soát hoàn toàn cách thông tin biến thể được trình bày.

Làm thế nào để áp dụng cho các theme khác ngoài Flatsome?

Mặc dù giải pháp này được viết riêng cho theme Flatsome với layout mặc định, bạn hoàn toàn có thể tùy chỉnh nó cho các theme WordPress/WooCommerce khác. Giá trị cốt lõi nằm ở việc hiểu và điều chỉnh các CSS selector trong mã JavaScript và CSS.

Để thực hiện điều này, bạn cần sử dụng Công cụ Phát triển (Developer Tools) có sẵn trong trình duyệt của mình (thường có thể truy cập bằng cách nhấn F12 hoặc chuột phải > “Inspect Element”):

1. Xác định form biến thể: Tìm phần tử form có class tương tự variations_form.cart.
2. Xác định phần tử chứa thông tin sản phẩm: Tìm phần tử cha gần nhất bao bọc toàn bộ thông tin sản phẩm (giá, mô tả, nút thêm vào giỏ hàng). Trong Flatsome là .product-info.summary.
3. Xác định phần tử hiển thị giá: Tìm phần tử div hoặc span chứa giá sản phẩm, ví dụ .price-wrapper > .price.
4. Xác định phần tử chứa mô tả ngắn: Tìm phần tử div hoặc p chứa mô tả ngắn của sản phẩm, ví dụ .product-short-description.
5. Xác định các phần tử biến thể mặc định của WooCommerce: Tìm các phần tử có class như .woocommerce-variation-description và .woocommerce-variation-price mà bạn muốn ẩn đi.

Sau khi đã xác định được các selector phù hợp cho theme của mình, bạn chỉ cần thay thế các selector trong đoạn code JavaScript và CSS tương ứng. Quá trình này đòi hỏi một chút kiến thức về HTML/CSS và cách sử dụng Developer Tools, nhưng nó hoàn toàn khả thi và mang lại sự linh hoạt cao.

Những lưu ý quan trọng khi triển khai code tùy chỉnh

Việc thêm mã tùy chỉnh vào website luôn đi kèm với những cân nhắc để đảm bảo tính ổn định và bảo trì:

• Sử dụng Child Theme hoặc Plugin tùy chỉnh: Thay vì chỉnh sửa trực tiếp file của theme chính, hãy sử dụng Child Theme để thêm code. Điều này giúp bảo vệ các thay đổi của bạn khỏi bị mất khi theme chính được cập nhật. Lý tưởng hơn, bạn có thể đóng gói code này vào một plugin tùy chỉnh nhỏ.
• Kiểm tra kỹ lưỡng: Sau khi triển khai code, hãy kiểm tra thật kỹ trên nhiều trình duyệt và thiết bị khác nhau để đảm bảo mọi thứ hoạt động đúng như mong đợi và không gây ra xung đột với các plugin hoặc tính năng khác của website.
• Hiệu suất: Đoạn mã này khá nhẹ và không ảnh hưởng đáng kể đến hiệu suất tải trang. Tuy nhiên, nguyên tắc chung là luôn ưu tiên code sạch, tối ưu.

Kết luận

Việc tinh chỉnh hiển thị giá và mô tả biến thể sản phẩm trong WooCommerce, đặc biệt là với theme Flatsome, là một ví dụ điển hình về cách những thay đổi nhỏ nhưng có chủ đích có thể tạo ra tác động lớn đến trải nghiệm người dùng và hiệu quả kinh doanh. Bằng cách loại bỏ sự lộn xộn và cung cấp thông tin rõ ràng, trực quan, bạn không chỉ làm cho website của mình trở nên chuyên nghiệp hơn mà còn giúp khách hàng đưa ra quyết định mua sắm nhanh chóng và tự tin hơn. Hãy mạnh dạn áp dụng giải pháp này và kiểm tra kết quả để thấy sự khác biệt mà nó mang lại.