Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WooCommerce

Cara Memasang dan Mengatur Sebuah Tema WordPress WooCommerce Baru

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

WooCommerce adalah media paling populer dan "yang paling mudah dikostumisasi untuk membangun bisnis onlinemu." Kamu bisa mengunduh WooCommerce secara gratis, namun kamu akan benar-benar melihat kekuatannya saat mulai menggunakan plugin WooCommerce Wordpress dan tema.

Namun apakah kamu benar-benar butuh menggunakan tema WooCommerce?

Walaupun tidak wajib, saya sangat merekomendasikannya.

Bukan hanya karena tema WooCommerce eCommerce-centric dari segi desain, tapi keseluruhan tema berfokus pada gaya WooCommerce. CSS yang WooCommerce gunakan untuk mendefinisikan cara produk mereka ditampilkan akan digunakan oleh tema WordPress WooCommerce untuk benar-benar menarik semuanya bersama-membuat tampilan depan toko yang paling menarik untuk eCommerce.

Tidak lupa untuk menyebutkan fakta bahwa memasang dan mengatur sebuah tema Wordpress WooCommerce baru tidak lebih susah dari menyiapkan tema apapun di WordPress.

Mari saya tunjukkan cara melakukannya.

Cara Memasang dan Mengatur Tema WordPress WooCommerce Baru

Jika kamu telah memiliki WooCommerce terpasang, maka itu sangatlah bagus! Jika tidak, saya sanga merekomendasikan Panduan Pemula Menggunakan WooCommerce oleh Rachel McCollin. Ini akan mengenalkanmu dengan WooCommerce dan membawamu ke langkah-langkah yang dibutuhkan untuk membuat bagian depan toko online-mu siap dan berjalan.

Sekarang mari mulai dengan cara memasang dan mengatur sebuah tema WordPress WooCommerce baru.

Langkah 1: Memasang Data Dummy

Jika kamu telah menambahkan produkmu ke WooCommerce, saya rekomendasikan padamu untuk melewati langkah ini dan mulai dari langkah 2.

Memasang data dummy menambahkan data khayalan ke depan tokomu untuk membantumu memvisualisasikan tokomu dengan produk. Setelah kamu menyelesaikan pemasangan dan menyiapkan tema WordPress WooCommerce baru, kamu perlu menghapus semua data khayalan sebelum menambahkan produkmu. Jika tidak kamu mungkin secara tidak sengaja menghapus data produkmu sendiri.

Data khayalan termasuk di dalam plugin WooCommerce-mu. Jika kamu telah memasang WooCommerce melaui WordPress Admin, maju dan unduh plugin dari direktori plugin WordPress dari komputermu. Ini akan jadi lebih mudah daripada maduk ke FTP-mu, pergi ke direktori plugin dan mengunduh data khayalan dari sana.

Setelah selesai mengunduh, unzip berkasnya sehingga kamu siap untuk mengimpor berkas dummy-data.xml.

Pergi ke Tools dan klik Import.

How to Install and Setup a New WordPress WooCommerce Theme

Jangan biarakan "WooCommerce Tax Rates (CSV)" membingungkanmu. Ini bisa dilakukan nanti jika kamu ingin. Untuk data khayalan WooCommerce, kamu akan memilih WordPress.

How to Install and Setup a New WordPress WooCommerce Theme

Biasanya kamu tidak memiliki plugin WorPress Importer terpasang, oleh karenanya pergilah dan pasang sekarang.

How to Install and Setup a New WordPress WooCommerce Theme

Setelah terpasang, pergi Aktifkan dan Jalankan Pengimpor

Apakah kamu ingat di mana kamu mengunduh dan membongkar plugin WooCommerce? Bagus! Sekarang kamu perlu klik Choose File dan membuat jalanmu ke sana.

How to Install and Setup a New WordPress WooCommerce Theme

Data khayalanmu harus berada di folder yang tidak di zip: (woocommerce.version.number) > woocommerce > dummy-data.

How to Install and Setup a New WordPress WooCommerce Theme

Buka folder dummy-data, pilih dummy-data.xml, dan kamu siap untuk untuk menggunggah dan mengimpor berkasnya.

Ini hal terakhir yang perlu kamu lakukan sebelum mengimpor semua data khayalan.

Beberapa dari sini adalah preferensi pribadi, tapi ini yang saya lakukan (Screenshot lebih jauh di bawah):

Mengimpor author default "wooteam" ketimbang membuat sebuah autohr baru atau menggunakan author yang telah ada. Dengan begini kamu tahu konten apa yang diimpor/dibuat di proses ini berdasarkan nama author (saya rekomendasikan menghapus author ketika menghapus data khayalan setelah kamu selesai memasang dan mengatur tema WordPress WooCommerce barumu).

Saya juga merekomendasikan kamu Mengunduh dan mengimpor lampiran sehingga kamu memliki gambar yang terasosiasi dengan tiap produk (lagi, kamu akan memastikan medianya terhapus saat telah selesai dengan data khayalan).

Setelah kamu melakukan seleksinya, kirim:

How to Install and Setup a New WordPress WooCommerce Theme

Kunjungi yourwebsite.com/shop dan kamu harusnya melihat toko percobaan yang telah terimpor:

How to Install and Setup a New WordPress WooCommerce Theme

Ya! Kamu melakukannya!

Tidak terlihat bagus, bukan begitu? Hal bagusnya kita akan segera memasang sebuah tema WordPress WooCommerce yang bagus seperti Savoy.

(CATATAN: Setelah kamu selesai memasang dan mengatur temamu, jangan lupa untuk menghapus produk dan gambarnya dari data khayalan sebelum kamu menambahkan produkmu sendiri.)

Langkah 2: Memasang Sebuah Tema WordPress WooCommerce

Sekarang, mari lihat cara memasang tema WooCommerce. Jika kamu belum mengunduh tema WordPress Commerce, pergi dan unduhlah ke komputermu (pastikan kamu tahu di mana mengunduhnya sehingga bisa mengaksesnya).

Ada dua cara berbeda untuk memasang temamu:

  1. Akses situsmu melalui FTP
  2. Dari WordPress Admin

FTP Tema-mu

Jika kamu nyaman menggunakan FTP, pergi dan sambungkan ke server-mu dan buat jalur ke direktori wp-content > themes Ini di di mana kamu akan mengirim tema-mu. Sebelum kamu mengirim folder yang tidak terzip ke server-mu, pastikan kamu benar-benar mengirim temamu. Mari lihat lebih dekat dengan menggunakan contoh tema WordPress kamu dari ThemeForest.

Setelah membuka zip unduhanmu, kamu akan melihat beberapa folder berbeda:

How to Install and Setup a New WordPress WooCommerce Theme

Tidak semua tema yang kamu unduk akan dikemas seperti ini. Terkadang folder zip yang kamu unduk adalah folder tema sebenarnya. Akan jadi bagus jika kamu mengeceknya dua kali, karena dia bervariasi dari tempat ke tempat.

 Savoy - Minimalist AJAX WooCommerce Theme memiliki berkas tambahan seperti dokumentasi, aset, dan lainnya. Jika kamu melihat ke folder theme Files milik Savoy, kamu akan menemukan temamu (savoy.zip)

Jika kamu memasangnya dengan FTP, pergi dan unggah older tema yang tidak terzip (contohnya: "savoy") ke direktori tema. Jika kamu tidak yakin dengan penggunaan FTP atau kamu ingin memasangnya melalui WordPress Admin, itu bukan masalah. Saya juga lebih suka menggunakan WordPress Admin.

Dari WordPress Admin

Memasang tema WordPress dari Admin membutuhkan folder tema kita dalam bentuk zip (themefolder.zip). Seperti yang kita diskusikan sebelumnya, kamu perlu memastikan bekerja dengan folder tema yang sebenarnya dan bukan folder di mana tema-mu dikemas.

Dari WordPress Admin, di bawah Appearance, klik Themes:

How to Install and Setup a New WordPress WooCommerce Theme

Menambahkan tema baru:

How to Install and Setup a New WordPress WooCommerce Theme

Mengunggah tema:

Apakah kamu ingat lokasi berkas zip temamu?

(Conoth tema kita berjudul: Savoy.zip)

Klik Choose File dan buat jalurmu ke sana.

Setelah terpasang, kamu bisa mengunjungi Appearance > Themes di WordPress Admin untuk melihat apakah dia sudah terpasang atau langsung tekan activatei it.

Seperti yang bisa kamu lihat (di bawah) tema Savoy telah terpasang secara sukses, gerakkan mouse dan klik Activate:

How to Install and Setup a New WordPress WooCommerce Theme

Sekarang tema WordPress WooCommerce-mu sudah sukses terpasang dan aktif. Mari kita siapkan.

Langkah 3: Mengatur Tema WordPress WooCommerce

Tidak semua tema dikostumisasi secara sama persis. Cara sebuah tema didesain adalah faktor besar, sehingga di sini mungkin ada beberapa perbedaan antara panduan ini dengan apa yang kamu hadapi. Umumnya, ini akan membantumu untuk membuat tema WordPress WooCommerce-mu siap-tanpa peduli apakah tema WooCommerce yang kamu gunakan dari ThemeForest atau sumber lainnya.

Plugin yang dibutuhkan/direkomendasikan

Setelah memasang dan mengaktifkan tema Savoy, kamu akan diberitahu mengenai plugin yang direkomendasikan:

How to Install and Setup a New WordPress WooCommerce Theme

Terkadang tema-mu akan memberitahumu plugin yang direkomendasikan sedangkan yang lainnya akan memasukkannya ke dokumentasi mereka. Di sana bisa ada fungsi desain tema- seperti slider opsional- yang tidak dikode ke dalam tema, namun diakomodasi untuk itu.

Klik pada Begin installing plugins di Savoy theme untuk melihat daftar plugin yang direkomendasi:

How to Install and Setup a New WordPress WooCommerce Theme

Sekali lagi, ini akan berbeda dari tema ke tema, tapi dalam kasus ini, kamu bisa memasang maupun tidak plugin tersebut.

Contohnya, ketika Savoy merekomendasikan Contact Form 7 dan mencakup style-nya, kamu mungkin tidak ingin menggunakan plugin ini untuk formulir kontakmu. Kamu mungkin ingin menggunakan yang seperti Gravity Forms atau Ninja Forms.

Sebuah plugin seperti Regenerate Thumbnail adalah sebuah plugin yang bagus untuk digunakan bagi yang telah memiliki toko dan memiliki gambar yang telah terkonfigurasi di tema sebelumnya. Plugin ini akan pergi melalui WordPress Media Library dan mengubah ukuran semua gambarmu agar cocok dengan tema baru. Kamu bisa menggunakannya dnegan data kahayalanmu, dan kamu juga bisa melewati plugin ini (tapi tidak saya rekomendasikan agar semua media memiliki ukuran yang tepat untuk kebutuhan uji coba).

Sebuah plugin seperti Evato Toolkit,sangat penting untuk tema yang dibeli dari ThemeForest, memastikan kamu mendapat notifikasi pembaharuan tema.

Saya juga merekomendasikanmu memasang semua plugin yang direkomendasikan saat kamu mulai. Kamu selalu bisa menghapus sebuah plugin ketika tidak diperlukan, dan jika kamu tidak memasang plugin yang dibutuhkan, kamu bisa jadi frustasi. Karena temanya tidak "bekerja" atau tidak melakukan hal yang tampak di demo.

Ketika kamu telah memasang semuanya, beberapa, atautidak sama sekali dari plugin yang dibutuhkan, jangan lupa untuk mengaktifkannya:

How to Install and Setup a New WordPress WooCommerce Theme

Jika kamu menggunakan tema yang dibeli dari ThemeForest, seperti tema Savoy kami, jangan lupa untuk memasukkan Username dan Secret API Key di Envato WordPrss Toolkit untuk memastikan pembaharuan tema yang benar.

Kostumisasi

Ini adalah bagian memasang dan mengatur tema WordPress WooCommerce. Sangat meenyenagkan untuk mulai melihat situsmu hidup.

Kamu bisa mengakses WordPress Customizer dari menu di WordPress: Apprearance > Customize Atau ke halaman tema di Apperance > Themes dan klik tombol Customize:

How to Install and Setup a New WordPress WooCommerce Theme

Selamat datang di WordPress Customizer:

How to Install and Setup a New WordPress WooCommerce Theme

Di sini kita akan melakukan beberapa perubahan sebelum lanjut ke konfigurasi yang lebih dalam.

Hal pertama yang akan kamu lihat adalah Site Identitiy. Di sini kamu bisa mengganti judul dan tagline situsmu.

How to Install and Setup a New WordPress WooCommerce Theme

Terkadang di sini kamu bisa menambahkan gambar header kostum atau ikon situs jiga (ini bisa berbeda dari tema ke tema).

Selanjutnya, konfigurasi menu-mu:

How to Install and Setup a New WordPress WooCommerce Theme

Jika ini pengaturan WooCommerce baru atau kamu belum membuat halaman apapun, mungkin tidak banyak yang perlu kamu "kostumisasi" sekarang. Dengan WooCommerce terpasang, dia akan secara otomatis menambahkan beberapa halaman yang saya yakin, kamu ingin segera menambahkannya ke menu-mu.

Kamu bisa dengan mudah menambah dan membuat sebuah menu:

How to Install and Setup a New WordPress WooCommerce ThemeHow to Install and Setup a New WordPress WooCommerce Theme

Setelah kamu menambahkan sebuah menu (atau beberapa), kamu bisa memilih di mana kamu ingin menu-nya tampil seperti item menu lainnya (seperti tautan kostum, kiriman, halaman , produk, dan lainnya.).

How to Install and Setup a New WordPress WooCommerce Theme

Ini memberikanmu fleksibilitas tinggi mengenai cara kerja situs WooCommerce-mu. Jangan takut mencoba atau mengubahnya lagi nanti.

Sebelum kita meninggalkan WordPress Customizer, kamu perlu membuat WordPress untuk membuat halaman depan dari toko-mu:

How to Install and Setup a New WordPress WooCommerce Theme

Tandai Front page displays sebagai A static page dan pilih Front page untuk menjadi halaman Shop-mu. Toko-nya akan terbuat secara otomatis saat kamu memasang plugin WooCommerce.

Seperti halaman Posts, dia bergantung apakah kamu ingin ada blog di situs WooCommerce-mu. Jika iya, kamu perlu membuat sebuah halaman blog dan memilihnya di bagian halaman di WordPress Customizer atau dari WordPress Admin Settings > Reading.

Hasilnya

Dengan beberapa konfigurasi dasar, kamu bisa melihat seberapa bagus situs toko online-mu menggunakan tema WordPress WooCommerce:

How to Install and Setup a New WordPress WooCommerce Theme

Halaman produk individualnya terlihat luar biasa:

How to Install and Setup a New WordPress WooCommerce Theme

Bahkan dia memiliki produk terkait:

How to Install and Setup a New WordPress WooCommerce Theme

Tema Savoy - Minimalist AJAX WooCommerce mengizinkanmu secara mudah mengatur banyak elemen di situsmu dan bisa pergi jauh dari semua yang telah saya bahas di panduan ini (pastikan membaca dokumentasi tema-mu untuk mempelajari tema-mu secara spesifik) Saya hanya menunjukkanmu perubahan yang bisa dilakukan dari WordPress Customizer dan biasanya bisa dibuat pada semua tema yang mungkin kamu gunakan.

Kesimpulan

Kamu bisa melihat dengan jelas betapa mudahnya langkah awal mengkonfigurasi tema WordPress WooCommerce barumu dan seberapa bagus ia-dengan menggunakan tema WordPress yang didesain secara spesifik untuk WooCommerce.

Ada banyak plugin WordPress WooCommerce yang berguna tersedia di CodeCanyon dan beberapa tema yang didesain secara dan efektif di ThemeForest

Melihat beberapa tema WooCommerce paling laris di ThemeForest bisa jadi titik bagus untuk memulai. (Savoy masih tetap favorit saya). Saya yakin kamu akan menemukan sesuatu yang cocok dengan toko eCommerce-mu secara sempurna. Atau telusuri koleksi kami untuk mencari satu yang cocok untuk tokomu:

Apa yang kamu jual dengan menggunakan WooCommerce?

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.