Chỉnh sửa tabs trang chi tiết sản phẩm custom product tabs

Giao diện trang sản phẩm của website Wordpress sử dụng plugin Woocommerce khá đầy đủ và tối ưu cho cả người dùng lẫn quản trị web. Nhưng đôi khi product tabs của woocommerce chưa "thỏa mãn" yêu cầu sử dụng của chúng ta và chúng ta muốn thay đổi chúng: đổi tên tabs thông tin sản phẩm, xóa tabs, thay đổi vị trí tabs product, thêm mới tab... Bài chia sẻ này chúng tôi nói về chỉnh sửa tabs trang chi tiết sản phẩm (custom product tabs)

Lưu ý: Bạn cần thêm mã dưới đây vào tập tin function.php của child themes, để khi update themes cha thì mã không bị xóa mất khỏi themes.

Xóa các tabs

Sử dụng đoạn mã sau để xóa các tabs cụ thể. Removing product tabs

01 02 03 04 05 06 07 08 09 10 11

// Remove product data tabs add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );   function woo_remove_product_tabs( $tabs ) {       unset( $tabs['description'] );          // Remove the description tab     unset( $tabs['reviews'] );          // Remove the reviews tab     unset( $tabs['additional_information'] );   // Remove the additional information tab       return $tabs; }

Đổi tên tabs

Sử dụng đoạn mã sau để đổi tên các tab. Renaming product tabs

01 02 03 04 05 06 07 08 09 10 11

// Rename product data tabs add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 ); function woo_rename_tabs( $tabs ) {       $tabs['description']['title'] = __( 'More Information' );       // Rename the description tab     $tabs['reviews']['title'] = __( 'Ratings' );                // Rename the reviews tab     $tabs['additional_information']['title'] = __( 'Product Data' );    // Rename the additional information tab       return $tabs;   }

Sắp xếp lại các tabs

Sử dụng đoạn mã sau để thay đổi thứ tự tab. Re-ordering product tabs

01 02 03 04 05 06 07 08 09 10

// Reorder product data tabs add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 ); function woo_reorder_tabs( $tabs ) {       $tabs['reviews']['priority'] = 5;           // Reviews first     $tabs['description']['priority'] = 10;          // Description second     $tabs['additional_information']['priority'] = 15;   // Additional information third       return $tabs; }

Tùy chỉnh một tab

Đoạn mã sau sẽ thay thế tab mô tả bằng chức năng tùy chỉnh. Customize a product tabs

01 02 03 04 05 06 07 08 09 10 11 12 13

// Customize product data tabs 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>'; }

Thêm một tab tùy chỉnh

Sử dụng đoạn mã sau để thêm tabs sản phẩm toàn cầu tùy chỉnh. Add a custom product tabs

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

// Add a custom product data tab 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>';       }

Đổi tên tabs thông tin bổ sung

Tabs “Additional Information” chỉ hiển thị nếu sản phẩm có trọng lượng, kích thước hoặc thuộc tính.

01 02 03 04 05 06 07 08 09 10 11 12 13 14

// Rename the additional information tabs 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' );        }        return $tabs;    }

Trên đây là các đoạn code hướng dẫn các bạn chỉnh sửa tabs trang chi tiết sản phẩm. Nội dung được tham khảo từ nhiều nguồn.