Pengantar Tema WooCommerce untuk WordPress

() translation by (you can also view the original English article)

WooCommerce adalah sebuah platform e-commerce populer untuk WordPress yang sedang berkembang cepat oleh WooThemes. Dalam artikel ini, saya akan memandu Anda melalui dasar-dasar tema untuk WooCommerce.

Artikel ini membuat beberapa asumsi tentang lingkungan pengembangan Anda:

Anda memiliki WordPress dan WooCommerce sudah diinstal.
Anda sudah familiar dengan menciptakan tema WordPress dan menggunakan HTML dan CSS.
Anda telah menggunakan Chrome Developer Tools atau alat-alat pengembangan web serupa seperti Firebug.

Mengkustomisasi CSS WooCommerce

Berbeda dengan yang lainnya, WooCommerce datang dengan beberapa CSS ybuilt-in yang bertujuan untuk membuatnya kompatibel dengan banyak tema sebanyak mungkin. CSS default adalah titik awal yang bagus tapi tidak mungkin bahwa itu akan sempurna sesuai style tema Anda tepat setelah instalasi.

Dengan demikian, ada dua cara mengedit CSS untuk sebuah tema WooCommerce:

Anda dapat menggunakan style default sebagai dasar dan menimpa mereka.
Anda dapat memilih untuk menonaktifkan style default dan mulai dari awal.

WooCommerce menambahkan class body "woocommerce" ke semua halamannya

Mengganti Style Default

Mengganti style default adalah cara tercepat untuk memulai dan mungkin akan sesuai dengan kebanyakan orang.

Anda dapat menyalin seluruh file CSS default WooCommerce (terletak di wp-content\plugins\woocommerce\assets\css\woocommerce.css or woocommerce.less), hapus apapun yang tidak Anda perlukan, dan ubah apapun yang Anda butuhkan. Namun, ini bisa memakan waktu, dan dapat mengakibatkan banyak CSS berulang.

Untuk itu, saya biasanya menggunakan pendekatan berikut:

Saya menavigasi melalui seluruh situs menemukan style yang perlu saya ubah.
Setelah itu, saya menggunakan Chrome Developer Tools (atau alat sejenis) untuk mengidentifikasi class, dan bahkan membuat perubahan dalam browser untuk memastikan bahwa saya memahami bagaimana itu akan terlihat. Hal ini biasanya dilakukan dengan mengklik kanan pada halaman dan memilih "periksa elemen" dari daftar drop-down.
Selanjutnya, saya salin CSS dari Chrome Developer Tools dalam ke file CSS tema saya.
Saya meninjau CSS di Chrome Developer Tools yang mungkin ter-strike-through atau ter-grey-out setiap style vendor prefix untuk browser lainnya. Ini penting untuk mengubah nilai-nilai ini untuk menjaga CSS Anda konsisten di berbagai browser mungkin digunakan pengunjung Anda.
Terakhir, saya menghapus nilai-nilai apapun yang tidak saya ubah di CSS yang saya salin. Sebagai contoh, jika saya mengubah lebar dari sesuatu, tapi bukan tingginya, maka saya tidak perlu memasukkan tingginya di file CSS kustom.

Secara pribadi, saya menemukan pendekatan ini bekerja lebih baik di kebanyakan kasus dan benar-benar mengurangi waktu pengembangan.

Pada Google Chrome, Anda dapat mengklik kanan pada sebuah elemen dalam jendela Developer Tools untuk beralih ke berbagai status (hover, aktif dll). Hal ini memungkinkan Anda untuk melihat semua status tanpa perlu mencari keseluruhan file CSS yang asli.

Menonaktifkan Stylesheet Default dan Memulai dari Awal

Stylesheet default dapat dinonaktifkan dengan menambahkan potongan kecil kode ke functions.php tema Anda:

1	define('WOOCOMMERCE_USE_CSS', false);

Cara tercepat untuk mendapatkan semua class WooCommerce adalah dengan menyalin file CSS WooCommerce asli ke milik Anda sendiri dan menghapus apa saja yang tidak Anda perlukan.

Menyatakan Dukungan WooCommerce di Tema Anda

Hal ini sangat penting jika Anda menjual tema atau melepaskannya ke publik.

Tanpa secara khusus menyatakan dukungan WooCommerce dalam tema Anda, pengguna akan ditunjukkan pesan kesalahan setelah instalasi WooCommerce dan itu akan tetap di sana sampai ia diberhentikan.

Untungnya, ini semua dapat dipecahkan dengan potongan kecil kode yang dimasukkan ke dalam ke file functions.php tema Anda:

1	add_theme_support( 'woocommerce' );

Menyelam Sedikit Lebih Dalam: Mengedit Template

Mengedit CSS dalam WooCommerce akan membuat Anda sedikit cukup jauh, tetapi bagaimana jika Anda benar-benar ingin menyesuaikan tata letak halaman? Untungnya, ada cara yang baik untuk melakukan ini.

Plugin WooCommerce dilengkapi dengan sejumlah template HTML front-end serta template email. Bukannya mengedit file-file ini secara langsung di dalam plugin (yang merupakan ide yang sangat buruk karena sekali update plugin dan semua perubahan Anda akan hilang!), Anda dapat menyalinnya ke dalam tema Anda:

Dalam tema direktori Anda, buat folder baru bernama "woocommerce."
Arahkan ke direktori plugin WooCommerce dan buka folder "templates". Folder template memiliki banyak subfolder dengan semua template yang berbeda yang digunakan WooCommerce. Untungnya, struktur file template dan penamaan di WooCommerce adalah mudah untuk diikuti.
Dalam folder "woocommerce" yang baru saja dibuat, salin file template yang ingin Anda edit. Ingat untuk menjaga struktur direktori yang sama di sini. Jika Anda ingin mengedit template dalam subfolder maka ingat untuk membuat subfolder di dalam direktori tema Anda.
Edit file dari dalam folder "woocommerce" Anda dan simpan perubahannya.

Sebuah Contoh Praktis

Mari katakan bahwa kita ingin mengubah beberapa HTML dalam layar "My Orders" dari WooCommerce.

Hal pertama yang perlu kita lakukan adalah menemukan template yang benar. Dalam hal ini, Bagian "My Orders" adalah di bawah "My Account" di WooCommerce. Struktur direktori terlihat seperti berikut:

/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php

Selanjutnya, buat folder dalam tema Anda yang disebut "woocommerce" dan dalam folder tersebut buatlah folder kedua yang disebut "myaccount." Setelah itu, salin file my-orders.php ke direktori tersebut.

Anda seharusnya seperti berikut:

/wp-content/themes/yourtheme/woocommerce/myaccount/my-orders.php

Setiap perubahan file ini sekarang akan menimpa yang asli.

WooCommerce Loop

Jika Anda telah membuat atau mengedit tema WordPress sebelumnya, maka Anda seharusnya akrab dengan The Loop. WooCommerce memiliki loop sendiri yang Anda dapat gunakan yang memungkinkan Anda untuk menyesuaikan halaman WooCommerce. Misalnya, Anda mungkin ingin melakukan hal ini ketika Anda ingin me-load sidebar berbeda untuk halaman WooCommerce Anda.

Ini adalah integrasi paling dasar dan dengan membuat template kustom WooCommerce ini akan diterapkan ke setiap halaman WooCommerce termasuk produk, kategori dan arsip. Jika Anda tidak ingin template WooCommerce Anda untuk terlihat berbeda dari template standar Anda, maka Anda tidak harus membuat template kustom WooCommerce.

Menciptakan template adalah proses langsung:

Duplikat file page.php tema Anda dan ubah namanya woocommerce.php.
Menemukan WordPress loop dalam file woocommerce.php Anda. Ini akan terlihat seperti:

1	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
2	<?php the_title(); ?
3	<?php the_content(); ?>
4	<?php endwhile; endif; ?>

Gantikan loop Anda dengan WooCommerce loop: <?php woocommerce_content(); ?>
Sekarang, buat perubahan selanjutnya yang ingin Anda buat seperti memindah di sidebar berbeda atau mengubah tata letak.

Mari Menyimpulkan

Anda sekarang tahu dasar-dasar untuk mengintegrasikan platform eCommerce WooCommerce ke tema WordPress Anda.

Keterampilan yang dibahas dalam artikel ini akan cukup bagi Anda pada kebanyakan situasi di WooCommerce. Jika Anda memerlukan integrasi tema lebih lanjut atau fleksibel maka langkah berikutnya adalah untuk mengeksplorasi berbagai hooks, filter dan conditional statement yang tersedia untuk digunakan dengan WooCommerce.

Link Berguna: Plugin WooCommerce dari CodeCanyon.