Kali ini admin akan memberikan tutorial cara menambahkan tab baru di setiap halaman produk menggunakan WooCommerce tentunya. Saat ini hampir semua ecommerce yang menggunakan wordpress menggunakan WooCommerce. WooCommerce adalah salah satu plugin ecommerce open source yang didesain untuk WordPress. WooCommerce merupakan platform yang tergolong cepat, untuk digunakan baik bagi bisnis yang masih kecil maupun yang sudah besar. WooCommerce memiliki fungsi yang bervariasi seperti metode pembayaran & pengiriman yang berbeda, variabel produk, dll.

Cara menambahkan tab baru di halaman produk

Secara default dari woocommerce hanya memberikan 3 tab default, nah untuk menambahkannya secara manual yaitu dengan cara sebagai berikut :

Buat Child Themes

Apa itu Child Themes ? Child Themes adalah tema turunan (tema anak) dari tema-tema yang ada di wordpress dan dapat kita buat. Karena tema tersebut adalah tema turunan, maka seluruh fungsi dan tampilannya pun sama dengan tema aslinya (induk tema).

Bagaimana Cara Membuat Child Themes di WordPress

Kemudian kenapa harus menggunakan Child Themes ? Tujuannya yaitu memudahkan kita sebagai developer wordpress untuk mengkustomisasi tema induk sesuai dengan fitur yang diinginkan tanpa merubah kode induk atau tema aslinya, jadi meskipun sudah kita rubah themes childnya dan themes aslinya melakukan update tidak akan terjadi masalah.

Setelah membuat Child Themes, kemudian modifikasi file funtcion.php yang ada di appearance kemudian theme editor, selanjutnya cari file Theme Functions (functions.php) dengan menambahkan potongan source code sebagai berikut :

/* Add a custom product data tab */
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Tambah tab baru
$tabs['test_tab'] = array(
'title' => __( 'How to Order', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}

Kemudian untuk menampilkan konten dari tab nya tambahkan source code sebagai berikut :

function woo_new_product_tab_content() {
// Isi dari tab yang sudah di tambahkan
echo 'How to Order';
echo 'Here\'s your new product tab.';
}

Setelah itu simpan dan lihat hasilnya di halaman produk kalian. maka tampilannya akan sebagai berikut.

Dengan demikian kita dapat menambahkan sesuai dengan kebutuhan kita mengenai informasi tentang produk yang akan ditampilkan di website atau ecommerce kita seperti informasi cara order, informasi pembayaran, informasi tentang term and condition, dll.

Sumber : Editing product data tabs