4      – Thực hiện thông tin nội dung của một Tab chỉ định

Chúng ta có thể thực hiện tuỳ chỉnh thay đổi thông tin nội dung của Tab chỉ định bằng cách thêm đoạn mã sau vào file function.php

Chú ý : Callback sẽ thực hiện gọi Function hiển thị nội dung của Tab.

Chúng ta cũng có thể thực hiện điều này một cách tương tự cho những Tabs khác nhau của Sản Phẩm

 
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {
 
$tabs['description']['callback'] = 'woo_custom_description_tab_content';    // Custom description callback
 
return $tabs;
}
 
function woo_custom_description_tab_content() {
     echo '<h2>Custom Description</h2>';
     echo '<p>Here\'s a custom description</p>';
}
 

5      – Thêm mới một Tab

Chúng ta có thể thực hiện tuỳ chỉnh thêm mới một Tab bằng cách thêm đoạn mã sau vào file function.php

 
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
     
     // Adds the new tab
     
     $tabs['test_tab'] = array(
           'title'    => __( 'New Product Tab', 'woocommerce' ),
           'priority'      => 50,
           'callback'      => 'woo_new_product_tab_content'
     );
 
     return $tabs;
 
}
function woo_new_product_tab_content() {
 
     // The new tab content
 
     echo '<h2>New Product Tab</h2>';
     echo '<p>Here\'s your new product tab.</p>';
     
}
 

LƯU Ý :

Khi cố gắng có những thay đổi tại Additional Information tab, Bạn không thực hiện đặt những điều kiện để có thể hiển thị Tab này. Bạn sẽ nhận được một thông báo lỗi tương tự sau :

Warning: call_user_func() expects parameter 1 to be a valid callback, no array or string given in /mysite /wp-content /plugins /woocommerce /templates /single-product /tabs /tabs.php on line 35

Lý do vì khi cố gắng thay đổi tại Additional Information Tab, mà Sản Phẩm không có Weight, Dimensions hoặc Attribute thì bạn sẽ nhận được thông báo lỗi. Để fixed lỗi này bạn cần thêm điều kiện nhờ Code sau :

Sử dụng những điều kiện

+ has_attributes()

+ has_dimensions()

+ has_weight()

add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
 
function woo_rename_tabs( $tabs ) {
 
   global $product;
     
   if( $product->has_attributes() || $product->has_dimensions() || $product->has_weight() ) { 
   // Check if product has attributes, dimensions or weight
           $tabs['additional_information']['title'] = __( 'Product Data' );
   // Rename the additional information tab
     }
 
     return $tabs;
 
}
 

6      – Tuỳ chỉnh hiển thị Product Data Tabs sử dụng CSS

Có thể thực hiện tuỳ chỉnh giao diện hiển thị của Product Data Tabs bằng cách sử dụng CSS. Điều này cũng cho phép tạo ra các thiết kế khá tốt và tiết kiệm thời gian lập trình.

Lưu ý : Nếu bạn muốn thay đổi cách hiển thị của Product Data Tabs bạn có thể thực hiện trực tiếp tại /plugins /woocommerce /templates /single-product /tabs / tabs .php. Tất nhiên, cần thực hiện cách ghi đè File đúng cách như các hướng dẫn trước đây. Khi tuỳ chỉnh, bạn có thể sử dụng Bootstrap để đạt hiệu quả.

Cách thông thường hơn và dễ dàng hơn đó là sử dụng Plugin.

Mã CSS cần thêm :

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
    box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
    box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: #1a531ae0;
    color: #ffffff;
    z-index: 2;
    border-bottom-color: #fff;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    right: -5px;
    border-bottom-left-radius: 0px;
    border-width: 0 0 1px 1px;
    box-shadow: none !important; /*box-shadow: -2px 2px 0 #ebe9eb;*/
}
 
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
    left: -5px;
    border-bottom-right-radius: 0px;
    border-width: 0 1px 1px 0;
    box-shadow: none !important; /*box-shadow: 2px 2px 0 #ebe9eb;*/
}
 
 
.woocommerce div.product .woocommerce-tabs ul.tabs {
    list-style: none;
    padding: 0 0 0 0.6em;
    margin: 0 0 1.618em;
    overflow: hidden;
    position: relative;
}
 
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: 1px solid #d3ced2;
    background-color: #ffffff;
    color: #515151;
    display: inline-block;
    position: relative;
    z-index: 0;
    border-radius: 0px;
    margin: 0 -5px;
    padding: 0 1em;
}
 
.panel {
    padding-bottom: 20px !important;
    background-color: #fff;
    border: 1px solid white;
    border-radius: 0px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
 

Hình Ảnh Kết Quả: