Menggunakan Hook Pada Woocommerce Cart Page

Apa Sih Hook pada WooCommerce itu?

Hook sendiri artinya adalah pengait, pengait yang dimaksud adalah Hook sebagai API WordPress yang memungkinkan developer mengubah data yang ditampilkan pada website tanpa harus merubah struktur kode aslinya. WooComerrce Cart Page juga memiliki struktur Hook ( Visual Hook Guide) yang berfungsi jika kita ingin mengubah tampilan dari Woo Cart Page.

Ada dua tipe hook, yaitu Action dan Filter:

• Hook Action adalah hook yang memungkinkan kamu untuk menambah custom code di berbagai titik
• Hook Filter adalah hook yang memungkinkan kamu untuk memanipulasi dan mengembalikan data yang dilewatinya

Bagaimana cara menggunakan Hook di WooCommerce?

Jika kamu ingin menggunakan hook untuk menambahkan atau mengubah kode, kamu bisa melakukannya dengan beberapa cara:

1. Di dalam file custom child theme’s functions.php.

2. Menggunakan plugin seperti Code Snippets.

3. Menggunakan hook action

Untuk menjalankan kode Anda sendiri, Anda bisa menggunakan action hook dengan cara berikut:

add_action( 'action_name', 'your_function_name' );
function your_function_name() { // Your code }

4. Menggunakan hook filter

Filter hook dipanggil di seluruh kode dengan menggunakan apply_filter( 'filter_name', $variable );. Untuk memanipulasi variabel yang dilewatkan, Anda dapat melakukan sesuatu seperti ini:

add_filter( 'filter_name', 'your_function_name' );
function your_function_name( $variable ) {
// Your code
return $variable; }

Contoh:

Jika kita ingin mengubah tampilan dari Woo Cart Page maka kita perlu mengetahui terlebih dahulu Hook hook nya seperti gambar di bawah ini:

Setelah melihat Hook, maka kita dapat menggunakan nya untuk menambahkan action yang kita inginkan, seperti pada contoh di bawah ini.

Pada Gambar di atas terdapat sebuah halaman Woo Cart Page dan kita ingin menambahkan sebuah image di paling bawah Woo Cart Page. Berikut image yang akan ditambahkan:

Sehingga hal yang perlu kita lakukan adalah membuka halaman function.php dan menambahkan add_action() pada hook woocommerce_after_cart karena image yang akan ditambahkan berada dihook tersebut.

setelah add_action ditambahkan. Maka image yang telah ditambahkan akan tampil di Woocomerce Cart Page seperti gambar di bawah ini:

Dapat dilihat kita telah mengubah websitenya tanpa mengubah struktur kode aslinya.

Semoga artikel ini membantu teman teman yaa, Sampai jumpa diartikel berikutnya.