Tạo liên kết trực tiếp đến tab sản phẩm trong WooCommerce

Nếu bạn đang vận hành một cửa hàng WooCommerce, việc tối ưu hóa trải nghiệm người dùng là vô cùng quan trọng. Đoạn code PHP và JavaScript được chia sẻ dưới đây sẽ giúp bạn tạo URL tùy chỉnh để kích hoạt mặc định các tab sản phẩm trực tiếp từ URL, mang lại trải nghiệm mua sắm thuận tiện hơn cho khách hàng của bạn.

Tính năng nổi bật

Đoạn code này cung cấp các tính năng sau:

• Cho phép bạn tạo liên kết trực tiếp đến các tab cụ thể (như tab đánh giá, mô tả, thông số kỹ thuật) thông qua hash URL
• Tự động cập nhật URL khi người dùng chuyển đổi giữa các tab
• Duy trì tab đã chọn khi người dùng làm mới trang hoặc sử dụng các nút điều hướng của trình duyệt
• Hoạt động liền mạch với cấu trúc tab mặc định của WooCommerce

Cách hoạt động

Khi thêm code này vào website WordPress của bạn, khách hàng có thể truy cập trực tiếp vào bất kỳ tab sản phẩm nào bằng cách sử dụng URL có dạng:

https://tenweb.com/ten-san-pham#reviews

Điều này đặc biệt hữu ích khi:

1. Bạn muốn hướng khách hàng trực tiếp đến các đánh giá sản phẩm từ email hoặc quảng cáo
2. Bạn cần liên kết đến thông số kỹ thuật cụ thể trong các bài viết blog
3. Bạn muốn cải thiện trải nghiệm người dùng bằng cách giảm số lần nhấp chuột

Giải thích code

Code hoạt động thông qua hai cơ chế chính:

1. Bắt sự kiện click tab: Khi người dùng nhấp vào tab, URL được cập nhật với hash tương ứng bằng cách sử dụng window.history.pushState
2. Xử lý hash URL: Khi trang được tải hoặc khi hash URL thay đổi, script sẽ:
   • Xác định tab từ hash URL
   • Loại bỏ trạng thái active từ tab hiện tại
   • Thiết lập trạng thái active cho tab mới
   • Ẩn tất cả nội dung tab và hiển thị nội dung tab được chọn

Cách triển khai

Để triển khai tính năng này trên website WordPress của bạn, bạn có thể:

1. Thêm đoạn code vào file functions.php của theme con (child theme)
2. Sử dụng plugin như “Code Snippets” để thêm đoạn code mà không cần chỉnh sửa file theme
3. Tạo plugin tùy chỉnh riêng nếu bạn có nhiều snippet mã khác

add_action( 'wp_footer', function () {
  if ( is_product() ) { 
  ?>
    <script>
      jQuery(document).ready(function ($) {
        // when the tab is clicked update the url
        $(".tabs a").click(function () {
          const nextTab = $(this).parent('li').attr("id").replace('tab-title-', '');
          window.history.pushState(null, null, "#" + nextTab);
        });
        // on load and on hashchange (usually on history back/forward)
        $(window).on('load hashchange', function () {
          if( typeof window.location.hash !== undefined ) {
            // get the tab name (or the first tab name)
            const tab = window.location.hash.replace('#', '') || $('.wc-tabs li:first').attr("id").replace('tab-title-', '');

            // the tabs label
            $('.wc-tabs .active').removeClass('active');
            $('li.' + tab + '_tab').addClass('active');

            // the tabs content
            $('.woocommerce-Tabs-panel').hide();
            $('#tab-' + tab).show();
          }
        })
      });
    </script>
  <?php
  }
}, 99 );

Kết luận

Việc tối ưu hóa trải nghiệm người dùng thông qua các chi tiết nhỏ như tab sản phẩm có thể tạo ra sự khác biệt lớn trong tỷ lệ chuyển đổi của cửa hàng WooCommerce. Đoạn code đơn giản này là một cách hiệu quả để cải thiện khả năng điều hướng và tạo ra trải nghiệm mua sắm liền mạch cho khách hàng của bạn.

Hãy thử triển khai tính năng này và quan sát cách nó cải thiện trải nghiệm người dùng trên website WordPress của bạn!