Panduan

Memulai toko WooCommerce dengan WordPress

WooCommerce mengelola toko: produk, pesanan, pajak, dan pembayaran. Yang tidak dilakukannya adalah membuat semua itu mencerminkan merek Anda. Panduan ini membangun empat layar yang benar-benar dilihat pembeli, menggunakan blok di editor yang sudah disertakan WordPress.

Diterbitkan Diperbarui Ditulis oleh tim Canvas di SemiColonWeb

Pasang WooCommerce

WooCommerce adalah plugin gratis dari direktori plugin WordPress, dan ia tetap mengurus semua yang bersifat komersial: data produk, stok, pesanan, aturan pajak, zona pengiriman, dan gateway pembayaran. Canvas tidak pernah menggantikan lapisan itu, itulah sebabnya ekstensi WooCommerce lain Anda tetap berfungsi.

Dua cara untuk memasangnya

  • Biarkan Wizard Penyiapan yang melakukannya. Pilih demo toko selama penyiapan, dan langkah plugin akan menginstal serta mengaktifkan WooCommerce sebelum impor dijalankan, karena toko memerlukan plugin toko.
  • Pasang sendiri dari Plugin, Tambah Baru, lalu jalankan onboarding WooCommerce. Lakukan ini jika Anda menambahkan toko ke situs yang sudah Anda jalankan saat ini.

Apa pun pilihannya, ikuti penyiapan WooCommerce sekali dan jawab pertanyaannya tentang negara, mata uang, dan produk yang Anda jual. Jawaban tersebut menentukan pajak dan pengiriman nanti, dan mengubahnya kembali cukup merepotkan.

Siapkan layanan pengiriman email sebelum Anda menerima pesanan sungguhan. Konfirmasi pesanan secara default dikirim dari WordPress melalui server Anda, dan toko yang bukti pesanannya masuk ke spam akan menghasilkan tiket dukungan yang tidak dapat Anda jawab.

Mulai dari demo toko, atau dari katalog kosong

Anda punya pilihan di sini, dan pilihan ini layak dipikirkan selama sepuluh menit.

Impor demo toko

21 dari 88 Demo merupakan toko WooCommerce yang berfungsi penuh. Dengan mengimpor salah satunya, Anda mendapatkan produk, kategori, atribut, warna swatch, halaman toko yang didesain, halaman produk yang didesain, keranjang, dan checkout, semuanya sudah tersedia dan dapat diedit. Ini adalah cara tercepat untuk melihat bagaimana setiap bagian saling terhubung, dan Anda dapat membatalkan seluruh impor jika memutuskan tidak menginginkannya.

Bangun di atas katalog Anda sendiri

Jika Anda sudah menjual barang dan memiliki produk di basis data, pilih cakupan hanya halaman untuk dimasukkan ke situs web Anda yang sudah ada. Anda mengambil halaman demo dan entri yang digunakannya tanpa pengaturan, menu, atau halaman depannya, dan katalog Anda tetap berada persis di tempatnya.

Dalam kedua kasus, halaman WooCommerce di situs Anda akan diambil alih, sehingga hanya ada satu toko, satu keranjang, satu checkout, dan satu halaman akun.

Cara kerja impor Demo secara rinci

Sembilan Demo toko WooCommerce

Tambahkan produk pertama Anda

Produk adalah entri WooCommerce yang ditambahkan di bagian Produk pada admin WordPress, dan bagian ini sengaja dibuat sederhana. Luangkan waktu di sini, bukan untuk tata letak, karena halaman produk yang baik sebagian besar berisi data produk yang baik.

  • Satu foto yang jelas untuk setiap produk, dipotret dengan cara yang sama untuk setiap item. Katalog grid terlihat dirancang ketika bentuknya cocok, dan terlihat asal-asalan ketika tidak.
  • Deskripsi singkat yang menjawab pertanyaan yang benar-benar dimiliki pembeli. Ukuran, bahan, berapa lama pengiriman, dan apa yang terjadi jika tidak pas.
  • Kategori yang sesuai dengan cara orang berbelanja, bukan cara gudang Anda ditata.
  • Atribut untuk semua yang bervariasi. Warna, ukuran, finishing. Berikan nilai warna sebenarnya pada istilah warna di admin, karena itulah yang nanti mengubah dropdown menjadi swatch.
  • Stok, berat, dan dimensi jika Anda mengirim barang fisik. Aturan pengiriman membaca data tersebut.

Tambahkan tiga produk sebelum mendesain apa pun. Tata letak yang dinilai dengan satu item placeholder pasti harus Anda bangun ulang.

Desain halaman toko

Toko adalah katalog, dan tugasnya membawa pengunjung ke halaman produk secepat mungkin. Canvas menyediakan blok untuk itu, dengan jawaban umumnya berupa satu pengaturan tema dengan tiga pilihan tata letak.

Blok

Grid produk menampilkan produk dari kategori, tag, pencarian, atau daftar pilihan manual. Carousel produk melakukan hal yang sama dalam satu baris untuk halaman beranda. Kartu kategori produk membawa pengunjung ke suatu bagian. Filter harga memungkinkan pembeli mempersempit katalog yang panjang. Setiap elemen adalah blok dengan panel pengaturan, sehingga jumlah kolom, sumber, dan urutannya dapat diatur lewat kontrol, bukan kode.

Templat di baliknya

Toko itu sendiri adalah templat blok yang bisa Anda buka di Penyunting Situs. Atur tata letaknya dengan lebar penuh, dengan sidebar kiri, sidebar kanan, atau keduanya, bergantung pada apakah filter dan kategori layak ada di katalog Anda. Ada 18 templat toko secara keseluruhan, yang mencakup halaman toko, halaman produk, arsip, keranjang, dan checkout.

Pengaturan default untuk seluruh toko

Opsi Tema memuat 39 pengaturan toko di 5 tab: katalog, halaman produk, keranjang dan checkout, keranjang mini di header, serta mode katalog. Produk per halaman, paginasi, bentuk gambar produk, apakah gambar galeri tambahan muncul saat kursor diarahkan, dan isi overlay saat kursor diarahkan semuanya diatur di sana. Blok yang mengatur salah satunya secara mandiri tetap diutamakan di halaman tempat blok itu berada.

Bagian Toko pada Opsi Tema Canvas yang menampilkan pengaturan katalog untuk produk per halaman, paginasi, bentuk gambar produk, dan overlay kartu
Opsi Tema, Toko. Default untuk seluruh toko, ditimpa oleh blok mana pun yang memiliki pengaturan sendiri.

Desain halaman produk

Ini adalah halaman yang menjual, jadi halaman ini layak mendapatkan lebih dari sekadar tata letak bawaan yang dipakai setiap toko di internet.

Bangun dari bagian-bagian

Setiap bagian halaman produk adalah sebuah blok: galeri gambar, harga, rating bintang, meta, deskripsi singkat, pilihan variasi, tombol tambah ke keranjang, tab, baris berbagi, dan produk terkait. Pindahkan, ubah gayanya, atau hapus salah satunya sepenuhnya, dan halaman tetap berfungsi karena setiap blok meminta datanya sendiri dari WooCommerce.

Atau mulai dari tata letak siap pakai

Jika Anda lebih suka tidak menyusun dari bagian-bagian, pilih salah satu tata letak produk tunggal yang tersedia dan pindahkan komponennya: default, ringkasan lengket yang mengikuti galeri saat digulir, daftar, desain berbasis warna, desain toko, dua tata letak galeri dengan tautan kustom, dan varian dengan sidebar kiri, kanan, atau dua sidebar. Tetapkan tata letak per produk dari editor, atau atur default toko di Opsi Tema.

Apa yang ditampilkan di bagian atas halaman

Foto, nama, harga, pilihan varian, dan tombol Tambahkan ke Keranjang. Yang lain, termasuk deskripsi yang jarang dibaca orang, bisa diletakkan di bawah. Periksa hal ini di ponsel sebelum Anda memutuskan tidak setuju.

Keranjang dan checkout

Dua layar ini adalah tempat uang terbuang, dan di sebagian besar tema keduanya adalah layar yang tidak boleh Anda sentuh. Di sini keduanya berupa blok, sama seperti elemen lainnya.

Keranjang

Blok tabel keranjang untuk isinya, blok total keranjang untuk angka-angkanya, dan blok cross-sells untuk hal yang mungkin benar-benar ditambahkan pembeli. Buat singkat dan pastikan tombolnya jelas terlihat. Kesalahan keranjang yang paling umum adalah deretan konten promosi di antara total dan tombol checkout.

Proses checkout

Blok penagihan untuk formulir, blok tinjauan pesanan untuk barang yang dibeli, dan blok notifikasi untuk pesan yang memberi tahu pembeli apa yang telah terjadi. WooCommerce tetap mengelola pesanan, pembayaran, dan email; Anda yang menentukan tampilan layar.

Aturan yang langsung menghasilkan manfaat

  • Minta hanya kolom sebanyak yang benar-benar dibutuhkan pengiriman Anda.
  • Tampilkan total biaya, termasuk pengiriman, sebelum langkah pembayaran.
  • Tuliskan kapan pesanan akan tiba, dalam satuan hari, dengan kata-kata.
  • Letakkan kebijakan pengembalian Anda di tempat yang akan dilihat oleh pembeli baru yang masih ragu.

Swatch, tambah ke keranjang, dan gaya kartu

Tiga perilaku toko yang biasanya memerlukan satu plugin masing-masing termasuk dalam integrasi ini.

  • Swatch warna atribut. Beri warna pada nilai atribut produk di admin, dan produk variabel akan menampilkan titik warna atau pil tombol sebagai ganti dropdown. Pembeli kemudian memilih variasi dengan melihatnya, yang paling penting di ponsel.
  • Tambahkan ke keranjang tanpa memuat ulang halaman. Menambahkan produk dari grid, carousel, atau overlay kartu akan memperbarui keranjang secara langsung, sehingga pembeli tetap berada di halaman yang sedang mereka telusuri dan keranjang di header terus menghitung.
  • Gaya kartu produk. Samakan setiap gambar katalog ke satu bentuk agar kisi sejajar, pilih apakah gambar galeri tambahan muncul saat disorot atau diputar sebagai slideshow, dan tentukan apa yang ditawarkan lapisan hover: beli, tampilan cepat, atau keduanya.

Ketiganya adalah pengaturan. Tidak ada yang memerlukan cuplikan kode, child theme, atau plugin kedua, dan masing-masing dapat dinonaktifkan jika Anda lebih menyukai perilaku yang lebih sederhana.

Beberapa tema menjual lapisan ini sebagai produk tersendiri. OceanWP menyediakan integrasi WooCommerce gratis dan menawarkan Ocean eCommerce Pro sebagai produk terpisah, dan cara Canvas dibandingkan dengan OceanWP menjelaskan apa saja yang disertakan setiap paket untuk toko.

Pembayaran, kecepatan, lalu pesanan uji coba

Desain di akhir, urusan uang di awal. Kerjakan ini sebelum Anda memberi tahu siapa pun bahwa toko sudah buka.

Penyiapan komersial di WooCommerce

  • Hubungkan gerbang pembayaran yang ingin Anda gunakan dan selesaikan verifikasinya, yang biasanya memakan waktu lebih lama dari perkiraan Anda.
  • Atur aturan pajak dan zona pengiriman untuk wilayah tempat Anda benar-benar mengirim barang.
  • Buat halaman pengembalian dana, pengembalian barang, dan pengiriman, lalu tautkan dari footer dan checkout.

Kecepatan di Canvas

WooCommerce memuat skrip dan stylesheet di setiap halaman situs, termasuk halaman yang tidak menjual apa pun. Lima sakelar mengembalikan kendali itu: hapus JavaScript WooCommerce pada halaman yang tidak menampilkan output toko, nonaktifkan pelacakan atribusi pesanan, hentikan skrip cart fragments yang terus-menerus meminta data ke server di setiap halaman yang menampilkan keranjang, dan hapus pustaka password strength serta select di luar halaman akun dan checkout. Kelimanya termasuk di antara 35 optimasi, dan semuanya dapat dibatalkan.

Lalu buat pesanan sungguhan

Beli sesuatu dari toko Anda sendiri, di ponsel, menggunakan data seluler. Bayar dengan kartu sungguhan jika gateway Anda mendukung pengembalian dana uji. Pastikan email konfirmasi masuk, pastikan pesanan muncul di admin, lalu ajukan pengembalian dana untuk diri sendiri. Semua yang Anda temukan dalam lima menit itu adalah sesuatu yang akan ditemukan pelanggan sebaliknya.

Tab WooCommerce pada opsi performa Canvas dengan lima sakelar untuk menghapus skrip toko dari halaman yang tidak memerlukannya
Performa, tab WooCommerce. Lima sakelar yang bisa dibalik untuk skrip yang tidak pernah dipakai halaman.

Sumber

Jika panduan ini menjelaskan sesuatu di luar Canvas itu sendiri, berikut adalah halaman resmi yang mendokumentasikannya.

Langkah selanjutnya

Langkah selanjutnya

Dua panduan untuk bagian lain situs di sekitar toko, serta fitur toko secara lengkap.

PanduanBangun situs web restoranImpor dari awal hingga akhir pada proyek sungguhan, beserta penyuntingan yang menyusul.PanduanBangun situs web untuk klienSatu lisensi untuk setiap klien: kunci lisensi, salinan staging, dan seperti apa serah terimanya.ProdukCanvas dan WooCommerce24 blok toko dan 18 templat toko.
Pertanyaan

Pertanyaan umum

FAQ lengkap menjawab sisanya, dan dokumentasi membahas setiap pengaturan secara rinci.

Apakah saya masih memerlukan plugin WooCommerce?

Ya, toko Canvas tetap berjalan dengan plugin WooCommerce. Canvas menambahkan blok, templat, dan opsi di atasnya dan membiarkan plugin tetap memegang kendali, sehingga pesanan, produk, pajak, pengiriman, dan pembayaran tetap berada di tempat yang diharapkan ekstensi lain. Jika Anda mulai dari demo toko, Wizard Penyiapan akan memasang dan mengaktifkan WooCommerce sebelum impor dijalankan.

Apakah blok toko merupakan pembelian tambahan?

Tidak, blok toko Canvas disertakan di setiap paket tanpa biaya tambahan. Semua 24 blok toko adalah blok premium, dan setiap paket menyertakan setiap blok premium, beserta semua 18 templat toko dan semua 21 Demo toko. Tidak ada tingkatan e-commerce dan tidak ada add-on toko.

Bisakah saya menggabungkannya dengan blok WooCommerce?

Ya, boleh dicampur sesuka Anda: blok toko Canvas adalah blok terdaftar biasa, sehingga bisa berdampingan dengan blok WooCommerce dan blok inti di templat dan halaman yang sama. Ganti satu bagian dalam satu waktu dan biarkan bagian tata letak lainnya tetap.

Apakah mengimpor demo toko akan memberi saya dua checkout?

Tidak, impor demo toko Canvas hanya menyisakan satu checkout. Fitur impor menemukan halaman toko, keranjang, checkout, dan akun yang sudah dimiliki situs Anda, lalu mengarahkan menu dan tautan demo ke halaman tersebut, sehingga Anda tetap memiliki satu dari masing-masing. Produk dan pesanan yang sudah ada tidak diubah, dan seluruh impor dapat dibatalkan.

Bangun situs web Anda berikutnya dengan Canvas

Pemula, freelancer, atau agensi, Anda mendapatkan blok dan Demo yang sama. Mulailah dengan satu situs dan buat sebanyak yang Anda butuhkan dengan lisensi yang sama.

Dapatkan Canvas · mulai US$79/tahunPratinjau demo