Cuplikan Kode WooCommerce Terbaik untuk WordPress

Diterbitkan: 2023-05-12

Apakah Anda ingin mengetahui cuplikan kode WooCommerce terbaik untuk WordPress ? Jika Anda berencana mengubah toko online Anda dan menambahkan lebih banyak fitur, teruslah membaca artikel ini. Panduan ini akan menunjukkan kepada Anda sekumpulan cuplikan kode yang harus Anda ketahui.

Tapi pertama-tama, mari kita lihat apa itu cuplikan kode dan mengapa kita perlu menggunakannya.

Apa Itu Cuplikan Kode?

Cuplikan kode adalah bagian kecil kode yang menjalankan tugas atau fungsi tertentu di situs web atau program. Ini sering digunakan untuk menyesuaikan situs web/alat dan meningkatkan fitur.

Anda dapat menulis cuplikan kode dalam bahasa pemrograman apa pun, mulai dari kompleksitas dari satu baris sederhana hingga fungsi atau algoritme multi-baris. Selain itu, Anda juga dapat menemukannya secara online di pustaka kode, forum, dan blog pemrograman, dan sering kali dibagikan dan dimodifikasi oleh pengembang agar sesuai dengan kebutuhan khusus mereka.

Menggunakan cuplikan kode dapat menghemat waktu dan tenaga. Tetapi penting untuk memahami cara kerja kode dan memastikannya aman dan tidak menyebabkan kerentanan apa pun. Selain itu, saat menggunakan cuplikan kode dari sumber eksternal, memeriksa persyaratan lisensi dan atribusi sangat penting untuk menghindari pelanggaran hak cipta.

Mengapa Menambahkan Cuplikan Kode WooCommerce ke WordPress?

Jika Anda menggunakan cuplikan kode WooCommerce untuk WordPress, ini akan menguntungkan pemilik dan pengembang.

Misalnya, Anda dapat menggunakan cuplikan kode WooCommerce untuk menambahkan fungsionalitas baru atau mengubah fitur toko online yang sudah ada. Ini dapat membantu meningkatkan pengalaman pengguna dan meningkatkan penjualan.

Misalnya, Anda dapat menggunakan cuplikan kode untuk menambahkan opsi penyortiran produk kustom atau untuk mengubah proses checkout agar lebih sesuai dengan kebutuhan bisnis tertentu.

Selain itu, menggunakan cuplikan kode WooCommerce untuk WordPress bisa lebih efisien daripada memasang dan mengonfigurasi plugin terpisah karena memungkinkan modifikasi yang lebih bertarget dan menghindari potensi konflik dengan plugin atau tema lain.

Selain itu, cuplikan kode WooCommerce dapat membantu meningkatkan keamanan dan kinerja toko online. Dengan menambahkan kode khusus ke file functions.php atau file plugin terpisah, pengembang dapat memastikan bahwa kode tersebut dioptimalkan untuk kebutuhan khusus situs web.

Terakhir, cuplikan kode dapat memberikan solusi yang lebih hemat biaya daripada menyewa pengembang. Meskipun beberapa penyesuaian mungkin memerlukan pekerjaan pengembangan yang lebih kompleks, Anda dapat mencapai banyak modifikasi menggunakan cuplikan kode sederhana yang ditemukan online.

Namun, kode yang ditulis dengan buruk dapat menyebabkan kesalahan dan kerentanan keamanan. Jadi, kami menyarankan untuk menguji dan memahami kode di lingkungan pementasan sebelum menambahkannya ke situs web.

Juga, simpan cadangan file dan database situs web untuk mengamankan kerja keras Anda.

Cara Menambahkan Cuplikan Kode WooCommerce ke WordPress

Anda dapat menambahkan cuplikan kode WooCommerce ke WordPress dalam beberapa langkah sederhana:

  • Buka file functions.php: File functions.php adalah tempat Anda dapat menemukan sebagian besar cuplikan kode WordPress. Biasanya ada di folder tema; Anda dapat mengaksesnya melalui dasbor WordPress atau klien FTP.
  • Tambahkan cuplikan kode: Salin dan tempel cuplikan yang diinginkan ke dalam file functions.php. Pastikan untuk menambahkannya di lokasi yang sesuai, seperti di akhir file, setelah kode yang ada.
  • Simpan perubahan: Setelah Anda menambahkan cuplikan kode, simpan perubahan ke file functions.php. Ini akan mengaktifkan kode yang baru saja Anda masukkan.
  • Uji fungsi: Setelah menambahkan cuplikan kode, uji fungsi baru untuk memastikan berfungsi sebagaimana mestinya.

Namun, jika Anda tidak ingin menambahkan cuplikan kode ke file functions.php tema induk, Anda dapat membuat tema anak khusus. Dengan cara ini, pembaruan tema tidak akan menimbulkan masalah.

Cuplikan Kode WooCommerce Terbaik untuk WordPress

Sekarang kita telah mempelajari mengapa dan bagaimana cara menambahkan potongan kode WooCommerce untuk WordPress. Selanjutnya, mari beralih ke cuplikan kode WooCommerce terbaik yang dipilih untuk kebutuhan umum Anda.

Singkatnya, kode yang akan kami bagikan akan membantu Anda untuk:

  • Menambahkan tab produk khusus
  • Tambahkan dukungan WooCommerce ke tema
  • Tambahkan mata uang khusus ke WooCommerce
  • Tampilkan tautan "Akun Saya" di templat
  • Selesaikan pesanan secara otomatis
  • Ubah jumlah produk yang ditampilkan di toko
  • Nonaktifkan pencarian
  • Ubah teks tombol tambah ke keranjang
  • Tweak judul halaman toko

Mari kita lihat lebih dalam pada setiap kode.

1) Tambahkan Tab Produk Kustom

Menambahkan tab produk khusus di WooCommerce adalah cara terbaik untuk menampilkan informasi tambahan tentang produk Anda. Jadi, inilah cuplikan kode yang memungkinkan Anda untuk menambahkannya:

 // Tambahkan tab produk khusus

add_filter( 'woocommerce_product_tabs', 'add_custom_product_tab' );
fungsi add_custom_product_tab( $tabs ) {
$tabs['custom_tab'] = larik(
'judul' => __( 'Tab Kustom', 'woocommerce' ),
'prioritas' => 50,
'callback' => 'custom_product_tab_content'
);

kembalikan $tab;

}

// Konten tab produk khusus

fungsi custom_product_tab_content() {
echo '<h2>Tab Produk Khusus</h2>';
echo '<p>Konten khusus ditempatkan di sini.</p>';
}

Kode ini menambahkan tab "Tab Khusus" baru ke halaman produk, dengan prioritas 50. Selain itu, Anda dapat mengubah judul dan konten tab produk khusus sesuai kebutuhan Anda. Fungsi callback custom_product_tab_content menampilkan konten tab. Anda dapat menyesuaikan kode sesuai dengan kebutuhan Anda.

2) Nyatakan Dukungan WooCommerce dalam Tema Pihak Ketiga

Jika Anda menggunakan tema pihak ketiga yang tidak menyediakan dukungan WooCommerce secara default, Anda dapat menambahkan memperbaiki masalah dengan menambahkan cuplikan kode berikut ke file functions.php tema situs web Anda:

 // Tambahkan Dukungan WooCommerce ke tema

fungsi mytheme_add_woocommerce_support() {
add_theme_support( 'woocommerce' );
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

Sumber: Sedang.

3) Menambahkan Mata Uang Khusus ke WooCommerce

Jika Anda ingin menambahkan mata uang khusus ke WooCommerce, Anda dapat menggunakan cuplikan kode berikut:

 // Tambahkan mata uang khusus ke WooCommerce

function add_my_currency( $currencies ) {
$currencies['ABC'] = __( 'Mata Uang Saya', 'woocommerce' );
mengembalikan $mata uang;
}

add_filter( 'woocommerce_currency', 'add_my_currency');
function add_my_currency_symbol( $currency_symbols ) {
$currency_symbols['ABC'] = '$'; // Ubah ABC ke kode mata uang khusus Anda dan $ ke simbol mata uang Anda.
kembalikan $currency_symbols;
}

add_filter( 'woocommerce_currency_symbols', 'add_my_currency_symbol');

Di sini, kami menggunakan dua filter – woocommerce_currencies dan woocommerce_currency_symbols untuk menambahkan mata uang khusus dan simbolnya. Pertama, Anda menambahkan nama dan kode mata uang Anda ke daftar mata uang yang tersedia. Kedua, Anda dapat menambahkan simbol mata uang untuk kode mata uang khusus.

4) Tampilkan Tautan Akun Saya di File Templat

Untuk menampilkan tautan akun saya di file template di WooCommerce, Anda dapat menggunakan potongan kode berikut:

 <?php jika ( is_user_logged_in() ) : ?>

<a href="<?php echo esc_url( wc_get_account_endpoint_url( 'dashboard' ) ); ?>"><?php esc_html_e( 'Akun Saya', 'woocommerce' ); ?></a>

<?php lain: ?>

<a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>"><?php esc_html_e( 'Masuk / Daftar', 'woocommerce' ); ?></a>

<?php endif; ?>

Kode ini memeriksa apakah pengguna masuk menggunakan fungsi is_user_logged_in() .

Jika pengguna masuk, tautan ke dasbor akan ditampilkan menggunakan fungsi wc_get_account_endpoint_url( 'dashboard' ) . Namun, jika pengguna tidak masuk, ini menunjukkan tautan ke halaman Akun Saya menggunakan fungsi wc_get_page_permalink( 'myaccount' ) .

Anda dapat menambahkan kode ini ke file template apa pun di tema WooCommerce tempat Anda ingin menampilkan tautan akun saya. Misalnya, Anda dapat menambahkannya ke file header.php untuk menampilkan tautan di header situs Anda.

5) Secara Otomatis Menyelesaikan Pesanan

Jika Anda ingin menyelesaikan pesanan di WooCommerce secara otomatis, Anda dapat menggunakan cuplikan kode berikut:

 // pesanan lengkapi otomatis
add_action( 'woocommerce_thankyou', 'custom_woocommerce_auto_complete_order' );

fungsi custom_woocommerce_auto_complete_order( $order_id ) {
jika ( ! $pesanan_id ) {
kembali;
}

$order = wc_get_order( $order_id );
$order->update_status( 'selesai' );
}

Sumber: StackOverflow

Kode ini menambahkan pengait tindakan ke fungsi woocommerce_thankyou , yang dipicu saat pesanan selesai. Saat pengait ini diaktifkan, fungsi custom_woocommerce_auto_complete_order dijalankan.

Fungsi pertama memeriksa apakah variabel $order_id disetel. Jika tidak disetel, ia kembali. Jika tidak, ia mengakses objek order dari fungsi wc_get_order() .

Akhirnya, ia menggunakan metode update_status() untuk menempatkan status pesanan menjadi “selesai.”

Harap perhatikan bahwa menyelesaikan pesanan secara otomatis mungkin tidak cocok untuk semua produk atau bisnis. Jadi penting untuk mempertimbangkan kebutuhan spesifik Anda sebelum mengaktifkan kode ini.

6) Ubah Jumlah Produk yang Ditampilkan per Halaman

Jika Anda ingin mengubah jumlah produk yang ditampilkan per halaman di WooCommerce, Anda dapat menggunakan cuplikan kode berikut:

 // ubah produk per jumlah halaman
add_filter( 'loop_shop_per_page', 'custom_loop_shop_per_page', 22 );
function custom_loop_shop_per_page( $cols ) {
$kolom = 14; // Ubah nomor ini menjadi jumlah produk yang diinginkan per halaman.
return $cols;

}

Kode ini menambahkan filter ke fungsi loop_shop_per_page . Itu mengontrol jumlah produk yang ditampilkan per halaman di WooCommerce. Fungsi custom_loop_shop_per_page kemudian dijalankan, yang menggunakan jumlah kolom saat ini sebagai parameter.

Dalam fungsi, Anda juga dapat mengatur variabel $cols ke jumlah produk per halaman yang diinginkan (dalam contoh ini, 14). Terakhir, Anda mendapatkan jumlah kolom yang diperbarui.

Mengubah jumlah produk yang ditampilkan per halaman dapat memengaruhi pengalaman pengguna dan waktu muat halaman. Jadi penting untuk mempertimbangkan kebutuhan spesifik Anda sebelum mengubah pengaturan ini.

7) Nonaktifkan Pencarian

Untuk menonaktifkan pencarian di WordPress, Anda dapat menggunakan potongan kode berikut:

 // Nonaktifkan pencarian
fungsi fb_filter_query( $query, $error = true ) {
jika ( is_search() ) {
$query->is_search = false;
$query->query_vars[s] = false;
$query->query[s] = false;

// untuk kesalahan
jika ( $kesalahan == benar )
$query->is_404 = true;
}
}

add_action( 'parse_query', 'fb_filter_query' );
add_filter( 'get_search_form', create_function( '$a', "return null;" ) );

Sumber: StackOverflow

Kode ini menggunakan fungsi khusus yang disebut custom_disable_search() untuk menonaktifkan fungsi pencarian di WordPress. Di sini Anda menambahkan kait tindakan ke fungsi parse_query , yang dipicu saat kueri penelusuran dijalankan.

Dalam fungsinya, ia memeriksa apakah kueri saat ini adalah kueri penelusuran (is_search()); jika demikian, ini menyetel properti is_search dari objek kueri ke nol. Ini juga menyetel variabel kueri s ke null, secara efektif menonaktifkan kueri penelusuran.

Terakhir, cuplikan kode ini menambahkan filter ke get_search_form untuk menyembunyikan formulir pencarian dari situs WordPress Anda.

8) Ubah Add to the Cart Button Text

Untuk mengubah teks tombol “Tambahkan ke Troli” di WooCommerce, Anda dapat menggunakan cuplikan kode berikut:

 add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text' );
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text' );

fungsi custom_add_to_cart_text() {
return __( 'Beli Sekarang', 'woocommerce');
}

Sumber: Njengah

Kode ini menambahkan dua filter ke fungsi woocommerce_product_single_add_to_cart_text dan woocommerce_product_add_to_cart_text , yang mengontrol teks tombol “Add to Cart” di WooCommerce. Fungsi custom_add_to_cart_text() kemudian dijalankan, yang mengembalikan teks tombol yang diperbarui.

Kami menggunakan fungsi __() untuk mengakses teks "Beli Sekarang" yang ditentukan dalam file terjemahan WooCommerce. Jika Anda ingin mengubah teks menjadi sesuatu yang lain, ganti 'Beli Sekarang' dengan teks yang Anda inginkan.

9) Ganti Judul Halaman Toko di WooCommerce

Untuk mengganti judul halaman toko di WooCommerce, Anda dapat menggunakan cuplikan kode berikut:

 add_filter( 'woocommerce_page_title', 'custom_shop_page_title');
fungsi custom_shop_page_title( $page_title ) {
if( 'toko' == $page_title ) {
return __( 'Judul Toko Baru', 'woocommerce');
}

kembalikan $page_title;
}

Kode ini akan menambahkan filter ke fungsi woocommerce_page_title , yang mengontrol judul halaman toko WooCommerce. Fungsi custom_shop_page_title() kemudian dijalankan, yang memeriksa apakah judul halaman adalah "toko" dan, jika ya, mengembalikan judul yang diperbarui ("Judul Toko Baru").

Cuplikan kode ini menggunakan fungsi __() untuk mengakses teks terjemahan untuk judul halaman toko yang diperbarui, yang ditentukan dalam file terjemahan WooCommerce. Namun, jika Anda ingin mengubah teks menjadi sesuatu yang lain, ganti 'Judul Toko Baru' dengan teks yang Anda inginkan.

Kesimpulan

Menggunakan potongan kode WooCommerce untuk WordPress adalah cara ampuh untuk menyesuaikan toko online Anda dan menambahkan fungsionalitas baru. Misalnya, jika Anda ingin mengubah tampilan toko, proses checkout, atau menambahkan fitur baru, cuplikan kode dapat membantu Anda mencapai tujuan.

Untuk menambahkan cuplikan kode, rekatkan kode ke file functions.php tema anak Anda atau buat plugin khusus. Namun perlu diingat bahwa mengubah kode situs web Anda dapat menimbulkan konsekuensi yang tidak diinginkan. Oleh karena itu, kami selalu menyarankan untuk membuat cadangan situs Anda sebelum melakukan perubahan apa pun.

Dengan kode yang kami berikan di atas, Anda dapat menjalankan toko WooCommerce yang fantastis dengan banyak penyesuaian. Singkatnya, kami telah membagikan cuplikan untuk

  • Menambahkan tab produk khusus
  • Tambahkan dukungan WooCommerce ke tema
  • Tambahkan mata uang khusus ke WooCommerce
  • Tampilkan tautan "Akun Saya" di templat
  • Selesaikan pesanan secara otomatis
  • Ubah jumlah produk yang ditampilkan di toko
  • Nonaktifkan pencarian
  • Ubah teks tombol tambah ke keranjang
  • Tweak judul halaman toko

Anda dapat memilih kode dan mengerjakannya tergantung pada kebutuhan Anda.

Kami harap Anda menemukan artikel ini bermanfaat dan senang membacanya. Jika Anda mau, pertimbangkan untuk membagikan postingan ini dengan teman dan sesama blogger di media sosial. Anda juga dapat membuka arsip blog kami untuk mempelajari lebih lanjut panduan WordPress/WoCommerce.

Apakah kami perlu menambahkan cuplikan lain ke panduan ini?

Beri tahu kami di komentar di bawah.

Artikel serupa yang mungkin Anda sukai:

  • Cara Memfilter Produk WooCommerce berdasarkan Atribut
  • Plugin Donasi WooCommerce Terbaik
  • Plugin Manajer Lisensi WooCommerce Terbaik