Cara mengedit halaman toko WooCommerce secara terprogram (CSS dan PHP)

Diterbitkan: 2020-08-27

Mencari cara untuk menyesuaikan halaman toko Anda? Dalam tutorial ini, kami akan menunjukkan cara mengedit halaman toko WooCommerce secara terprogram menggunakan PHP dan CSS .

Di toko online mana pun, sangat penting untuk mengedit dan mengoptimalkan halaman toko untuk meningkatkan tingkat konversi Anda. Halaman toko adalah tempat Anda menampilkan produk Anda dan dapat membuat atau menghancurkan bisnis Anda. Jika Anda menjalankan toko WooCommerce, kami sangat menyarankan Anda menyesuaikan halaman toko dan memanfaatkannya sebaik mungkin. Dalam panduan ini, kami akan menunjukkan cara mengedit halaman toko WooCommerce secara terprogram .

Mengapa penting untuk mengedit halaman toko di WooCommerce?

Halaman toko adalah salah satu halaman terpenting di WooCommerce. Di sinilah Anda menampilkan produk Anda kepada pengunjung Anda sehingga dapat memiliki efek besar pada kinerja toko Anda. Halaman toko yang baik dapat meningkatkan pengalaman pengguna, meningkatkan rasio konversi, dan membantu Anda menghasilkan keterlibatan pengguna. Halaman toko yang buruk, di sisi lain, dapat melakukan hal yang sebaliknya dan melumpuhkan bisnis Anda.

Itu sebabnya Anda harus mengoptimalkannya untuk memaksimalkan penjualan Anda . Anda dapat melakukannya dengan plugin dan pembuat halaman tetapi jika Anda memiliki keterampilan pengkodean, membuat solusi Anda sendiri adalah cara yang harus dilakukan.

Cara mengedit halaman toko WooCommerce secara terprogram

Kami sebelumnya telah melihat metode yang berbeda untuk menyesuaikan halaman toko. Namun, dalam tutorial ini, kita akan fokus pada cara mengedit halaman toko WooCommerce secara terprogram menggunakan sedikit kode CSS dan PHP. Perlu dicatat bahwa dalam panduan ini, kami akan mengerjakan tema anak dan kami juga akan mengedit template toko default WooCommerce. Kami akan menempatkan fokus kami pada file template WooCommerce dan beberapa referensi ke file functions.php dari tema anak.

Dalam tutorial ini, Anda akan belajar cara mengedit halaman toko WooCommerce secara terprogram ke:

  1. Nonaktifkan templat halaman toko WooCommerce default
  2. Sesuaikan tajuk dan konten
    1. Produk terpopuler
    2. Produk terlaris
    3. Nilai teratas
    4. Tampilkan produk menurut taksonomi
    5. Kustomisasi halaman toko WooCommerce di functions.php
  3. Edit tata letak loop produk dan terapkan lembar gaya CSS
    1. Edit jumlah kolom default per baris
    2. Terapkan Gaya CSS ke halaman toko
  4. Edit file loop halaman toko WooCommerce
    1. Ganti teks "penjualan" default untuk gif animasi
    2. Hapus opsi penyortiran dan pagination

Sebelum kamu memulai

Harap dicatat bahwa panduan berikut melibatkan pengkodean tingkat lanjut jadi jika Anda tidak memiliki keterampilan teknis, kami sarankan Anda mengikuti tutorial lain ini sebagai gantinya.

Sebelum Anda mulai, kami juga menyarankan Anda memasang tema anak. Anda dapat melihat panduan kami tentang cara membuat tema anak atau menggunakan plugin untuk melakukannya dalam beberapa klik. Selain itu, karena Anda akan mengubah file inti, sebaiknya lakukan pencadangan lengkap situs Anda.

Jadi sekarang, mari kita lihat cara menyesuaikan halaman toko di WooCommerce dengan pengkodean.

1. Nonaktifkan templat halaman toko WooCommerce default

Untuk menyesuaikan halaman toko, ada dua kemungkinan pendekatan:

  1. Anda dapat menimpa file WooCommerce yang bertanggung jawab untuk mencetak halaman toko
  2. Tambahkan skrip khusus ke file functions.php dari tema anak Anda menggunakan kait WC

Anda dapat mengedit template HTML WooCommerce seperti file functions.php dari tema anak, menimpa file inti untuk mencegah penghapusan saat ada pembaruan. Namun, karena hal-hal tidak bekerja persis seperti di file functions.php jika WooCommerce memutuskan untuk memperbarui file-file ini, penyesuaian Anda mungkin tidak berfungsi lagi.

Tapi ini tidak perlu dikhawatirkan. WooCommerce menyadari hal ini sehingga mereka jarang memperbarui file template dengan cara yang dapat merusak skrip Anda. Masalah bekerja dengan file functions.php adalah bahwa halaman toko default WooCommerce masih akan muncul setelah Anda menambahkan kait Anda.

Jadi, pertama-tama, Anda perlu menonaktifkan halaman toko template WooCommerce default untuk membuat template Anda dari awal .

File arsip-produk.php

Di WooCommerce, file yang bertanggung jawab untuk output pada halaman toko disebut archive-product.php , dan Anda dapat menemukannya di folder template WooCommerce ( WooCommerce > Templates > archive-product.php ). Edit halaman toko WooCommerce secara terprogram - Nonaktifkan templat halaman toko

Untuk menimpa file ini, Anda perlu menyalin dan menempelkannya di folder WooCommerce di tema anak Anda seperti yang ditunjukkan di bawah ini:

Sekarang, mari kita lihat file archive-product.php sehingga Anda dapat melihat bagaimana WooCommerce menampilkan halaman toko. Untuk melakukannya, buka lingkungan pengembangan terintegrasi (IDE) favorit Anda, buka folder template plugin WooCommerce, dan buka file. Anda dapat mengeditnya dan bermain-main dengannya, dengan cara yang sama Anda dapat menyesuaikan file template WC lainnya.

Sebelum Anda melakukannya, pastikan Anda memiliki cadangan file asli untuk membatalkan perubahan apa pun jika perlu.

Dalam file archive-product.php , Anda akan melihat beberapa fungsi do_action() . Fungsi-fungsi ini digunakan untuk membuat kait WooCommerce yang tersedia saat ini untuk halaman toko. Untuk sepenuhnya menonaktifkan halaman toko WooCommerce, cukup hapus loop yang bertanggung jawab untuk mencetak produk:

 if (wc_get_loop_prop('total')) {
    while (memiliki_postingan()) {
        the_post();
        do_action('woocommerce_shop_loop');
        wc_get_template_part('konten', 'produk');
    }
}

Anda dapat membuat lebih banyak perubahan di sini, tetapi untuk menyederhanakannya, kami hanya akan menghapus loop dan membiarkan yang lainnya apa adanya. Jika Anda memutuskan untuk membuat lebih banyak perubahan, ingatlah bahwa jika Anda menghapus beberapa fungsi do_action() , kode pendek yang sesuai tidak akan berfungsi lagi di halaman mana pun di situs web.

Setelah menghapus loop untuk produk pencetakan, file archive-product.php akan terlihat seperti ini:

 didefinisikan('ABSPATH') || keluar;
get_header('toko');
do_action('woocommerce_before_main_content');
if (woocommerce_product_loop()) {
    do_action('woocommerce_before_shop_loop');
    // di sini kita telah menghapus loop
    do_action('woocommerce_after_shop_loop');
} kalau tidak {
    do_action('woocommerce_no_products_found');
}
do_action('woocommerce_after_main_content');
do_action('woocommerce_sidebar');
get_footer('toko');

Itu dia! Anda telah menonaktifkan templat halaman toko default dan mengedit halaman toko WooCommerce secara terprogram ! Sekarang Anda memiliki halaman toko kosong sehingga Anda dapat mulai mendesain sendiri.

2. Sesuaikan tajuk dan konten halaman toko WooCommerce secara terprogram

Konten dan header dapat berupa markup HTML apa pun yang mungkin menyertakan gambar, tabel, atau tautan. Atau bahkan sesuatu seperti wadah kosong untuk menjalankan file JavaScript eksternal. Untuk ini, Anda memerlukan pengetahuan dasar tentang kode pendek WooCommerce, karena Anda akan menggunakannya untuk menampilkan produk di halaman toko. Jika Anda tidak terbiasa dengan kode pendek WC, lihat panduan ini.

Sekarang, mari edit halaman toko WC dan tampilkan produk menurut taksonomi terpopuler, terlaris, teratas, dan terpopuler. Selain itu, kami akan menunjukkan cara menambahkan beberapa judul dan konten di luar loop.

2.1 Menampilkan produk paling populer

Untuk menampilkan produk yang paling populer, Anda perlu mengedit file archive-product.php dari tema anak Anda. Pertama, gunakan kode pendek berikut

 [ products orderby="popularity" ]

Tepat di tempat loop itu sebelum Anda menghapusnya. # tampilkan produk terpopuler: 2 produk dalam 2 kolom

 do_action('woocommerce_before_shop_loop');
echo '<h1>PALING POPULER!!</h1>';
do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); do_action('woocommerce_after_shop_loop');

Dalam kode pendek, Anda akan menambahkan kelas bernama m-popular , yang dapat Anda gunakan nanti saat menerapkan gaya. Pada contoh di atas, kami mengaturnya untuk menampilkan 2 produk dalam satu baris 2 kolom (columns=”2″ limit="2″) . Perhatikan bahwa Anda tidak dapat menggunakan kode pendek di sini dengan cara yang sama seperti Anda menggunakannya di pos atau halaman.

Anda harus menggunakan fungsi do_shortcode() agar kode pendek berfungsi. Jika semuanya berjalan dengan baik, sekarang Anda akan melihat ini di halaman toko: halaman toko khusus

2.2 Produk terlaris

Cara lain untuk menyesuaikan toko WooCommerce secara terprogram adalah dengan menyortir produk berdasarkan penjual terbaik. Untuk ini, selain menggemakan kode pendek, Anda akan menambahkan beberapa konten menggunakan markup HTML sederhana ( <h1> ). Di sini, Anda dapat menambahkan jenis konten lain yang cocok dengan format HTML yang tepat.

Mari kita tampilkan produk terlaris, kali ini dalam layout 2 baris dan 3 kolom. Untuk melakukannya, cukup rekatkan ini tepat setelah baris echo do_shortcode() yang telah Anda sisipkan pada langkah 2.1 sebelumnya:

 echo '<h1>Terlaris</h1>';
do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

Dan yang Anda dapatkan adalah ini: halaman toko khusus Jika Anda hanya ingin menambahkan Penjual Terbaik daripada Produk Terpopuler, ganti saja baris echo di 2.1 dengan yang ada di 2.2.

2.3 Produk berperingkat teratas

Sekarang, mari bermain lagi dengan kode pendek dan menampilkan produk berperingkat teratas. Kali ini, kita akan menggunakan kode pendek tanpa atribut lebih dari sebuah kelas.

 echo '<h1>Nilai Tertinggi</h1>';
do_shortcode('[ top_rated_products class="t-rated" ]');

Mari kita lihat apa yang terjadi setelah ini: halaman toko khusus Seperti yang Anda lihat, tata letak default WooCommerce memiliki 4 kolom. Mari kita biarkan seperti itu untuk saat ini, kita akan kembali lagi nanti.

2.4 Menampilkan produk menurut taksonomi di halaman toko

Selain menampilkan produk terlaris atau teratas, Anda juga dapat menampilkannya berdasarkan taksonomi. Misalnya, kode berikut akan mencetak produk untuk kategori Poster dan Busana, menggunakan atribut yang sama dengan yang Anda gunakan sebelumnya tetapi mengubah jumlah kolom menjadi 5.

 echo '<h1>Taksonomi pakaian:</h1>';
do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>Taksonomi poster:</h1>'; echo '<h2>Bawa poster terbaik ke dinding Anda</h2>'; do_shortcode('[ products category="Posters" limit="4" class="t-posters" ]');

Dan beginilah seharusnya archive-product.php Anda sekarang:

 <header class="woocommerce-products-header">
       <h1 class="woocommerce-products-header__title page-title"></h1>	
</header>
<?php
jika ( woocommerce_product_loop() ) {
	do_action('woocommerce_before_shop_loop');		
	
	echo '<h1>PALING POPULER!!</h1>';
        do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); echo '<h1>Terlaris</h1>'; do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]'); echo '<h1>Nilai Tertinggi</h1>'; do_shortcode('[ top_rated_products class="t-rated" ]'); echo '<h1>Taksonomi pakaian:</h1>'; do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>Taksonomi poster:</h1>; echo '<h2>Bawa poster terbaik ke dinding Anda</h2>'; do_shortcode('[ products category="Posters" columns="2" limit="4" class="t-posters" ]'); do_action('woocommerce_after_shop_loop'); } else { do_action( 'woocommerce_no_products_found' ); } do_action( 'woocommerce_after_main_content' ); do_action('woocommerce_sidebar'); get_footer('toko');

Pada titik ini, Anda harus dapat memahami cara menggunakan semua shortcode WooCommerce dan atributnya untuk membuat halaman toko khusus yang dapat memenuhi persyaratan desain apa pun.

2.5 Sesuaikan halaman toko WC di functions.php

Jika Anda ingin menyesuaikan halaman toko WooCommerce secara terprogram, Anda juga dapat mengedit file functions.php . Untuk konten di luar loop produk, Anda dapat menggunakan beberapa kait yang terlihat di file archive-product.php , menjalankannya dari file functions.php dari tema anak. Dengan cara ini Anda memastikan bahwa skrip Anda akan tetap berfungsi bahkan jika WC memutuskan untuk memperbarui file templatnya.

Untuk contoh ini, mari tambahkan header khusus dengan judul, subjudul, deskripsi, dan spanduk. Rekatkan skrip ini di file functions.php dari tema anak:

 add_action('woocommerce_before_shop_loop','shop_main_heading');
fungsi shop_main_heading(){
	$isi = '';
	$content.='<h1>Selamat datang di halaman toko saya yang luar biasa!</h1>'; 
	$content.='<h2>Dibangun dengan cinta sendiri</h2>';
	$content.='<p>Terima kasih telah mampir dan mengunjungi halaman toko situs web saya, silakan telusuri produk yang paling Anda sukai dan beli semuanya</p>';
	$content.='<img src="https://www.carpetright.co.uk/globalassets/static-pages/useful-links/samples/sample-banner.jpg"/>';
	gema $konten;
}

Beginilah tampilan halaman toko Anda: halaman toko khusus Dengan cara yang sama, Anda dapat menggunakan kait woocommerce_after_shop_loop untuk menampilkan beberapa konten di akhir halaman toko.

3. Edit jumlah produk per baris & terapkan stylesheet CSS ke halaman toko WC

Sekarang, Anda seharusnya dapat menampilkan produk, mengurutkannya berdasarkan fitur, taksonomi, terlaris, dan cara lain apa pun yang Anda inginkan menggunakan kode pendek WooCommerce. Selain itu, Anda harus dapat memasukkan segala jenis konten di tempat mana pun yang Anda inginkan di halaman toko Anda. Tetapi bagaimana jika Anda bisa melangkah lebih jauh dan membawa halaman toko Anda ke tingkat berikutnya? Anda dapat mengedit tata letak template dan menambahkan beberapa gaya CSS untuk lebih menyesuaikan halaman toko WooCommerce Anda secara terprogram.

3.1 Edit jumlah kolom default per baris

Jika Anda menentukan atribut kolom kode pendek WC, Anda dapat mengatur jumlah produk yang akan ditampilkan setiap baris. Selain itu, Anda dapat mengatur jumlah total produk untuk kode pendek dengan atribut limit:

 [ product orderby=”popularity” columns=”3” limit=”3” ]

Namun, jika Anda tidak menentukan atribut kolom, Anda dapat mengatur jumlah produk yang ingin Anda cetak untuk setiap baris menggunakan skrip ini di file functions.php dari tema anak.

 add_filter('loop_shop_columns', 'loop_columns', 999);
if (!function_exists('loop_columns')) {
    fungsi loop_columns() {
        kembalikan 4 ;//4 produk per baris
    }
}

Ini akan mengubah jumlah default produk yang ditampilkan per baris hanya jika tidak ada atribut kolom dalam kode pendek WooCommerce.

3.2 Menerapkan beberapa Gaya CSS ke halaman toko

Untuk menerapkan beberapa CSS ke halaman toko WooCommerce, Anda cukup menambahkan skrip Anda di file template seperti ini:

 <gaya>
* {
    warna latar:#a2bcff;
}
</ gaya>

Ini boleh untuk potongan kecil CSS tetapi ini bukan praktik yang disarankan. Untuk menerapkan Gaya CSS dengan cara WordPress, Anda perlu menggunakan kait wp_enqueue_scripts untuk memuat skrip Anda dari file yang berbeda.

Untuk contoh ini, kita akan memberi nama file ini shop_style.css dan kita akan menyimpannya di folder utama tema anak kita, pada tingkat hierarki yang sama dengan file style.css default. Setelah membuat file ini, rekatkan skrip berikut di file functions.php Anda:

 add_action( 'wp_enqueue_scripts', 'quadlayers_enqueue_css' );
fungsi quadlayers_enqueue_css(){    
    jika( is_shop() ):
    wp_enqueue_style('gaya_checkout',
        get_stylesheet_directory_uri() . '/shop_style.css'
    );
    berakhir jika;
}

Seperti yang Anda lihat, if(is_shop()): kondisional harus benar untuk mengantrekan file shop_style.css . Dalam file ini, Anda akan memiliki semua skrip gaya yang ingin Anda terapkan hanya ke halaman toko . Ini berbeda dengan file style.css di tema anak yang akan menerapkan skrip ke seluruh frontend situs web. Untuk panduan ini, kami akan menggunakan file shop_style.css berikut, tetapi silakan gunakan skrip CSS Anda atau ubah yang ini:

 div.storefront-sorting:nth-child(2){
	perataan teks:pusat;
} 
#main div.storefront-sorting h1{
	gaya font:normal;
}
#utama h1,#h2 utama{
	font-berat: lebih tebal;
	gaya font: miring;
	perataan teks:pusat;
}
#main > .m-populer,#main > .b-seller,#main > .t-rated,#main > .t-clothing,#main > .t-posters{	
	batas: padat #b8b8b8 1px;
	batas-radius: 25px;
	margin-bawah: 25px;
	padding-top: 35px;	
	padding-kiri: 20px;
	padding-kanan: 20px;	
} 
#main > .m-populer{
	warna latar:#dbad97;	
}
#main > .b-penjual {
	warna latar:#b4e6a3;
}
#main > .t-rated {
	warna latar:#f0f695;	
}
#main > .t-pakaian {
	warna latar:#95b4f6;	
}
#main > .t-poster {
	warna latar:#c88fe5;	
}

Di file CSS, Anda akan menemukan beberapa pemilih yang berisi kelas khusus. Kami telah membuatnya sebelum membuat kode pendek. Misalnya, kami telah menambahkan kelas "b-penjual" dalam kode pendek seperti ini:

 do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

Jadi setelah menambahkan CSS Style ke halaman toko WooCommerce, Anda akan mendapatkan sesuatu seperti ini (klik gambar untuk melihatnya dalam ukuran penuh): Klik pada gambar untuk melihatnya dalam ukuran penuh

Klik pada gambar untuk melihatnya dalam ukuran penuh.

Juga, perlu diingat bahwa kami memiliki tema StoreFront yang aktif dan, seperti yang Anda ketahui, pemilih CSS dapat berbeda di setiap situs web meskipun mereka memiliki tema yang sama. Jadi agar file ini berfungsi, Anda mungkin perlu mengedit pemilih untuk situs spesifik Anda.

BONUS : Cara mengubah jumlah produk per halaman

Sekarang, katakanlah Anda ingin mengubah jumlah produk yang Anda tampilkan per halaman di halaman toko. Jika Anda ingin menampilkan 10 produk per halaman misalnya, cukup tambahkan kode berikut ke file functions.php :

 add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

function new_loop_shop_per_page( $cols ) {
  $kol = 10;
  kembalikan $kol;
}

Di mana $cols berisi jumlah produk per halaman yang mengambil nilai dari Opsi -> Membaca dan mengembalikan jumlah produk yang ingin Anda tampilkan di setiap halaman.

4. Edit file loop halaman toko WooCommerce

Sejauh ini, kita telah melihat cara mengedit file template archive-product.php untuk menyesuaikan halaman toko WooCommerce secara terprogram. File ini adalah tempat loop WC berjalan untuk menampilkan semua produk halaman. Sekarang, buka folder plugin WooCommerce di editor plugin atau IDE Anda, dan buka folder loop. Anda akan menemukannya pada level yang sama dengan file archive-product.php .

Di folder loop, Anda akan menemukan beberapa file yang juga dapat Anda edit untuk menyesuaikan halaman toko lebih banyak lagi. Untuk menimpa file ini, Anda perlu membuat folder dan file kloning dalam tema anak Anda. Buat folder baru bernama loop di bawah folder WooCommerce yang Anda buat sebelumnya.

Setelah ini, salin file sale-flash.php asli dari template plugin dan tempel di dalam folder loop ini di tema anak Anda. Kami akan menggunakan file sale-flash.php untuk menambahkan animasi gif ke semua produk yang sedang dijual. Jika Anda melihat file tersebut, Anda akan melihat bahwa ini adalah skrip yang bertanggung jawab untuk menampilkan pesan "DIJUAL" saat produk sedang dijual.

4.1 Ganti teks "penjualan" default untuk gif animasi

Di bagian ini, kami akan menunjukkan cara menonaktifkan pesan penjualan default dan menggantinya dengan gif animasi. Anda perlu mengedit file flash-sale.php tema anak Anda sehingga terlihat seperti ini:

 didefinisikan('ABSPATH') || keluar;
$postingan global, $produk;
if ( $produk->is_on_sale() ) { 
   $an_gif = '<img src="https://i1.wp.com/tamingchaos.net/wp-content/uploads/2020/04/Sale-Gif.gif" width="100px" height="60px"/ >';
   echo $an_gif;
}

Di sana Anda dapat mengganti file gif dengan gif lain yang Anda suka.

4.2 Hapus opsi penyortiran dan pagination

Sekarang, mari kita lihat cara menonaktifkan pemilih "urutkan berdasarkan" dan fungsionalitas pagination di halaman toko WooCommerce. Mirip dengan apa yang telah Anda lakukan dengan file sale-flash.php , Anda dapat mencapai ini hanya dengan menyimpan file kosong dengan nama yang sama.

Buat kedua file di folder loop dan orderby.php dan pagination.php . Untuk menonaktifkan kedua file sepenuhnya, Anda hanya boleh meletakkan skrip ini di setiap file:

 didefinisikan('ABSPATH') || keluar;

Setelah melakukan ini, Anda akan memiliki header dan footer yang lebih bersih di halaman toko Anda. Selain itu, pagination mungkin tidak terlalu berguna karena Anda menampilkan banyak produk. edit halaman toko WooCommerce secara terprogram - Penyortiran dan penomoran halaman Perhatikan bahwa dalam file sale-flash.php , kami telah menghapus perilaku default WooCommerce dan menambahkan tampilan animasi gif kami sendiri. Ini adalah tugas yang sangat mendasar, tetapi teknik ini menawarkan berbagai kemungkinan untuk pengembang tingkat lanjut.

CATATAN AKHIR

  • File template WC dari tema anak tidak mencegah penimpaan jika WooCommerce memutuskan untuk merilis pembaruan template. Namun, ini jarang terjadi.
  • Ini adalah contoh skrip dan tidak boleh dibawa ke produksi, mereka dimaksudkan hanya untuk tujuan didaktik.

Bonus: Menampilkan Kategori di Halaman Toko WooCommerce

Terakhir, mari kita lihat bagaimana Anda dapat menambahkan kategori ke Halaman Toko WooCommerce menggunakan sedikit kode. Metode ini direkomendasikan untuk pengguna dengan keterampilan pengkodean. Selain PHP, Anda juga disarankan untuk mengetahui sedikit CSS untuk dapat mendesain kode.

CATATAN : Sebelum memulai, pastikan Anda membuat cadangan situs Anda dan membuat tema anak jika Anda belum memilikinya.

Tambahkan Kategori ke halaman Toko

Di dasbor Anda, buka Appearance > Theme Editor dan buka file functions.php tema anak. Klik pada file functions.php di sidebar File Tema kanan dan rekatkan skrip berikut untuk menambahkan fungsi kustom Anda.

Fungsi di bawah ini akan menambahkan kategori produk Anda sebelum memuat elemen lain dari halaman Toko Anda. Ini berarti pembeli akan melihat semua kategori produk Anda sebelum katalog produk.

 fungsi produk_subkategori( $args = array() ) {
$parentid = get_queried_object_id();

$args = array(
'induk' => $parentid
);

$terms = get_terms( 'product_cat', $args );

jika ( $syarat ) {
echo '<ul class="produk-kucing">';

foreach ( $term sebagai $term ) {
echo '<li kelas="kategori">'; 
woocommerce_subcategory_thumbnail( $term );
echo '<h2>';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
echo $istilah->nama;
gema '</a>';
gema '</h2>';
gema '</li>';
}

gema '</ul>';
}

}

add_action( 'woocommerce_before_shop_loop', 'produk_subkategori', 50 );

Fungsi ini akan menambahkan Kategori Anda ke halaman Toko WooCommerce. Namun, perlu diingat bahwa mereka mungkin tidak terlihat persis seperti yang Anda inginkan, jadi Anda harus menata bagian kategori baru dengan sedikit CSS. Untuk informasi lebih lanjut tentang ini, lihat posting kami tentang cara menampilkan dan kategori gaya di halaman toko.

Kesimpulan

Secara keseluruhan, halaman toko sangat penting dan dapat membuat atau menghancurkan toko Anda. Itu sebabnya jika Anda memiliki keterampilan pengkodean, kami sarankan Anda mengedit halaman toko WooCommerce secara terprogram dan mengoptimalkannya untuk meningkatkan tingkat konversi Anda.

Dalam panduan ini, kami telah menunjukkan cara menambahkan, menghapus, dan menyesuaikan berbagai aspek toko Anda. Namun, ini hanyalah beberapa contoh dan ide yang dapat membantu Anda menemukan inspirasi dan membawa toko Anda ke tingkat berikutnya. Sekarang saatnya Anda bermain-main dan mengembangkan kustomisasi Anda.

Untuk panduan lebih lanjut untuk menyesuaikan toko WooCommerce Anda, kami sarankan Anda memeriksa:

  • Add-to-cart AJAX WooCommerce
  • Bagaimana cara menambahkan bidang khusus ke halaman checkout?
  • WooCommerce menambah fungsi keranjang secara terprogram

Terakhir, jika Anda ingin menghubungkan Facebook Shop dengan WooCommerce, Anda harus melihat panduan lengkap ini. Sudahkah Anda menyesuaikan toko online Anda? Apa yang telah Anda ubah? Jika Anda memiliki pertanyaan, tinggalkan komentar di bawah dan kami akan melakukan yang terbaik untuk membantu Anda! Anda juga dapat melihat kode lengkapnya di Github.