Cara Menyembunyikan Panah Input Kuantitas di WooCommerce

Pada tutorial kali ini, kita akan membahas cara menyembunyikan panah input kuantitas di halaman produk WooCommerce menggunakan CSS kustom. Dengan menerapkan metode ini, Anda bisa meningkatkan tampilan toko online Anda secara efektif dan sederhana.

Kode yang Digunakan:

add_action( 'woocommerce_before_single_product', 'bbloomer_remove_input_number_arrows' );

function bbloomer_remove_input_number_arrows() {
   ?>
   <style>
       input[type=number]::-webkit-inner-spin-button, 
       input[type=number]::-webkit-outer-spin-button {
           -webkit-appearance: none;
           margin: 0;
       }
   </style>
   <?php
}

Cara Implementasi Menggunakan Plugin Code Snippets

Berikut langkah-langkah untuk menerapkan kode tersebut menggunakan plugin Code Snippets di WordPress:

1. Instalasi Plugin Code Snippets

• Masuk ke Dashboard WordPress
• Arahkan ke menu Plugins > Add New
• Cari plugin “Code Snippets”
• Klik Install Now dan aktifkan plugin tersebut

2. Membuat Snippet Baru

• Pilih menu Snippets
• Klik Add New untuk membuat snippet baru
• Berikan judul, misalnya: “Sembunyikan Panah Input Kuantitas WooCommerce”
• Salin dan tempel kode di atas ke dalam editor snippet

3. Konfigurasi Snippet

• Pilih PHP snippet for functions.php pada opsi “Snippet Type”
• Centang kotak Run snippet everywhere agar kode diterapkan di semua halaman produk
• Klik Save Changes and Activate untuk mengaktifkan snippet

4. Verifikasi

• Buka halaman produk di toko WooCommerce Anda
• Pastikan panah input kuantitas sudah tidak terlihat

Keuntungan Menggunakan Plugin Code Snippets

• Lebih Aman: Menghindari pengubahan langsung pada file tema
• Mudah Dikelola: Snippet dapat dengan mudah diaktifkan, dinonaktifkan, atau diperbarui
• Minim Risiko Konflik: Meminimalisir potensi konflik dengan pembaruan tema atau plugin

Pertimbangan Sebelum Mengubah

• Uji Terlebih Dahulu: Lakukan pengujian di lingkungan pengembangan sebelum diterapkan di situs langsung
• Kompatibilitas: Pastikan kompatibilitas dengan tema dan plugin yang Anda gunakan
• Tampilan Responsif: Cek konsistensi tampilan di berbagai perangkat dan browser

Kesimpulan

Dengan mengikuti panduan di atas, Anda dapat dengan mudah menyembunyikan panah input kuantitas di WooCommerce, yang akan membantu mempercantik tampilan toko online Anda. Jika menemui kendala, jangan ragu untuk mencari bantuan dari komunitas WordPress atau WooCommerce.