5+ Cara Menghapus Sidebar dari Halaman Produk di Tema WooCommerce

Apakah Anda ingin menghapus bilah sisi dari halaman produk di WooCommerce? Jika Anda mencari solusi, saya telah menguraikan dalam tutorial Woocommerce cepat ini cara menghapus sidebar dari halaman produk langkah demi langkah. Mudah diikuti dan dapat diterapkan oleh setiap pengguna WordPress terlepas dari tingkat keahliannya. Jika Anda ingin menghapus sidebar dari situs WordPress atau tema tertentu, saya jelaskan secara rinci di sini.

Sidebar Halaman Produk WooCommerce

Di WooCommerce halaman produk dilengkapi dengan sidebar default di sebagian besar tema dan ini bisa menjadi masalah bagi sejumlah pengguna WooCommerce. Misalnya, tema WooCommerce default – Storefront hadir dengan sidebar halaman produk seperti yang terlihat pada gambar di bawah ini:

Hari ini saya akan memandu Anda tentang cara menghapus sidebar WooCommerce ini di halaman produk. Untuk tujuan ilustrasi, saya akan menggunakan tema WordPress etalase WooCommerce tetapi pendekatan ini akan bekerja di semua tema WooCommerce.

Langkah demi Langkah Cara Menghapus Sidebar WooCommerce dari Halaman Produk

Berikut ini adalah langkah dan opsi untuk menghapus sidebar dari halaman produk WooCommerce:

1. Masuk ke situs WooCommerce Anda dan buka editor tema dan file functions.php
2. Anda juga dapat menggunakan FTP atau CPanel dari perusahaan hosting Anda untuk menambahkan potongan kode ke file functions.php dari tema tertentu.
3. Tambahkan cuplikan kode yang terdiri dari kait tindakan hapus ke ' wp' yang mengaitkan acara woocommerce_sidebar yang bertanggung jawab untuk menambahkan tindakan bilah sisi dalam tema WooCommerce.
4. Untuk tema WooCommerce etalase , ada kait etalase_sidebar khusus yang harus Anda gunakan untuk menghapus bilah samping WooCommerce dari halaman produk.
5. Anda juga dapat menggunakan tag bersyarat is_product untuk memeriksa apakah Anda berada di halaman produk sebelum Anda dapat menghapus sidebar dari halaman produk di WooCommerce.
6. Tambahkan cuplikan kode ini di functions.php dan update , lalu kunjungi halaman produk WooCommerce Anda di frontend untuk melihat apakah perubahannya efektif.
7. Solusi lain yang dapat Anda gunakan untuk menghapus sidebar dari halaman produk adalah dengan mengatur template posting kustom lebar penuh yang dijelaskan dengan jelas dalam posting ini tentang cara menghapus sidebar dari WordPress Untuk kasus ini, Anda memerlukan tema WordPress yang mendukung template posting kustom seperti salah satu tema WordPress premium terbaik – DIVI

Cuplikan Kode untuk Menghapus Sidebar dari Halaman Produk di WooCommerce

Ada tiga pendekatan yang dapat Anda gunakan untuk menghapus bilah sisi dari halaman produk di WooCommerce seperti yang diuraikan dalam ringkasan langkah demi langkah di atas.

#1) Hapus Action Hook ke 'WP' menggunakan WooCommerce Sidebar

Jadi kita akan mulai dengan kait remove_action yang ditambahkan ke acara 'wp'. Kode harus sebagai berikut:

 add_action( 'wp', 'njengah_remove_sidebar_product_pages' );

function njengah_remove_sidebar_product_pages() {

    jika ( is_produk() ) {

    remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );

   }

}

Cuplikan ini akan menghapus bilah sisi dari semua halaman produk saat ditambahkan ke file tema functions.php atau plugin WooCommerce kustom Anda.

Bagaimana itu bekerja

Cuplikan kode ini terdiri dari kait tindakan yang ditambahkan ke acara 'wp' dan fungsi panggilan baliknya menggunakan kait remove_action untuk menghapus semua bilah sisi di halaman produk karena menentukan woocommerce_sidebar.

Ini adalah cara paling efektif untuk menghapus sidebar dari halaman produk di semua produk WooCommerce Anda.

#2) Gunakan is_active_sidebar() untuk Menghapus Sidebar Dari Halaman Produk WooCommerce

Teknik lain yang dapat Anda terapkan untuk menghapus sidebar dari halaman produk di WooCommerce adalah dengan menggunakan fungsi is_active_sidebar WordPress. Ini adalah contoh cuplikan kode yang menggunakan is_active_sidebar untuk menghapus sidebar WooCommerce:

 /**
 * Nonaktifkan sidebar pada halaman produk di WooCoomerce.
 *
 */

function njengah_remove_sidebar( $is_active_sidebar, $index ) {              

    if( $index !== "sidebar-1" ) {

        kembalikan $is_active_sidebar;

    }

    jika( ! adalah_produk() ) {

        kembalikan $is_active_sidebar;

    }

    kembali salah;

}

add_filter( 'is_active_sidebar', 'njengah_remove_sidebar', 10, 2 );

Bagaimana itu bekerja

Kode ini terdiri dari pengait filter yang memeriksa apakah ada bilah sisi dengan indeks bilah sisi-1 yang dapat diubah agar sesuai dengan id/nama bilah sisi lainnya.

Jika bilah sisi ditemukan, pengembalian disetel ke false untuk menonaktifkan bilah sisi. Untuk membuatnya efektif di halaman produk, bagian terakhir menggunakan is_product() untuk memverifikasi apakah kita berada di halaman produk.

Untuk mempelajari lebih lanjut tentang indeks sidebar yang setara dengan nama atau ID sidebar Anda harus membacanya di sini – cara menambahkan sidebar di WordPress atau di sini – cara mendaftar sidebar di WordPress.

#3) Hapus Sidebar dari Storefront WooCommerce Theme menggunakan Remove Hook on storefront_sidebar Action

Untuk cuplikan khusus ini, Anda dapat menggunakannya untuk menghapus sidebar halaman produk WooCommerce karena ini bekerja pada kait khusus untuk tema Storefront yaitu storefront_sidebar, kode berikut harus menghapus sidebar di tema Storefront:

 add_action( 'get_header', 'njengah_remove_storefront_sidebar' );

function njengah_remove_storefront_sidebar() {

     jika ( is_produk() ) {

       remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );

    }

}

Bagaimana itu bekerja

Ini hanyalah pengait ke tindakan get_header dan fungsi panggilan balik memiliki remove_action yang menargetkan etalase kait khusus_sidebar yang menambahkan bilah sisi dalam tema Woocommerce etalase.

Anda juga dapat menemukan dari dokumentasi tema spesifik Anda jika tema WooCommerce Anda saat ini memiliki pengait semacam ini yang sekarang dapat Anda ganti dalam kode di atas dan itu akan berfungsi dengan mulus.

#4) Hapus Bilah Sisi WooCommerce Menggunakan Templat Halaman Produk Kustom

Beberapa tema WooCommerce premium dan gratis hadir dengan templat posting khusus untuk halaman produk yang menetapkan halaman lebar penuh yang menghilangkan bilah sisi.

Contoh klasik adalah tema Divi seperti yang Anda lihat pada gambar di bawah, Anda cukup memilih templat lebar penuh dan bilah samping akan dihapus.

Bagaimana itu bekerja

Menggunakan template posting kustom lebar penuh adalah teknik yang telah dijelaskan dalam posting ini – cara menghapus sidebar WordPress

#5) Gunakan CSS untuk Menghapus Sidebar dari halaman Produk WooCommerce

Cara umum dan mudah lainnya untuk menyembunyikan sidebar WooCommerce dari halaman produk Anda adalah menggunakan properti tampilan CSS. Contoh kode tersebut dibagikan di bawah ini:

 .sidebar kanan .widget-area {

       lebar: 21.7391304348%;

       mengapung: benar;

       margin-kanan: 0;

      tampilan: tidak ada;

}

Bagaimana itu bekerja

Properti tampilan CSS ketika disetel ke tidak ada menghapus elemen dari tampilan Properti CSS lain yang dapat digunakan untuk menyembunyikan bilah sisi adalah visibilitas.

Saat visibilitas disetel ke tersembunyi, elemen HTML akan disembunyikan dari tampilan. Anda harus memeriksa kelas bilah sisi tema Anda sebelum Anda dapat menggunakan teknik ini seperti yang ditunjukkan di bawah ini:

WooCommerce Hapus Sidebar dari Tema Halaman Toko Halaman Produk

#1) Tambahkan Cuplikan Kode untuk Menghapus Sidebar Tema Storefront

Saat Anda menambahkan potongan kode di atas dalam file functions.php dari tema etalase, bilah sisi Anda harus dihapus dan seharusnya seperti yang ditunjukkan pada gambar di bawah ini:

#2) Hapus Widget Hapus WooCommerce dari Tema Storefront

Trik sederhana lainnya untuk menghapus sidebar dari tema etalase adalah memastikan tidak ada widget yang ditambahkan ke sidebar utama seperti yang ditunjukkan pada gambar di bawah ini:

Membungkus

Tutorial ini mencakup semua cara terbaik yang dapat Anda gunakan untuk menghapus sidebar dari halaman produk di WooCommerce. Ada cara lain yang dapat Anda terapkan untuk menghapus sidebar dari situs WordPress seperti yang dibahas dalam posting ini – cara menghapus sidebar WordPress . Ini juga membantu untuk memahami cara menambahkan bilah sisi di WordPress terutama untuk pengembang WordPress atau pengembang tema WooCommerce . Saya harap Anda menemukan tips yang dibagikan dalam posting ini bermanfaat.

Artikel Serupa

1. Cara Mengubah Ukuran Gambar Produk WooCommerce
2. Cara Menghilangkan Efek Zoom pada Gambar Produk WooCommerce
3. Cara Mengatur Produk Unggulan Di WooCommerce
4. Cara Menghapus Telah Ditambahkan ke Keranjang Anda Pesan WooCommerce
5. Cara Menambahkan Ikon Hapus ke Halaman Checkout WooCommerce
6. Cara Mengubah Stok Teks di WooCommerce
7. Cara Menghapus Detail Penagihan dari WooCommerce Checkout
8. Cara Menghitung Item yang Ditambahkan ke Keranjang Kode Hitung Keranjang WooCommerce
9. Cara Menghapus Menu Unduhan Halaman Akun Saya WooCommerce
10. Cara Menghapus Kategori dari Halaman Produk WooCommerce Dalam 2 Opsi Mudah
11. Cara Menghapus Sidebar dari Halaman WordPress atau Menyembunyikan Sidebar WordPress
12. Bagaimana Menambahkan Teks Sebelum Harga di WooCommerce » Tambahkan Teks Sebelum Harga
13. Cara Mengubah Harga Produk Secara Terprogram di WooCommerce
14. Cara Menambahkan Deskripsi setelah Harga di WooCommerce
15. Cara Mengubah Teks Lanjutkan Ke Checkout Di WooCommerce
16. Cara Membuat Halaman Akun Saya Di WooCommerce
17. Cara Membuat Tombol Keluar WooCommerce
18. Cara Menambahkan Kategori ke Produk WooCommerce
19. Cara Redirect Setelah Checkout WooCommerce : Redirect ke Halaman Terima Kasih Kustom
20. Cara Menampilkan Produk WooCommerce Berdasarkan Kategori