Cara menyesuaikan template WooCommerce secara terprogram

Diterbitkan: 2021-05-04

Apakah Anda ingin mengedit template di situs Anda? Panduan ini akan menunjukkan kepada Anda cara menyesuaikan template WooCommerce secara terprogram baik dengan kait maupun menimpanya .

Mengapa mengedit template WooCommerce?

Berbelanja online lebih nyaman dan lebih cepat daripada pergi ke toko fisik, jadi eCommerce telah menjadi sangat populer dalam beberapa tahun terakhir. Dengan begitu banyak persaingan, tidak cukup hanya menyiapkan toko WooCommerce Anda dan menempatkan produk Anda secara online. Anda perlu menemukan cara untuk membedakan dan menonjol dari keramaian .

Salah satu cara terbaik untuk melakukannya adalah dengan menyesuaikan toko Anda. Selain mengubah header dan mengedit halaman kunci seperti halaman checkout atau toko, Anda juga dapat menyesuaikan template yang Anda gunakan. Tidak banyak situs yang mengedit template mereka, jadi dengan melakukan itu Anda akan dapat memiliki keunggulan atas pesaing Anda .

Jika Anda memiliki keterampilan pengkodean, Anda mungkin tahu bahwa menggunakan tema anak dianjurkan saat mengedit toko Anda. Demikian pula, kait bawaan WordPress dan WooCommerce menawarkan banyak kemungkinan untuk mengedit dan menambahkan fitur baru ke situs web mana pun.

Cara menyesuaikan template WooCommerce secara terprogram

Ada dua cara utama untuk menyesuaikan template WooCommerce secara terprogram:

  1. Dengan kait
  2. Menimpa template

Masing-masing metode ini memiliki tujuan yang berbeda. Mari kita lihat lebih dekat perbedaan utama mereka.

Timpa file template atau gunakan kait?

Menyesuaikan toko Anda dengan kait adalah praktik yang disarankan. Namun, saat menyesuaikan WooCommerce dengan kait, Anda mungkin menghadapi masalah ketidakcocokan. Untuk penyesuaian yang lebih kompleks, menimpa file template WooCommerce bisa menjadi opsi yang lebih baik.

Penting untuk dicatat bahwa ketika Anda menimpa file template, kait yang bekerja pada file tersebut akan berhenti bekerja. Setiap hook menunjuk ke file tertentu, jadi Anda tidak akan dapat menggunakannya jika Anda mengedit file yang sama yang memicu hook.

Sebagai contoh, mari ambil file single-product.php untuk melihat bagaimana hook dibuat. Juga, perhatikan di mana kait berada sebelum dan sesudah loop.

 jika ( ! didefinisikan( 'ABSPATH' ) ) {
        keluar; // Keluar jika diakses langsung
 }
 get_header('toko'); ?>
 <?php
                /**
                 * pengait woocommerce_before_main_content.
                 *
                 * @hooked woocommerce_output_content_wrapper - 10 (mengeluarkan div pembuka untuk konten)
                 * @hooked woocommerce_breadcrumb - 20
                 */
                do_action('woocommerce_before_main_content');
        ?>
                <?php while ( have_posts() ) : ?>
                        <?php the_post(); ?>
                        <?php wc_get_template_part( 'konten', 'produk tunggal' ); ?>
                <?php akhir; // akhir perulangan. ?>
        <?php
                /**
                 * pengait woocommerce_after_main_content.
                 *
                 * @hooked woocommerce_output_content_wrapper_end - 10 (mengeluarkan div penutup untuk konten)
                 */
                do_action('woocommerce_after_main_content');
        ?>
        <?php
                /**
                 * pengait woocommerce_sidebar.
                 *
                 * @hooked woocommerce_get_sidebar - 10
                 */
                do_action('woocommerce_sidebar');
        ?>
 <?php
 get_footer('toko');

Jika Anda melihat skripnya, Anda akan melihat bagaimana kami membuat kait pada do_action('name-of-the-hook'); garis.

Katakanlah Anda memiliki pengait berikut pada file functions.php dari tema anak Anda:

 add_action('woocommerce_after_main_content',function(){echo "konten khusus setelah file template produk tunggal";});

Anda dapat menggemakan konten yang sama langsung pada file template sebagai berikut:

 <?php akhir; // akhir perulangan. ?>
        <?php
 echo “konten khusus setelah file template produk tunggal”;
                /**
                 * pengait woocommerce_after_main_content.
 do_action('woocommerce_after_main_content');

Namun, dengan melakukannya, do_action('woocommerce_after_main_content'); fungsi akan menjadi tidak berguna karena Anda telah menambahkan kode Anda di sana alih-alih menariknya dengan kail. Jadi, Anda mungkin ingin menghapus semua kait yang tidak perlu dalam file yang menghapus do_action('name-of-the-hook'); bagian.

Ingatlah bahwa jika Anda menggunakan kait woocommerce_after_main_content() di tempat lain di situs web Anda dan Anda menghapus do_action( 'name_of_your_hook' ); dalam file ini, pengait tidak akan berfungsi lagi.

Setelah menghapus kait dan tag PHP yang tidak perlu, file Anda akan terlihat seperti ini:

 jika ( ! didefinisikan( 'ABSPATH' ) ) {
 keluar; // Keluar jika diakses langsung
 }
 get_header('toko');
 while ( have_posts() ):
 the_post();
 wc_get_template_part( 'konten', 'produk tunggal');
 sementara; // akhir perulangan.
 do_action('woocommerce_sidebar');
 get_footer('toko');
 CATATAN : Menghapus kait dengan cara ini dapat memengaruhi kode pihak ketiga seperti plugin dan tema, menyebabkan kegagalan atau merusak situs web Anda. Diasumsikan bahwa Anda tahu apa yang Anda lakukan.
		


 Sesuaikan dan timpa file template WooCommerce
 Menimpa file template WooCommerce memberi Anda banyak fleksibilitas untuk menyesuaikan toko Anda. Namun, seperti yang disebutkan sebelumnya, Anda harus memahami bahwa ketika Anda menimpa konten file template, kait yang bekerja pada file tersebut akan berhenti bekerja. Selain itu, WooCommerce dapat mengubah file template dari waktu ke waktu, jadi jika ada pembaruan dan mereka mengubah file, Anda mungkin menemukan bahwa file yang Anda edit kedaluwarsa.
 Hal-hal yang perlu diingat saat menimpa template
 Jika Anda di sini, Anda mungkin memiliki beberapa keterampilan pengkodean dan Anda tahu cara menggunakan dan memasang tema anak. Jika bukan itu masalahnya, lihat panduan kami untuk membuat tema anak atau gunakan salah satu plugin ini.
		


 Menimpa template WooCommerce mirip dengan menimpa file functions.php . Perbedaan utamanya adalah Anda mengedit file template WooCommerce alih-alih file tema Anda.
 Untuk melakukannya, Anda perlu menyalin file template yang diinginkan dari folder template plugin WooCommerce dan menempelkannya ke tema anak Anda di bawah folder WooCommerce. Jika Anda mengikuti struktur folder template WooCommerce, nama file, dan subfolder yang sama; Anda akan dapat menimpa file template, bahkan yang ada di dalam subfolder.
 Ada banyak file template WooCommerce dan masing-masing bertanggung jawab untuk satu tugas. Anda dapat memeriksa daftar lengkap file template yang dapat Anda edit serta subdirektori dan struktur folder di tautan ini.
		


 Seperti yang Anda lihat, ada beberapa file di folder template root serta beberapa subdirektori. Anda dapat menyesuaikan file di dalam subdirektori apa pun dengan cara yang sama seperti Anda mengedit file utama seperti archive-product.php , single-product.php atau content-single-product.php . Demikian pula, Anda juga dapat menyesuaikan file di keranjang, Akun saya, email, atau folder checkout jika Anda mengikuti nama folder dan struktur yang sama seperti di tema anak Anda.
 Jadi jika Anda ingin menyesuaikan beberapa file ini, tema anak Anda akan terlihat seperti ini: Cara menyesuaikan template woocommerce secara terprogram
 Karena itu, mari kita lihat beberapa contoh hal yang dapat Anda lakukan untuk menyesuaikan template WooCommerce.
		


 1. Tambahkan kode pendek ke template WooCommerce
 Salah satu alternatif yang menarik adalah menggunakan kode pendek dalam kode Anda. Sebagian besar kode pendek yang ada seharusnya berfungsi di sini, tetapi juga umum untuk menemukan beberapa kode pendek yang tidak didukung di luar yang resmi WooCommerce dan WordPress.
 Misalnya, skrip berikut akan menyertakan dasbor akun di semua halaman produk tunggal. Ingatlah untuk menempelkannya pada file single-product.php yang telah Anda buat pada tema anak Anda.
 <?php
 jika ( ! didefinisikan( 'ABSPATH' ) ) {
 keluar; // Keluar jika diakses langsung
 }
 get_header('toko');
 while ( have_posts() ):
 the_post();
 wc_get_template_part( 'konten', 'produk tunggal');
 sementara; // akhir perulangan.
 do_action('woocommerce_sidebar');
 $t= '<div><h4>Akun Saya</h4>';
 $t.= do_shortcode(" [ woocommerce_my_account ] ");
 $t.="</div>";
 gema $t;
 get_footer('toko');
 Dan ini adalah hasil pada halaman produk langsung: 
		


Sesuaikan file template woocommerce - Tambahkan kode pendek ke template wc
 2. Tampilkan konten untuk pelanggan yang membeli produk itu sebelumnya
 Jika Anda memiliki pelanggan yang telah membeli produk dari Anda dan kembali untuk membeli produk yang sama lagi, Anda dapat memberi mereka kode diskon sebagai cara untuk meningkatkan pengalaman mereka dan membuat mereka kembali ke toko Anda berulang kali.
 Skrip berikut akan menampilkan konten pada halaman produk untuk pelanggan kembali yang membeli produk yang sama sebelumnya. Sekali lagi, kita edit file single-product.php :
 get_header('toko');
 while ( have_posts() ):
 the_post();
 wc_get_template_part( 'konten', 'produk tunggal');
 sementara; // akhir perulangan.
 $current_user = wp_get_current_user();
 if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
 echo '<div class="dibeli pengguna">&hati; Hai ' . $current_user->nama_pertama . ', Anda pernah membeli ini sebelumnya. Beli lagi menggunakan kupon ini: <b>PURCHASE_AGAIN_21</b></div>';
 berakhir jika;
 get_footer('toko'); 
Kustomisasi file template woocommerce - Tampilkan konten untuk pelanggan yang dibeli-sebelum kembali
		


 3. Hapus tombol tambahkan ke troli berdasarkan jumlah produk dan harga total troli
 Contoh menarik lainnya jika Anda ingin menyesuaikan template WooCommerce Anda secara terprogram adalah dengan menambahkan tombol Keranjang tergantung pada jumlah item yang dibeli pelanggan serta harga total keranjang.
 Dalam hal ini, kita akan masuk ke loop WooCommerce menggunakan file yang terletak di dalam folder loop di direktori template. Cukup buat file add-to-cart.php di bawah folder bernama loop , di bawah folder woocommerce tema anak Anda, dan rekatkan skrip ini:
 jika ( ! didefinisikan( 'ABSPATH' ) ) {
 keluar;
 }
 global $produk;
 $hitung= WC()->keranjang->get_cart_contents_count();
 $total_price= WC()->keranjang->get_cart_total();
 preg_match_all('!\d+!', $total_price, $matches);
 $to_int = intval($matches[0][1]);
 if($to_int>500){
 echo "Melebihi jumlah batas untuk total keranjang";
 }
 elseif($hitung<10){
 echo apply_filters(
 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok.
 lari cepat(
 '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
 esc_url( $produk->add_to_cart_url() ),
 esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
 esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
 isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
 esc_html( $produk->add_to_cart_text() )
 ),$produk,$args);
 }
 kalau tidak{
 echo "Batas jumlah terlampaui";
 }
 Dalam hal ini, kami menambahkan pernyataan logika bersyarat if() untuk memeriksa apakah ada lebih dari 10 item yang ditambahkan ke keranjang, dan total harga keranjang tidak lebih dari $500.
 Seperti yang Anda lihat, kita masuk ke ruang lingkup kelas WooCommerce yang memanggil objek WooCommerce dengan cara ini: WC()->cart . Dengan cara ini, Anda dapat mengambil beberapa informasi untuk menambahkan tombol keranjang ke halaman toko atau tidak, berdasarkan persyaratan Anda.
 Berikut adalah hasil ketika menerapkan kedua pembatasan bersyarat: 
Hapus tombol tambahkan ke troli berdasarkan jumlah produk dan harga total troli
 Ingatlah bahwa ini hanya akan berfungsi di halaman toko utama. Anda perlu menambahkan beberapa kode lagi jika ingin melakukan hal yang sama di halaman lain.
 4. Edit file template email WooCommerce
 Template email sudah menyertakan tautan yang berguna ke situs web Anda, tetapi beberapa pengguna mungkin tidak menyadarinya. Jadi mari tambahkan tautan ke template email tempat pengguna dapat masuk ke situs web langsung dari email yang mereka terima.
 Kami akan menambahkan tautan ke header tata letak email, jadi kami memerlukan salinan file email-header.php , yang terletak di folder email subdirektori template WooCommerce.
 Buat folder baru di tema anak Anda dan rekatkan file di sana dengan nama yang sama. Anda akan melihat tanda awal <!–header–> dan <!–end header–> , dan di sanalah Anda akan menambahkan tautan:
 <!-- Tajuk -->
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
 <td>
 <h1><?php echo $email_heading; ?></h1>
 <h3>
 <?php echo '<span class="my-link"><a href="#login-URL">Masuk ke akun Anda</a></span>';?>
 </h3>
 </td>
 </tr>
 </tabel>
 <!-- Akhiri Header →
 Itu dia! Anda baru saja mengedit file header template email WooCommerce. Dengan cara yang sama, Anda dapat mengedit semua file template email yang terletak di direktori ini. Untuk informasi lebih lanjut tentang cara menguji template email Anda, lihat panduan lengkap ini.
 Untuk melihat pratinjau template, kami sarankan Anda menggunakan plugin pratinjau email. Di sini, Anda akan menemukan beberapa plugin email yang dapat Anda gunakan. 
Mengedit file template email WC
 5. Bagaimana menerapkan gaya CSS ke template email WooCommerce
 Alternatif lain yang menarik adalah menyesuaikan gaya template WooCommerce Anda secara terprogram. Setelah Anda mengedit markup HTML, Anda dapat menambahkan beberapa gaya CSS ke template email. Mengingat bahwa CSS sebaris bukanlah praktik yang disarankan, kita perlu menggunakan file email-styles.php . Ini adalah file yang menangani CSS untuk template email.
 Untuk menerapkan kode CSS khusus ke email, salin file ini dari folder plugin WooCommerce dan tempel ke folder tema WooCommerce Anda. Ini adalah file PHP, jadi Anda akan dapat menggunakan variabel, fungsi, dan membuat pernyataan logika Anda sendiri dan menerapkannya ke gaya:
 sebuah {
 warna: <?php echo esc_attr( $link_color ); ?>;
 font-berat: normal;
 dekorasi teks: garis bawah;
 }
 Dan ini adalah pemilih tautan khusus:
 .my-link > a:nth-child(1){
 warna putih;
 ukuran font: 14px;
 }
 Kesimpulan
 Singkatnya, mengedit file template adalah cara terbaik untuk menonjol dari pesaing Anda dan memberi pelanggan Anda pengalaman berbelanja yang lebih baik.
 Ada 2 cara utama untuk menyesuaikan template WooCommerce secara terprogram:
  •  Dengan kait
  •  Menimpa template
 Kami telah membandingkan kedua metode dan menunjukkan beberapa contoh. Anda dapat menggunakan skrip sebagai dasar dan bermain-main untuk menyesuaikannya dan menerapkannya ke toko Anda.
 Jika Anda memiliki masalah dalam mengikuti panduan ini, beri tahu kami di komentar di bawah dan kami akan melakukan yang terbaik untuk membantu Anda.