Cara Menyesuaikan Halaman Produk WooCommerce
Diterbitkan: 2021-04-15
Apakah Anda mencari beberapa cara untuk menyesuaikan halaman produk Anda? Desain dan pengalaman pengguna halaman produk Anda dapat memengaruhi penjualan Anda secara positif. Halaman-halaman ini menampilkan produk Anda dalam cahaya terbaiknya, memotivasi pembeli untuk menekan tombol “Tambahkan ke Keranjang”.
Halaman produk yang baik harus informatif dan memiliki desain yang rapi. Halaman ini juga harus mengekspresikan merek unik Anda.
Ada banyak cara berbeda untuk menyesuaikan halaman toko. Anda dapat menggunakan opsi bawaan, cuplikan kode khusus, dan plugin.
Sesuaikan Halaman Produk WooCommerce
Dua halaman utama di mana sebagian besar penyesuaian terjadi di WooCommerce adalah halaman toko dan halaman produk. Anda perlu menyesuaikannya untuk meningkatkan penjualan dan mengoptimalkan awal proses pembelian.
Kami merekomendasikan memiliki desain yang rapi yang berfokus pada penyediaan pengalaman pelanggan terbaik untuk meningkatkan tingkat konversi.
Dalam posting ini, kami akan membagikan beberapa solusi untuk mengedit halaman produk secara terprogram.
Pertama, mari kita lihat tata letak halaman produk default.
Tata Letak Halaman Produk WooCommerce
Berikut tampilan halaman produk: 
Ada 2 file WooCommerce utama yang bertanggung jawab atas output halaman produk.
- single-product.php: Ini membangun template yang diperlukan untuk tata letak saat ini
- content-single-product.php: File ini mencetak konten dalam template
Anda dapat menimpa file template menggunakan tema anak. Anda juga dapat menggunakan kait WooCommerce alih-alih menimpa file template jika memungkinkan. Ini adalah salah satu praktik terbaik yang direkomendasikan oleh WordPress.
Mari kita lihat beberapa contoh praktis tentang bagaimana Anda dapat menyesuaikan halaman produk.
Edit Halaman Produk WooCommerce Menggunakan Hooks
Di bagian ini, kita akan menggunakan kait untuk menyesuaikan halaman produk.
1. Hapus Elemen
Ada beberapa kait untuk menghapus elemen yang berbeda pada halaman produk. Kait bekerja dengan elemen tertentu.
Ini berarti Anda harus menggunakan hook, fungsi, dan nilai prioritas yang tepat.
Berikut adalah beberapa skrip untuk menghapus elemen yang berbeda dan menyesuaikan halaman produk. Salin dan tempel ke file functions.php:
// remove title
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// remove rating stars
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// remove product meta
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// remove description
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
// remove images
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
// remove related products
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
// remove additional information tabs
remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);
2.Tambahkan Elemen Baru
Anda dapat menambahkan konten baru ke halaman produk dengan membuat fungsi Anda sendiri. Anda harus menyalin dan menempelkannya ke file functions.php:
add_action('woocommerce_after_single_product_summary','njengah_callback_function');
function njengah_callback_function(){
printf('
<h1> Hey there !</h1>
<div><h5>Welcome to my custom product page</h5>
</div>');
}
Ini adalah hasilnya: 
3. Edit Tab Produk
Anda dapat menggunakan kait filter woocommerce_product_tabs untuk menghapus, menambah, menyusun ulang, atau menambahkan tab baru di bagian Informasi Tambahan.
Berikut adalah contoh skrip yang akan menghapus tab Deskripsi dan kontennya, mengganti nama tab Ulasan, dan mengubah prioritas Informasi tambahan ke tempat pertama. Anda harus menyalin dan menempelkannya ke file functions.php:
add_filter( 'woocommerce_product_tabs', 'njengah_remove_product_tabs', 98 );
function njengah_remove_product_tabs( $tabs ) {
unset( $tabs['description'] ); // Remove the Description tab
$tabs['reviews']['title'] = __( 'Ratings' ); // Rename the Reviews tab
$tabs['additional_information']['priority'] = 5; // Additional information at first
return $tabs;
}
Ini adalah hasilnya: 
Anda dapat membuat tab baru dengan menggunakan kode berikut. Anda harus menyalin dan menempelkannya ke file functions.php:
add_filter( 'woocommerce_product_tabs', 'njengah_new_product_tab' );
function njengah_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['test_tab'] = array(
'title' => __( 'New Tab Here!', 'woocommerce' ),
'priority' => 50,
'callback' => 'njengah_new_product_tab_content'
);
return $tabs;
}
function njengah_new_product_tab_content() {
echo '<h2>New Tab Here!</h2><p>Here\'s your new product tab content</p>.';
}
Ini adalah hasilnya: 
Sesuaikan Halaman Produk Mengganti File Template WooCommerce
Anda juga dapat mengedit halaman produk WooCommerce secara terprogram dengan mengganti file template.
Namun, penting untuk dicatat bahwa metode ini lebih berisiko daripada yang sebelumnya. Oleh karena itu, kami menyarankan Anda membuat cadangan lengkap situs Anda sebelum melanjutkan.
Proses ini mirip dengan mengganti file lain di tema anak Anda.
Sebaiknya buat tema anak atau plugin untuk membuat perubahan.
1. Edit informasi Meta
Di bagian ini, kita akan mengedit meta-information. Ini berarti bahwa kita harus file template yang bertanggung jawab untuk mencetak data yang sesuai. Ini adalah file meta.php.
File ini terletak di plugin WooCommerce mengikuti jalur ini: woocommerce/templates/single-product/meta.php.
Langkah selanjutnya adalah mengedit direktori file tema anak Anda dan membuat folder WooCommerce.
Buat folder lain di dalamnya yang disebut produk tunggal dan rekatkan file meta.php: Child_theme/woocommerce/single-product/meta.php
Ini akan memungkinkan Anda untuk mengedit file meta.php dan melihat perubahan Anda di frontend.
File contoh meta.php berikut akan:
- Ubah label SKU menjadi ID
- Ubah tag menjadi Diterbitkan di bawah
- Hapus label kategori
global $product;
?>
<div class="product_meta">
<?php do_action( 'woocommerce_product_meta_start' ); ?>
<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
<span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?>
<span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?>
</span>
</span>
<?php endif; ?>
<?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Published under:', 'Published under:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>
Ini adalah hasilnya: 
2. Sesuaikan Halaman Produk dengan CSS Script
Anda dapat dengan mudah mengedit halaman produk WooCommerce secara terprogram yaitu dengan menggunakan kode CSS.
Ini akan membantu Anda menata halaman produk dan memberikan tampilan dan nuansa bisnis Anda.
Hal pertama yang perlu Anda lakukan adalah membuat file baru di tema anak Anda dengan ekstensi .css sehingga Anda dapat menambahkan skrip CSS Anda di sana. Anda dapat menamakannya single-product.css.
Tempatkan file di folder utama tema anak pada tingkat yang sama dengan file functions.php dan style.css.
Rekatkan skrip berikut di file functions.php tema anak Anda dan ganti nama file CSS Anda jika perlu.
add_action( 'wp_enqueue_scripts', 'njengah_custom_product_style' );
function njengah_custom_product_style() {
if ( is_product() ){
wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );
wp_enqueue_style('product_css');
}
}
Kondisi if(is_product()) akan memeriksa apakah halaman saat ini adalah halaman produk. Ini mencegah pemuatan file CSS yang tidak perlu saat itu bukan halaman produk.
Sekarang, Anda seharusnya dapat mengedit gaya halaman produk menggunakan aturan CSS khusus.
Kesimpulan
Dalam posting ini, kami telah membagikan beberapa cara Anda dapat menyesuaikan halaman produk Anda. Namun, sebelum Anda membuat perubahan apa pun, sebaiknya gunakan alat seperti Hotjar yang memberi Anda data tentang bagaimana pengunjung berinteraksi dengan halaman Anda.
Anda juga dapat melihat apa yang dilakukan pengecer online seperti Amazon dan Walmart. Anda dapat meniru tampilan dan nuansa mereka dengan menyertakan fitur umum.
Jika Anda memerlukan bantuan untuk menyesuaikan halaman ini, silakan hubungi pengembang WordPress yang memenuhi syarat.
Artikel Serupa
- 100+ Tips, Trik & Cuplikan Panduan Sembunyikan WooCommerce Ultimate
- Daftar Kait WooCommerce » Global, Keranjang, Pembayaran, Produk
- Cara Membuat Produk Secara Terprogram WooCommerce
- Cara Mengubah Jumlah Produk Per Baris
- Cara Mengatur Harga Produk WooCommerce Per Kg
- Cara Mendapatkan Detail Pesanan Setelah Checkout Di WooCommerce
- Gutenberg vs Elementor Mana Pembuat Halaman WordPress yang Lebih Baik?
- Cara Membuat Halaman Kategori Kustom Di WooCommerce
- Cara Menata Halaman Checkout WooCommerce
- Cara Menghapus Keranjang saat Logout Di WooCommerce
- Cara Mengubah Tombol Tambahkan ke Keranjang untuk Baca Lebih Lanjut WooCommerce
- Cara Menghapus Placeholder Gambar Produk Di WooCommerce
- Cara Menambahkan Mata Uang ke WooCommerce [Mata Uang Kustom]
- Bagaimana Menjaga Tab Deskripsi WooCommerce Terbuka Secara Default
- Cara Menyembunyikan Judul Deskripsi Produk WooCommerce
- Bagaimana Menambahkan Teks Sebelum Harga di WooCommerce » Tambahkan Teks Sebelum Harga
- Cara Mengatur Lebar Penuh Halaman Produk Tema Toko WooCommerce
- Cara Mengubah Produk per Halaman WooCommerce Storefront Theme
- Cara Mendapatkan Judul Produk WooCommerce
- Cara Mengatur Ukuran Thumbnail Toko WooCommerce