Thiết lập liên kết trực tiếp đến tab sản phẩm trong WooCommerce

Code function

Bạn copy đoạn code dưới đây và cho vào file functions.php nhé

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 );

Giải thích code

Đoạn mã này vận hành dựa trên hai chức năng chính:

Ghi nhận thao tác người dùng với tab: Khi khách truy cập nhấn vào một tab bất kỳ, địa chỉ URL trên trình duyệt sẽ được cập nhật kèm theo đoạn hash (ví dụ: #tab-title_reviews) thông qua phương thức window.history.pushState.

Kích hoạt tab dựa trên hash trong URL:

• Khi trang được tải hoặc URL thay đổi hash, script sẽ phân tích phần hash để xác định tab tương ứng.
• Nó sẽ hủy trạng thái đang hoạt động của tab hiện tại và gán trạng thái active cho tab mới.
• Tất cả nội dung của các tab khác sẽ được ẩn đi, chỉ hiển thị phần nội dung tương ứng với tab được chọn.

Và đây là kết quả

Chỉ đơn giản thế thôi. Chúc bạn thành công !