Cara Menambahkan Kotak Meta Kustom ke Produk WooCommerce
Diterbitkan: 2021-07-23
Apakah Anda ingin menambahkan kotak meta khusus untuk menambahkan informasi tambahan pada halaman produk tunggal? Kemudian tetap sampai akhir, karena posting ini bertujuan untuk memberikan cuplikan kode khusus yang kami buat khusus untuk menyelesaikan masalah ini. Tentu saja, ini berarti Anda perlu memiliki pengalaman pengkodean agar Anda dapat mengimplementasikan solusi ini.
WooCommerce telah dibuat untuk semua jenis situs web eCommerce. Namun, itu hanya memenuhi kebutuhan dasar toko online. Ini berarti bahwa jika produk Anda spesifik, Anda mungkin perlu menambahkan informasi produk tambahan untuk membantu pelanggan Anda membuat keputusan yang tepat.
Salah satu cara untuk melakukannya adalah dengan membuat kotak meta khusus pada halaman Edit Produk . Kemudian, setelah informasi disimpan, akan ditampilkan pada halaman produk tunggal.
Namun, jika Anda melakukan pencarian cepat, Anda akan menemukan banyak plugin untuk mengatasi masalah ini. Namun, jika Anda memiliki banyak plugin, mereka akan membuat situs Anda membengkak. Akibatnya, kecepatan pemuatan situs Anda akan terpengaruh secara negatif. Inilah mengapa kami memutuskan untuk membuat tutorial ini untuk Anda.
Tambahkan Kotak Meta Kustom di Produk WooCommerce
Dalam tutorial singkat hari ini, kami akan menunjukkan cara menambahkan kotak meta khusus di toko WooCommerce Anda. Menggunakan cuplikan kode khusus adalah cara yang disarankan untuk membuat perubahan di WordPress.
Sebelum melanjutkan, Anda harus menginstal atau membuat tema anak. Ini akan memastikan bahwa perubahan Anda tidak hilang selama pembaruan.
Tanpa membuang banyak waktu, mari kita langsung ke dalamnya.
Langkah-langkah untuk Menambahkan Kotak Meta Kustom di Produk WooCommerce
Berikut adalah langkah-langkah sederhana yang perlu Anda ikuti:
- Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
- Dari menu Dashboard, klik pada Appearance Menu > Theme Editor Menu . Saat halaman Theme Editor terbuka, cari file theme functions untuk menambahkan fungsi menambahkan custom meta box di produk WooCommerce.
- Tambahkan kode berikut ke file php :
## ---- 1. Backend ---- ##
// Adding a custom Meta container to admin products pages
add_action( 'add_meta_boxes', 'create_custom_meta_box' );
if ( ! function_exists( 'create_custom_meta_box' ) )
{
function create_custom_meta_box()
{
add_meta_box(
'custom_product_meta_box',
__( 'Additional Product Information <em>(optional)</em>', 'cmb' ),
'add_custom_content_meta_box',
'product',
'normal',
'default'
);
}
}
// Custom metabox content in admin product pages
if ( ! function_exists( 'add_custom_content_meta_box' ) ){
function add_custom_content_meta_box( $post ){
$prefix = '_bhww_'; // global $prefix;
$ingredients = get_post_meta($post->ID, $prefix.'ingredients_wysiwyg', true) ? get_post_meta($post->ID, $prefix.'ingredients_wysiwyg', true) : '';
$benefits = get_post_meta($post->ID, $prefix.'benefits_wysiwyg', true) ? get_post_meta($post->ID, $prefix.'benefits_wysiwyg', true) : '';
$args['textarea_rows'] = 6;
echo '<p>'.__( 'Ingredients', 'cmb' ).'</p>';
wp_editor( $ingredients, 'ingredients_wysiwyg', $args );
echo '<p>'.__( 'Benefits', 'cmb' ).'</p>';
wp_editor( $benefits, 'benefits_wysiwyg', $args );
echo '<input type="hidden" name="custom_product_field_nonce" value="' . wp_create_nonce() . '">';
}
}
//Save the data of the Meta field
add_action( 'save_post', 'save_custom_content_meta_box', 10, 1 );
if ( ! function_exists( 'save_custom_content_meta_box' ) )
{
function save_custom_content_meta_box( $post_id ) {
$prefix = '_bhww_'; // global $prefix;
// We need to verify this with the proper authorization (security stuff).
// Check if our nonce is set.
if ( ! isset( $_POST[ 'custom_product_field_nonce' ] ) ) {
return $post_id;
}
$nonce = $_REQUEST[ 'custom_product_field_nonce' ];
//Verify that the nonce is valid.
if ( ! wp_verify_nonce( $nonce ) ) {
return $post_id;
}
// If this is an autosave, our form has not been submitted, so we don't want to do anything.
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return $post_id;
}
// Check the user's permissions.
if ( 'product' == $_POST[ 'post_type' ] ){
if ( ! current_user_can( 'edit_product', $post_id ) )
return $post_id;
} else {
if ( ! current_user_can( 'edit_post', $post_id ) )
return $post_id;
}
// Sanitize user input and update the meta field in the database.
update_post_meta( $post_id, $prefix.'ingredients_wysiwyg', wp_kses_post($_POST[ 'ingredients_wysiwyg' ]) );
update_post_meta( $post_id, $prefix.'benefits_wysiwyg', wp_kses_post($_POST[ 'benefits_wysiwyg' ]) );
}
}
## ---- 2. Front-end ---- ##
// Create custom tabs in product single pages
add_filter( 'woocommerce_product_tabs', 'custom_product_tabs' );
function custom_product_tabs( $tabs ) {
global $post;
$product_ingredients = get_post_meta( $post->ID, '_bhww_ingredients_wysiwyg', true );
$product_benefits = get_post_meta( $post->ID, '_bhww_benefits_wysiwyg', true );
if ( ! empty( $product_ingredients ) )
$tabs['ingredients_tab'] = array(
'title' => __( 'Ingredients', 'woocommerce' ),
'priority' => 45,
'callback' => 'ingredients_product_tab_content'
);
if ( ! empty( $product_benefits ) )
$tabs['benefits_tab'] = array(
'title' => __( 'Benefits', 'woocommerce' ),
'priority' => 50,
'callback' => 'benefits_product_tab_content'
);
return $tabs;
}
// Add content to custom tab in product single pages (1)
function ingredients_product_tab_content() {
global $post;
$product_ingredients = get_post_meta( $post->ID, '_bhww_ingredients_wysiwyg', true );
if ( ! empty( $product_ingredients ) ) {
echo '<h2>' . __( 'Product Ingredients', 'woocommerce' ) . '</h2>';
// Updated to apply the_content filter to WYSIWYG content
echo apply_filters( 'the_content', $product_ingredients );
}
}
// Add content to custom tab in product single pages (2)
function benefits_product_tab_content() {
global $post;
$product_benefits = get_post_meta( $post->ID, '_bhww_benefits_wysiwyg', true );
if ( ! empty( $product_benefits ) ) {
echo '<h2>' . __( 'Product Benefits', 'woocommerce' ) . '</h2>';
// Updated to apply the_content filter to WYSIWYG content
echo apply_filters( 'the_content', $product_benefits );
}
}
- Ini adalah hasil di bagian belakang:
- Ini adalah hasil di ujung depan:
Kesimpulan
Dalam tutorial hari ini, Anda telah melihat betapa mudahnya menambahkan kotak meta khusus di WooCommerce. Ini akan membantu Anda menyesuaikan situs web untuk produk spesifik Anda dan menawarkan lebih banyak informasi kepada pelanggan Anda.
Jika Anda tidak terbiasa dengan kode penanganan, kami sarankan menggunakan plugin seperti Meta Box. Kami berharap postingan ini memberikan solusi untuk Anda.
Artikel Serupa
- Apa Gateway Pembayaran Terbaik untuk WooCommerce
- Cara Menyembunyikan Gambar Unggulan di Halaman Produk Tunggal
- Cara Menampilkan Variasi Produk Di WooCommerce
- Cara Mendapatkan Produk Saat Ini WooCommerce
- Cara Mengubah Template Email di WooCommerce
- Cara Menambahkan Latar Belakang Kustom Untuk WooCommerce
- Cara Menggunakan WooCommerce untuk Mengatur Toko Online
- Cara Mengunggah Gambar Di Halaman Produk Di WooCommerce
- Cara Menambahkan Peringkat Bintang Ke Produk WooCommerce
- WooCommerce Buat Halaman Produk Tunggal Khusus
- Cara Menyesuaikan Halaman Produk WooCommerce Dengan Elementor Pro
- Cara Menambahkan Informasi ke Halaman Toko WooCommerce
- Cara Menambahkan Tombol Lihat Keranjang Di WooCommerce
- Cara Menyembunyikan Galeri Produk Di WooCommerce
- Cara Menambahkan Taksonomi Kustom Ke Produk WooCommerce
- Cara Menambahkan Kolom Baru Di Halaman Pesanan WooCommerce
- Cara Memindahkan Produk WooCommerce Ke Situs Baru