Posted on Leave a comment

WooCommerce – Cara Menghilangkan Mobile/Handheld Navigation Bar

Blog ini menggunakan WooCommerce dengan tema bawaannya yaitu Storefront. Dan pada saat diakses menggunakan HP, akan tampil menu dibagian bawah berisi ‘My Account’, ‘Search’ dan ‘Cart’.

Kira-kira tampilannya seperti gambar dibawah ini.

Menu yang tampil dibawah saat diakses menggunakan HP

Saya kurang sreg dengan adanya menu ini. Jadi mungkin harus dihilangkan. Saya mulai mencari pengaturannya di menu WooCommerce kali aja ada yang harus di off kan. Tapi ternyata gak ada, dan seperti biasa, Google lah jurus terakhirnya.

Berikut ini cara yang saya lakukan untuk menghilangkan menu mobile/handheld navigation bar yang ada di WooCommerce.

Saya menemukan solusinya dari website dokumentasi resmi WooCommerce. Ternyata harus ditambahkan script atau kode untuk menghilangkannya.

add_action( 'init', 'jk_remove_storefront_handheld_footer_bar' );

function jk_remove_storefront_handheld_footer_bar() {
  remove_action( 'storefront_footer', 'storefront_handheld_footer_bar', 999 );
}

Ada 2 cara yang bisa dilakukan untuk menambahkan script tersebut. Cara pertama yang paling cepat tapi tidak dianjurkan dan cara kedua yang dianjurkan.

Cara Pertama

Masuk ke menu Appearance > Theme Editor, lalu dibagian Theme Files yang ada di kanan cari Theme Functions (functions.php).

Copy script diatas dan paste di baris paling akhir.

Paste script nya di baris paling bawah

Jangan lupa di save dengan menekan tombol Update File. Selesai.

Cara ini adalah cara paling cepat tapi tidak dianjurkan. Masalahnya adalah jika saya meng-update temanya, langkah yang barusan saya lakukan akan ketimpa dan hilang. Menunya pasti bakal balik lagi.

Jadi setiap saya update temanya, langkah ini harus saya lakukan kembali untuk menghilangkan menunya.

Cara Kedua

Cara ini adalah cara yang paling dianjurkan. Langkah yang harus dilakukan adalah mengunduh plugin yang khusus untuk menambahkan script PHP seperti script diatas.

Salah satunya bisa menggunakan plugin Code Snippets.

Tinggal download, aktifkan, lalu tambahkan snippet baru dan paste script diatas.

Cara kerja plugin ini sama saja dengan cara pertama, yaitu menambahkan script PHP ke file functions.php.

Tapi bedanya jika saya meng-update tema, maka tidak akan berpengaruh karena script untuk menghilangkan menunya disimpan di plugin terpisah. Jadi saya sangat merekomendasikan cara kedua ini.

Kira-kira seperti itulah cara yang saya lakukan untuk menghilangkan menu mobile/handheld navigation bar yang ada di tema bawaannya WooCommerce.

Sebagai informasi, saya menggunakan cara pertama karena biar cepat saja. Jangan ditiru.

Semoga tutorial singkat ini bermanfaat.

Komentar