Panduan Memulai Pengembangan Tema WooCommerce: Membangun Situs Web E-commerce Anda dari Nol.

Jika Anda sudah terbiasa dengan pengembangan tema untuk WordPress, maka membuat tema khusus untuk WooCommerce akan menjadi langkah yang wajar dan alami. Sebagai plugin e-commerce untuk WordPress, fungsi utama WooCommerce diwujudkan melalui serangkaian template halaman, struktur pengulangan data (loop), dan kode singkat (shortcode) yang dapat disesuaikan. Sebuah tema untuk WooCommerce perlu memanggil template tersebut dengan benar, serta memastikan bahwa semua elemen gaya (style) dan skrip (script) dapat terintegrasi dengan lancar.

Membangun tema untuk WooCommerce pertama-tama berarti Anda memerlukan tema WordPress dasar sebagai titik awal. Tema tersebut bisa berupa subtheme yang Anda buat dari nol, atau bisa juga merupakan pengembangan lebih lanjut dari framework yang sudah ada, seperti Underscores atau Storefront. Yang penting adalah tema tersebut harus menyatakan dukungannya terhadap WooCommerce, sehingga plugin dapat menyalurkan file-file template mereka ke dalam struktur tema Anda.

Proses tersebut melibatkan beberapa langkah kunci, yaitu: membangun lingkungan pengembangan, memahami struktur tata letak (template hierarchy) dari WooCommerce, membuat file tema yang diperlukan, menggunakan action dan filter hook untuk melakukan penyesuaian fungsionalitas, serta melakukan pengujian dan optimisasi produk secara keseluruhan. Selanjutnya, kita akan membahas setiap langkah tersebut secara terperinci.

推荐阅读 Panduan Memulai Pengembangan Tema WordPress: Membangun Tema Pertama Anda dari Nol.。

Pembangunan lingkungan pengembangan (development environment) dan struktur tema (theme structure)

Sebelum memulai menulis kode apa pun, lingkungan pengembangan lokal yang andal sangat penting. Disarankan untuk menggunakan alat-alat seperti Local, XAMPP, atau Docker untuk dengan cepat membangun lingkungan yang mencakup PHP, MySQL, dan Apache/Nginx. Pastikan versi PHP yang Anda gunakan memenuhi persyaratan terbaru dari WooCommerce (umumnya PHP 7.4 atau lebih tinggi), serta instal WordPress dan plugin WooCommerce dengan benar.

UltaHost – Hosting untuk WordPress

Jaminan pengembalian uang dalam 30 hari, bandwidth dan basis data yang tidak terbatas, perlindungan DDoS gratis, diskon 50% untuk pembelian selama 3 tahun (dari harga normal: 50%).

halaman akses

Buatlah sebuah direktori tema baru, misalnya… my-woocommerce-themeDan letakkanlah di sana. wp-content/themes/ Di dalam direktori tersebut, sebuah tema dasar yang mendukung WooCommerce setidaknya memerlukan berikut ini sebagai file inti:

• style.cssTemplate untuk tema tersebut harus memuat komentar header standar WordPress.
• index.phpFile template utama untuk tema tersebut.
• functions.phpFile inti yang digunakan untuk menambahkan fitur tema, skrip pendaftaran, dan gaya tampilan, serta untuk mendeklarasikan dukungan terhadap platform WooCommerce.

Pertama, di style.css Dalam komentar di bagian atas (header comment), Anda perlu mendefinisikan informasi topik dengan jelas.

/*
Theme Name: My WooCommerce Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Description: 一个为 WooCommerce 定制的现代电商主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-woocommerce-theme
*/

Selanjutnya, functions.php Dalam berkas tersebut, hal pertama dan juga yang paling penting adalah menyatakan bahwa tema Anda mendukung WooCommerce. Hal ini dilakukan dengan… add_action Kait dan… add_theme_support Fungsi tersebut diimplementasikan menggunakan kode program.

<?php
/**
 * 主题功能文件
 */
function my_woocommerce_theme_setup() {
    // 声明主题支持 WooCommerce
    add_theme_support( 'woocommerce' );
    // 可选：支持 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', 'my_woocommerce_theme_setup' );

// 注册主题的样式和脚本
function my_woocommerce_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 引入 WooCommerce 样式
    if ( class_exists( 'WooCommerce' ) ) {
        wp_enqueue_style( 'woocommerce-theme', get_template_directory_uri() . '/css/woocommerce.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_woocommerce_theme_scripts' );
?>

Memahami dan Mengubah Template WooCommerce

WooCommerce menggunakan sistem template yang dapat disesuaikan (dapat diubah). Semua file template bawaan (default templates) berada di dalam direktori plugin. templates/ Di dalam folder tersebut. Untuk mengatur ulang template-template ini sesuai keinginan Anda dalam tema Anda, Anda perlu membuat sebuah file dengan nama tertentu di dalam direktori tema Anda. woocommerce Buka folder tersebut, lalu salin dan modifikasi file template yang sesuai berdasarkan struktur path yang sama yang terdapat di dalam plugin.

推荐阅读 Panduan Utama untuk Pengembangan Tema WordPress: Membangun Tema Kustom Pertama Anda dari Nol hingga Satu.。

Misalnya, jika Anda ingin mengubah template halaman produk tertentu, path default dari WooCommerce adalah… plugins/woocommerce/templates/single-product.phpAnda perlu membuat hal-hal berikut dalam topik Anda:themes/my-woocommerce-theme/woocommerce/single-product.phpJika file tersebut sudah ada, WooCommerce akan lebih dulu memuat versi yang terdapat di dalam tema tersebut.

Lapisan template (template hierarchy) merupakan konsep penting lainnya. WooCommerce dengan cerdik mengintegrasikan sistem lapisan template standar dari WordPress. Sebagai contoh, untuk halaman toko (Shop Page), WordPress akan mencari template sesuai dengan urutan berikut:archive-product.php > archive.php > index.phpOleh karena itu, dibuatlah… archive-product.php Ini adalah metode yang paling langsung dan efektif untuk halaman daftar toko khusus (customized stores).

File-file template inti yang sering digunakan dan disarankan untuk ditulis ulang (overwritten) terlebih dahulu meliputi:
- single-product.phpHalaman detail produk tunggal.
- archive-product.phpHalaman Arsip Produk (Halaman Utama Toko).
- cart/cart.phpHalaman Keranjang Belanja.
- checkout/form-checkout.phpHalaman pembayaran.
- myaccount/my-account.phpHalaman akun saya.

hosting.com hosting bersama

Kinerja tinggi, dilengkapi dengan CPU AMD EPYC, penyimpanan SSD NVMe, dan LiteSpeed, dukungan internal ahli 24 jam sehari, langkah-langkah keamanan canggih termasuk SSL, brute force, malware, dan perlindungan DDoS, menghemat hingga 731 TB/bulan.

halaman akses

Saat menimpa template, praktik terbaik adalah dengan menyalin file template asli dari plugin WooCommerce ke direktori yang sesuai dengan tema Anda, lalu melakukan modifikasi. Dengan cara ini, Anda dapat memastikan bahwa fungsi-fungsi inti dari WooCommerce tidak akan terganggu.

Menggunakan hook untuk melakukan penyesuaian fungsionalitas

Selain mengganti file template, WooCommerce juga menyediakan banyak aksi (actions) lainnya.action) dan filter (filterAlat tambahan (plugin) memungkinkan Anda menambahkan, menghapus, atau mengubah konten dan fitur tanpa perlu mengubah file template inti. Cara ini biasanya lebih ringan dan lebih mudah dikelola dibandingkan dengan langsung menyalin (mengganti) isi template tersebut.

Action hooks memungkinkan Anda untuk menjalankan kode kustom di posisi tertentu. Misalnya, Anda dapat menambahkan blok kustom setelah informasi ringkasan produk.

推荐阅读 Membangun Situs Web Profesional: Panduan Lengkap untuk Mengembangkan Tema WordPress Khusus dari Nol。

function my_custom_product_message() {
    echo '<p class="my-custom-notice">🎉 Produk ini sedang berpartisipasi dalam acara promosi berbatas waktu!</p>';
}
add_action( 'woocommerce_single_product_summary', 'my_custom_product_message', 20 );

Di sini,woocommerce_single_product_summary Itu nama kaitnya,20 Angka tersebut merupakan nomor prioritas (yang menentukan urutan eksekusi).

Hook filter memungkinkan Anda untuk memodifikasi data. Misalnya, Anda dapat mengubah teks dari tombol “Tambah ke Keranjang Belanja”.

Hosting bersama InterServer.

Hosting bersama seharga $2,50 USD per bulan, diskon $0,1 USD untuk bulan pertama dengan kode promo tryinterserver, serta 461 skrip aplikasi cloud yang dapat diinstal dengan sekali klik.

halaman akses

function my_custom_add_to_cart_text( $text ) {
    if ( is_product() ) {
        $text = __( '立即购买', 'my-woocommerce-theme' );
    }
    return $text;
}
add_filter( 'woocommerce_product_single_add_to_cart_text', 'my_custom_add_to_cart_text' );

Alat lain yang sangat berguna adalah “template hook” (pautan template). WooCommerce telah menempatkan banyak fitur terkait template hook di dalam berkas-berkas template-nya. do_action Dengan memanfaatkan hook-hook ini, Anda dapat mengontrol pengaturan tampilan struktur halaman dengan sangat akurat. Anda dapat menggunakannya untuk… remove_action Gunakan alat atau metode yang tersedia untuk menghapus elemen-elemen yang tidak diperlukan. add_action Menyisipkan elemen baru di posisi tertentu merupakan metode yang lebih fleksibel dibandingkan langsung mengedit file template. Terutama saat mengupdate plugin WooCommerce, perubahan yang Anda lakukan akan lebih sulit untuk tertimpa (dihapus atau digantikan oleh versi baru plugin tersebut).

Penyesuaian gaya (style customization) dan desain responsif (responsive design)

WooCommerce menyediakan satu set gaya dasar, tetapi untuk menyelaraskannya dengan bahasa desain tema Anda, penyesuaian gaya yang lebih mendalam sangat diperlukan. Disarankan untuk membuat sebuah file CSS yang terpisah. woocommerce.cssDan juga… functions.php Data diambil berdasarkan kondisi tertentu, sebagaimana ditunjukkan pada contoh sebelumnya.

Inti dari penyesuaian tampilan (style customization) adalah memahami struktur HTML dan kelas CSS yang dihasilkan oleh WooCommerce. Menggunakan alat pengembang (developer tools) di browser untuk memeriksa elemen-elemen seperti daftar produk dan tabel keranjang belanja merupakan cara yang cepat untuk memulai. WooCommerce telah menambahkan berbagai kelas CSS yang bermakna (semantic classes) untuk hampir semua elemen. .product、.woocommerce-loop-product__link、.onsale dan lain-lain.

Misalnya, untuk mengubah tampilan tag “Spesial”:

/* 在你的 woocommerce.css 中 */
.onsale {
    background-color: #ff3366;
    color: white;
    border-radius: 0;
    padding: 0.5em 1em;
    font-weight: bold;
    top: 10px;
    right: 10px;
    left: auto; /* 覆盖默认的 left: 0 */
}

Desain responsif sangat penting untuk situs web e-commerce. Anda perlu memastikan bahwa grid produk dan tabel (seperti keranjang belanja, detail pesanan) dapat ditampilkan dengan baik pada berbagai ukuran layar. Gunakan kueri media CSS serta tata letak Flexbox/Grid untuk mengubah cara produk ditampilkan dalam daftar.

@media (max-width: 768px) {
    ul.products li.product {
        width: 48%; /* 在平板设备上每行显示两个产品 */
        margin-right: 4%;
    }
    ul.products li.product:nth-child(2n) {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    ul.products li.product {
        width: 100%; /* 在手机上每行显示一个产品 */
        margin-right: 0;
    }
    /* 调整结账表单的输入框 */
    .woocommerce form .form-row {
        width: 100%;
        float: none;
        margin-right: 0;
    }
}

Menyimpulkan.

Pengembangan tema untuk WooCommerce merupakan proses yang menggabungkan pengetahuan tentang tema WordPress dengan kebutuhan khusus e-commerce. Kuncinya adalah memahami mekanisme penutupan (template coverage) dari tema tersebut, serta menguasai penggunaan action dan filter hook untuk melakukan penyesuaian fungsionalitas secara fleksibel. Mulai dari membangun lingkungan pengembangan, mendeklarasikan dukungan yang diperlukan, menulis ulang kode template kunci, hingga menggunakan hook untuk melakukan penyesuaian halus dan penyesuaian gaya tampilan yang lebih mendalam, setiap langkah tersebut merupakan fondasi penting dalam membangun toko online yang profesional, unik, dan efisien. Ingatlah selalu bahwa pengembangan sebaiknya dilakukan dalam sub-theme (tema turunan dari tema utama), dan gunakan hook sebagai prioritas daripada langsung mengubah kode template inti. Hal ini merupakan praktik terbaik untuk menjaga kebersihan dan keterbaruan kode, serta memastikan kompatibilitas di masa depan.

FAQ - Pertanyaan yang Sering Diajukan.

Bagaimana cara menghapus atau mengatur ulang elemen-elemen pada halaman detail produk dalam sebuah tema (theme)?

Anda dapat menggunakannya. remove_action Fungsi ini digunakan untuk menghapus elemen tertentu dari bagian ringkasan produk. Pertama-tama, Anda perlu mengetahui melalui hook mana elemen tersebut ditambahkan, serta tingkat prioritasnya.

Sebagai contoh, untuk menghapus judul produk, Anda dapat melihat… plugins/woocommerce/templates/single-product/title.phpAnda akan menemukan bahwa ia menggunakan “hook” (pautan atau mekanisme khusus) untuk melakukan tugasnya. woocommerce_single_product_summary Ditambahkan dengan prioritas 5. Jadi, dalam topik Anda… functions.php Cukup tambahkan kode berikut untuk menghapusnya:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

Untuk mengatur ulang susunan elemen-elemen tersebut, Anda perlu terlebih dahulu menghapus semua elemen yang tidak diperlukan, lalu menambahkannya kembali sesuai urutan yang diinginkan. Alternatif lainnya adalah dengan mengatur angka prioritasnya; semakin kecil angka prioritas, semakin cepat elemen tersebut akan dieksekusi dan posisinya akan semakin depan dalam hasil output.

Mengapa perubahan yang saya lakukan pada tema saya menghilang setelah saya mengupdate WooCommerce?

Jika Anda langsung mengubah direktori plugin WooCommerce…wp-content/plugins/woocommerce/Jika file template tersebut berada di bawah direktori tersebut, maka setiap kali plugin diperbarui, perubahan yang telah dibuat akan tertimpa (dihapus). Ini merupakan praktik yang sama sekali tidak disarankan.

Cara yang benar adalah dengan mengikuti mekanisme penggantian (template overriding) dari WooCommerce. Salin file template yang perlu diubah ke dalam direktori tema (theme directory) Anda. woocommerce/ Perubahan dapat dilakukan di dalam folder anak (sub-folder). Dengan cara ini, WooCommerce akan lebih dulu memuat versi yang ada di dalam tema Anda, sehingga pembaruan plugin tidak akan mempengaruhi konten kustom yang telah Anda buat.

Cara membuat tata letak khusus (custom layout) untuk halaman toko WooCommerce:

Cara paling efektif untuk membuat tata letak khusus (custom layout) untuk halaman toko adalah dengan melakukan *override* (mengganti kode yang sudah ada). archive-product.php File template. Anda dapat sepenuhnya merancang ulang struktur HTML dari file ini.

Metode yang lebih modular lainnya adalah dengan menggunakan “hook” (pautan/koneksi). Konten halaman toko sebagian besar terdiri dari… woocommerce_before_main_content、woocommerce_archive_description、woocommerce_before_shop_loop、woocommerce_after_shop_loop Kontrol dilakukan melalui “hook”-hook tersebut. Anda dapat menghapus siklus bawaan (default loop) dan menyisipkan kueri serta struktur siklus kustom Anda sendiri di antara hook-hook tersebut, sehingga dapat menciptakan tata letak grid, daftar, atau tata letak tipe masonry yang unik.

Pada saat yang sama, dengan menggunakan fitur Customizer dari WordPress atau membuat halaman opsi tema, Anda dapat memungkinkan pengguna untuk mengganti tata letak (layout) tanpa perlu mengedit kode.

Bagaimana cara menambahkan JavaScript kustomisasi ke tema WooCommerce dengan benar?

Untuk menambahkan JavaScript kustom ke tema WooCommerce, Anda harus mengikuti praktik terbaik dalam antrian skrip WordPress. Di dalam tema Anda functions.php Dalam berkas tersebut, digunakan… wp_enqueue_script Fungsi ini digunakan untuk mendaftarkan dan memuat skrip.

Pastikan untuk menggunakan… wp_enqueue_script Ketika melakukan pengaturan, Anda dapat menggunakan parameter ketiga untuk menentukan dependensi, misalnya dependensi terhadap jQuery. Untuk skrip khusus WooCommerce, terkadang diperlukan penggunaan dependensi tertentu. wc-add-to-cart-variation(Digunakan untuk produk yang dapat disesuaikan) atau wc-checkout(Digunakan untuk halaman pembayaran.) Oke. wp_localize_script Dengan fungsi ini, Anda dapat dengan aman mengirimkan variabel PHP (seperti URL AJAX, alamat situs, dll.) ke file JavaScript Anda.

```php
function my_theme_wc_scripts() {
wp_enqueue_script(
'my-woocommerce-script',
`get_template_directory_uri()` . 'https://www.likacloud.com/js/my-woocommerce.js',
array( 'jquery', 'wc-add-to-cart-variation' ), // Dependensi
'1.0.0',
true // Memuat konten di bagian kaki halaman (footer)
);
`wp_localize_script('my-woocommerce-script', 'myWooParams', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_wc_scripts' );