Cara Membuat Jenis Produk WooCommerce Kustom Secara Terprogram

Saat Anda membangun toko WooCommerce yang kompleks, Anda mungkin perlu membuat solusi sendiri untuk masalah tertentu. Salah satu masalah ini adalah kurangnya jenis produk WooCommerce tertentu. Inilah mengapa kami di QuadLayers telah memberikan Anda panduan tentang Cara Membuat Jenis Produk WooCommerce Khusus untuk situs web Anda.

Kami akan melihat bagaimana Anda dapat menentukan jenis produk Anda, mengaktifkan opsi dan harga khusus untuknya, dan banyak lagi. Tapi pertama-tama, mari kita lihat jenis produk WooCommerce dan apa yang bisa dilakukan oleh jenis produk khusus.

Mengapa Menambahkan Jenis Produk Kustom di WooCommerce?

Secara default, WooCommerce memiliki empat jenis produk unik. Ini adalah:

• Produk sederhana
• Produk variabel
• Eksternal/Afiliasi
• Produk yang Dapat Diunduh

Tentu saja, dengan plugin WooCommerce eksternal, Anda dapat menambahkan lebih banyak jenis produk seperti produk Berlangganan, produk yang Dapat Dipesan, Keanggotaan, dan lainnya.

Tetapi bagaimana jika Anda ingin membuat jenis produk selain dari jenis khusus ini? Jika Anda memiliki persyaratan khusus yang tidak dapat dipenuhi oleh jenis produk WooCommerce default, Atau jika Anda ingin membuat jenis produk khusus seperti produk keanggotaan atau lelang tanpa menggunakan plugin pihak ketiga, Anda dapat membuat jenis produk khusus menggunakan sedikit coding.

Menggunakan jenis produk khusus berarti menambahkan pengaturan yang berbeda dan unik ke jenis produk. Misalnya, jika Anda menginginkan jenis produk variabel tertentu dan menambahkan setelan visibilitas atau penetapan harga yang berbeda untuknya, Anda dapat melakukannya menggunakan jenis produk khusus. Selain itu, Anda juga dapat menentukan jenis produk tertentu untuk satu jenis produk yang unik dan hanya mengubah pengaturan jenis produk jika diinginkan.

Apa pun kebutuhan Anda, memiliki jenis produk khusus memberi Anda lebih banyak fleksibilitas saat menyesuaikan dan menentukan produk yang Anda jual di situs web Anda.

Bagaimana Cara Membuat Jenis Produk WooCommerce Kustom?

Proses pembuatan jenis produk WooCommerce cukup sederhana tetapi memerlukan beberapa tingkat pengkodean. Kami menyarankan pelanggan kami belajar lebih banyak tentang membuat plugin WordPress khusus dan menambahkan kode ke dalamnya jika Anda ingin melanjutkan artikel ini.

Setelah Anda memahami dasar-dasar membuat plugin WordPress di direktori situs web Anda, lanjutkan dan buka direktori instalasi WP Anda, buka wp-content/plugins dan buat folder ' QuadLayers_custom-product-type '. Untuk demo kami, kami akan menggunakan direktori localhost kami.

Setelah itu buat file bernama ' Quadlayers_custom-product-type.php .' Ini adalah file utama Anda yang berfungsi sebagai pintu untuk fitur plugin Anda yang lain.

Buka file ini dan rekatkan baris kode berikut ke dalam file:

 <?php

/**
* Nama Plugin: Jenis Produk Kustom Quadlayers
* Deskripsi: Kode untuk panduan Quadlayers tentang cara membuat jenis produk WooCommerce khusus
*/

if ( ! defined( 'ABSPATH' ) ) {
kembali;
} 

Kumpulan kode ini mendefinisikan plugin Anda dengan menambahkan nama dan deskripsi plugin. Untuk saat ini, ini sudah cukup, karena kita perlu menambahkan lebih banyak kode ke file ini agar berfungsi. Sekarang, Anda perlu mengaktifkan plugin yang baru Anda buat. Kami akan tetap mengaktifkan plugin untuk tutorial dan menambahkan lebih banyak kode seiring berjalannya waktu.

Jadi lanjutkan dan buka WP Admin Dashboard Anda dan klik Plugins . Di sini, Anda akan melihat plugin baru bernama Quadlayers Custom Product Type. Lanjutkan dan aktifkan dan lanjutkan ke langkah tutorial berikutnya.

Daftarkan Jenis Produk WooCommerce Khusus

Selanjutnya, kami akan membuat fungsi untuk menentukan jenis produk khusus kami dan mendaftarkannya sebagai jenis produk WooCommerce. Untuk ini, tambahkan kode ini ke file utama plugin Anda:

 add_action( 'init', 'register_demo_product_type' );
fungsi register_demo_product_type() {
kelas WC_Product_Demo memperluas WC_Product {

fungsi publik __construct( $produk ) {
$this->product_type = 'demo';
induk::__construct( $produk );
}
}
}

Ini akan mendaftarkan jenis produk khusus bernama demo. Jika Anda ingin mengubah nama jenis produk, cukup ubah teks di $this->product_type = 'demo';

Tambahkan opsi Produk WooCommerce Kustom.

Setelah ini, kita perlu menambahkan jenis produk khusus ke daftar Drop Down Jenis produk. Ini membuat jenis produk Anda dapat dipilih saat Anda membuat atau mengedit produk di Dasbor Admin WP Anda. Tambahkan kode ini ke file utama plugin Anda, dan Anda akan melihat opsi baru di daftar Jenis Produk Anda.

 add_filter( 'product_type_selector', 'add_demo_product_type' );
fungsi add_demo_product_type( $types ){
$types[ 'demo' ] = __( 'Demo produk', 'dm_product' );
kembalikan $jenis; 
}

Kode ini akan menambahkan jenis produk khusus Anda ke daftar tarik-turun data Produk menggunakan baris $types['demo'] = __('Custom Product Type') . Anda dapat mengubah teks dari Jenis Produk Khusus menjadi apa pun seperti Produk Demo, pesanan Khusus, kartu Hadiah, dll.

Sekarang, buka Dasbor Admin WP Anda dan buat produk baru. Di bawah menu tarik-turun Product Type , Anda akan melihat opsi baru bernama ' Demo Product .'

Menambahkan Tab Jenis Produk Kustom

Fungsi berikut akan membangun tab pengaturan baru untuk jenis produk kustom Anda. Dengan cara ini, Anda dapat menambahkan detail spesifik ke jenis Produk Anda yang tidak dibagikan dengan jenis produk lainnya.

Tempel di fungsi ini untuk membuat tab Detail Produk Khusus:

 add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab' );
fungsi demo_product_tab( $tab) {

$tab['demo'] = larik(
'label' => __( 'Produk Demo', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
kembalikan $tab;
}
}

Ingatlah untuk menggunakan ID product_type Anda alih-alih 'demo' di $tabs['demo'] = array jika Anda telah menentukan product_type Anda sendiri di atas.

Tiga parameter dalam array yang kami gunakan adalah:

label: Ini menentukan nama tab produk khusus Anda.
target: Ini menetapkan pengidentifikasi yang akan kami gunakan untuk menambahkan pengaturan ke tab.
class: Ini memungkinkan Anda memeriksa kapan harus menampilkan tab produk khusus.

Di sini, di parameter kelas, kami menggunakan show_if_Demo_product, yang berarti tab ini hanya akan ditampilkan saat jenis produk khusus Anda dipilih.

Tambahkan Bidang Tab Jenis Produk Khusus

Selanjutnya, mari tambahkan beberapa pengaturan dan bidang ke tab kami sehingga Anda dapat menetapkan harga dan berbagai opsi untuk jenis produk kustom Anda. Untuk ini, tambahkan kode ini ke file utama plugin Anda:

 add_action( 'woocommerce_product_data_panels', 'QL_custom_product_options_product_tab_content' );

fungsi QL_custom_product_options_product_tab_content() {
// Jangan lupa untuk mengubah id di div dengan target tab produk Anda
?><div class='panel woocommerce_options_panel'><?php
?><div class='options_group'><?php

woocommerce_wp_kotak centang( larik(
'id' => '_enable_custom_product',
'label' => __( 'Aktifkan Jenis Produk Khusus'),
) );

woocommerce_wp_text_input(
Himpunan(
'id' => 'demo_product_info',
'label' => __( 'Detail Produk Khusus', 'dm_product' ),
'tempat penampung' => '',
'desc_tip' => 'benar',
'deskripsi' => __( 'Masukkan detail produk Demo.', 'dm_product' ),
'ketik' => 'teks'
)
);


?></div>
</div><?php
}

Ini akan menambahkan opsi kotak centang untuk mengaktifkan jenis produk khusus dan bidang teks khusus untuk produk. Tentu saja, Anda dapat menambahkan lebih banyak pengaturan menggunakan fungsi WooCommerce lainnya, seperti woocommerce_wp_select() untuk daftar drop-down, woocommerce_wp_textarea_input() untuk area teks, dan banyak lagi.

Namun untuk demo kami, kami hanya akan menampilkan informasi teks sederhana terkait produk kustom yang dapat disesuaikan oleh admin dari backend.

Anda dapat mempelajari lebih lanjut tentang fungsi-fungsi ini dan cara menggunakannya di sini.

Menyimpan Bidang Tab Jenis Produk WooCommerce Kustom

Sekarang kita telah membuat pengaturan tipe produk kita, kita harus menyimpannya ke database kita. Ini dilakukan dengan menggunakan kait woocommerce_process_product_meta. Untuk ini, kami akan menggunakan baris kode ini:

 add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings');

fungsi save_demo_product_settings( $post_id ){

$demo_product_info = $_POST['demo_product_info'];

if( !kosong( $demo_product_info ) ) {
update_post_meta( $post_id, 'demo_product_info', esc_attr( $demo_product_info ) );
}
}

Setelah Anda menambahkan kode ini ke file utama plugin Anda, Anda akan dapat menyimpan pengaturan jenis produk kustom Anda saat memperbarui atau menerbitkan produk.

Namun, kode ini hanya untuk backend dan sekarang akan ditampilkan di front end produk Anda hingga kami menentukan template untuk digunakan WooCommerce. Untuk ini, kami akan menggunakan langkah selanjutnya dari tutorial kami untuk menampilkan konten untuk jenis produk kustom kami.

Tambahkan Konten untuk Jenis Produk Kustom

Anda baru saja membuat jenis produk khusus untuk situs web Anda, tetapi Anda juga perlu menentukan ke WooCommerce jenis konten apa yang Anda inginkan dari jenis produk tersebut. Untuk ini, kami akan menggunakan hook woocommerce_single_product_summary untuk menambahkan info produk yang kami tambahkan ke tab Detail Produk Khusus.

 add_action( 'woocommerce_single_product_summary', 'demo_product_front' );

fungsi demo_product_front () {
global $produk;
if ( 'demo' == $product->get_type() ) { 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

Pastikan ID jenis produk Anda cocok dengan kode if ('demo' == $product->get_type() , seperti yang kami sebutkan di atas. Setelah Anda menyimpan kode ini, Anda akan melihat detail produk kustom Anda di bagian depan.

Cuplikan Kode Lengkap

Demi kenyamanan Anda, kami telah menggabungkan berbagai kode ke dalam satu set, jadi Anda cukup menempelkannya ke file utama plugin Anda dan mengeditnya seperlunya.

 <?php
/**
* Nama Plugin: Jenis produk Kustom QuadLayers
* Deskripsi: Plugin untuk menambahkan jenis produk khusus ke WooCommerce
* Penulis: QuadLayers
* Penulis URI: https://www.quadlayers.com
* Versi: 1.0
*/


defined( 'ABSPATH' ) atau keluar;

add_action( 'init', 'register_demo_product_type' );
fungsi register_demo_product_type() {
kelas WC_Product_Demo memperluas WC_Product {

fungsi publik __construct( $produk ) {
$this->product_type = 'demo';
induk::__construct( $produk );
}
}
}


add_filter( 'product_type_selector', 'add_demo_product_type' );
fungsi add_demo_product_type( $types ){
$types[ 'demo' ] = __( 'Demo produk', 'dm_product' );
kembalikan $jenis; 
}


add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab' );
fungsi demo_product_tab( $tab) {

$tab['demo'] = larik(
'label' => __( 'Produk Demo', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
kembalikan $tab;
}


add_action( 'woocommerce_product_data_panels', 'demo_product_tab_product_tab_content' );
fungsi demo_product_tab_product_tab_content() {
?><div class='panel woocommerce_options_panel'><?php
?><div class='options_group'><?php


woocommerce_wp_kotak centang( larik(
'id' => '_enable_custom_product',
'label' => __( 'Aktifkan Jenis Produk Khusus'),
) );


woocommerce_wp_text_input(
Himpunan(
'id' => 'demo_product_info',
'label' => __( 'Demo detail produk', 'dm_product' ),
'placeholder' => 'Masukkan teks untuk ditampilkan di ujung depan sini',
'desc_tip' => 'benar',
'deskripsi' => __( 'Masukkan Info produk Demo.', 'dm_product' ),
'ketik' => 'teks'
)
);
?></div>
</div><?php
}

add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings');

fungsi save_demo_product_settings( $post_id ){

$enable_custom_product = isset( $_POST['_enable_custom_product'] ) ? 'ya Tidak';
update_post_meta( $post_id, '_enable_custom_product', $enable_custom_product );
$demo_product_info = $_POST['demo_product_info'];

if( !kosong( $demo_product_info ) ) {
update_post_meta( $post_id, 'demo_product_info', esc_attr( $demo_product_info ) );
}
}


add_action( 'woocommerce_single_product_summary', 'demo_product_front' );

fungsi demo_product_front () {
global $produk;
if ( 'demo' == $product->get_type() ) { 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

Tentu saja, semua langkah yang kami tunjukkan dalam tutorial ini cukup sederhana, dan Anda dapat dan harus mencoba menambahkan lebih banyak bidang, pengaturan, dan konten ke jenis produk kustom Anda. Juga, seperti yang Anda lihat, tutorial ini agak berat pemrograman. Jadi, jika Anda baru mengenal WordPress atau pengkodean, Anda selalu dapat meminta bantuan kami di bagian komentar. Selain itu, Anda juga dapat melakukan hal-hal yang sangat berbeda dan menggunakan file functions.php tema Anda untuk menambahkan semua kode ini ke situs web Anda.

Ini akan melewatkan langkah dalam membuat plugin WordPress, tetapi perhatikan bahwa perubahan Anda akan hilang jika Anda mengubah atau memperbarui tema Anda (kecuali jika Anda menggunakan tema anak.) Kami sangat menyarankan menggunakan plugin untuk metode ini, tetapi jika Anda lebih suka untuk menggunakan file functions.php, Anda dapat melakukannya.

Selalu ingat untuk mengambil cadangan lengkap situs WordPress Anda sebelum membuat perubahan pada file functions.php. Dengan begitu, jika terjadi kesalahan, Anda selalu dapat kembali ke versi yang berfungsi.

Cukup klik Appearance > Theme File Editor dan klik Theme functions atau functions.php di sisi kanan File tema.

Kemudian, Anda cukup menempelkan kode di atas ke dalam editor dan klik Perbarui File untuk menyelesaikan.

Kesimpulan

Dan itu mengakhiri semua langkah yang diperlukan untuk membuat jenis produk WooCommerce khusus secara terprogram . Mari kita rangkum dengan cepat semua langkah yang diperlukan untuk membuat jenis produk kustom Anda:

• Buat dan aktifkan plugin untuk Jenis Produk WooCommerce Kustom Anda.
• Daftarkan jenis produk baru Anda.
• Tambahkan tab untuk jenis produk khusus Anda untuk halaman produk tunggal.
• Tambahkan bidang dan pengaturan ke tab produk Anda.
• Simpan bidang dan pengaturan di tab produk Anda.
• Tampilkan konten tab produk Anda di ujung depan.

Terakhir, untuk kenyamanan Anda, kami menggabungkan semua bagian kode yang berbeda untuk memberi Anda kode lengkap. Jadi, Anda cukup menyalin seluruh kode dari file utama Anda dan melakukan perubahan seperlunya.

Kami harap artikel ini bermanfaat bagi Anda. Jika Anda ingin mempelajari lebih lanjut tentang pengaturan berbagai pengaturan WooCommerce dan pilihan produk, lihat beberapa artikel kami yang lain:

• Cara Mengatur Diskon Massal WooCommerce
• Cara membuat pengguna WordPress secara terprogram
• Membuat Bidang Kustom WordPress Secara Terprogram