Tema WooCommerce dengan blok untuk setiap layar toko
Rancang halaman produk, grid toko, keranjang, dan checkout dengan blok di editor yang disediakan WordPress, lalu mulai dari Demo yang langsung berfungsi sebagai toko. WooCommerce mengelola pesanan, Canvas memberinya desain.
Diperbarui
24 blok untuk empat layar yang menghasilkan penjualan
Setiap bagian toko WooCommerce yang dilihat pembeli adalah blok dengan panel pengaturan, sehingga Anda dapat memindahkannya, mengubah gayanya, atau menghilangkannya tanpa menyentuh file templat.
Halaman produk 11 blok
Bangun satu tata letak produk blok demi blok, atau mulai dari salah satu templat bawaan lalu pindahkan bagiannya.
Product Images Termasuk di semua paket
Menampilkan gambar unggulan produk WooCommerce dan thumbnail galeri opsional.
Product Gallery Linker Termasuk dalam paket apa pun
Deret thumbnail yang memindahkan karusel galeri produk ke gambar yang Anda klik.
Harga Produk Termasuk dalam paket mana pun
Menampilkan harga produk WooCommerce termasuk harga diskon dan format mata uang.
Product Rating Termasuk di setiap paket
Menampilkan rating bintang dan jumlah ulasan (opsional) untuk produk WooCommerce yang sedang ditampilkan.
Product Meta Termasuk dalam paket apa pun
Menampilkan kartu meta produk: SKU, kategori, dan tag.
Product Short Description Termasuk dalam paket mana pun
Menampilkan deskripsi singkat produk dengan markup paragrafnya tetap utuh.
Variation Swatches Termasuk dalam paket apa pun
Titik warna atau tombol pil untuk memilih variasi produk variabel.
Add to Cart Termasuk dalam paket apa pun
Menampilkan form tambahkan ke keranjang WooCommerce untuk produk saat ini dengan input kuantitas opsional.
Product Tabs Termasuk dalam paket apa pun
Menampilkan tab data produk WooCommerce: Deskripsi, Informasi Tambahan, dan Ulasan.
Product Share Termasuk dalam paket mana pun
Menampilkan kartu “Share:” dengan tautan berbagi media sosial untuk produk WooCommerce saat ini.
Related Products Termasuk dalam paket apa pun
Menampilkan grid produk WooCommerce yang terkait dengan produk saat ini. Hanya ditampilkan pada templat produk tunggal.
Toko dan katalognya 5 blok
Grid, carousel, kartu kategori, dan filter harga, masing-masing dapat mengambil konten dari kategori, tag, pencarian, atau daftar yang dipilih manual.
Produk Termasuk dalam paket apa pun
Tampilkan produk WooCommerce dalam tata letak grid atau daftar. Filter berdasarkan sumber, kategori, tag, dan urutan.
Kategori Produk Termasuk dalam paket apa pun
Tampilkan kategori produk WooCommerce sebagai grid kartu responsif dengan thumbnail, nama, dan jumlah produk.
Product Carousel Termasuk di semua paket
Tampilkan produk WooCommerce dalam carousel owl-carousel yang dapat digulir. Mendukung autoplay, panah navigasi, titik, dan breakpoint responsif.
Store Price Filter Termasuk dalam paket apa pun
Kontrol rentang harga dengan dua pegangan yang memfilter kisi produk secara langsung.
Conference Tickets Termasuk dalam paket apa pun
Kotak harga untuk kategori produk tiket, masing-masing dengan pemilih jumlah dan tautan tambah ke keranjang yang aktif.
Keranjang 3 blok
Halaman keranjang yang Anda desain, dengan upsell yang benar-benar dilihat pembeli.
Cart Table Termasuk dalam paket apa pun
Menampilkan tabel keranjang WooCommerce dengan baris item, jumlah, dan total.
Total Keranjang Termasuk dalam setiap paket
Tampilkan panel total keranjang WooCommerce termasuk subtotal, pengiriman, dan tombol checkout.
Cross-Sells Termasuk dalam paket apa pun
Menampilkan produk cross-sell dari keranjang WooCommerce saat ini. Hanya tampil saat keranjang aktif dan berisi produk cross-sell.
Checkout 3 blok
Formulir penagihan, tinjauan pesanan, dan pemberitahuan yang memberi tahu pembeli apa yang baru saja terjadi.
Checkout Billing Termasuk dalam paket apa pun
Tampilkan formulir alamat penagihan checkout WooCommerce.
Checkout Order Review Termasuk dalam paket apa pun
Tampilkan ringkasan tinjauan pesanan checkout WooCommerce dengan item baris dan total.
WooCommerce Notices Termasuk dalam paket apa pun
Menampilkan notifikasi WooCommerce: galat, pesan sukses, atau notifikasi informasi.
Di bagian lain toko 2 blok
Blok toko yang berada di luar keempat layar di atas.
Wishlist Termasuk di paket mana pun
Produk yang disimpan pembeli, lengkap dengan harga, stok, dan tombol tambah ke keranjang. Letakkan di halaman yang dipilih di Opsi Tema, Wishlist.
Wishlist Button Termasuk di semua paket
Menyimpan produk saat ini ke daftar keinginan pembeli. Gunakan di templat produk dan kartu produk.
Toko Pakaian
Katalog fesyen dengan halaman koleksi, produk variabel, dan keranjang di header yang menampilkan jumlah item.
Tema e-commerce
Furnitur
Penjualan dan sewa dalam satu katalog, dengan grid produk dan halaman produk tunggal yang keduanya disusun sebagai blok.
Tema desain interior
Anggur
Toko winery dengan desain yang menonjolkan foto produk, sementara halaman toko berada di baliknya.
Tema restoranTiga dari 21 demo toko. Setiap bagian yang dilihat pembeli di halaman ini adalah blok dengan panel pengaturan di baliknya.
Yang dilakukan pembeli, tanpa memuat ulang halaman
Tiga perilaku toko yang biasanya membutuhkan satu plugin masing-masing sudah termasuk dalam integrasi ini.
Swatch warna atribut
Beri warna pada istilah atribut produk di admin, dan produk variabel menampilkan titik warna atau tombol pil sebagai pengganti dropdown, sehingga pembeli bisa memilih variasi hanya dengan melihat.
Tambah ke keranjang via AJAX
Menambahkan produk dari grid, carousel, atau overlay kartu akan memperbarui keranjang secara langsung. Pembeli tetap berada di halaman yang sedang dijelajahi, dan keranjang mini di header terus menampilkan jumlahnya.
Gaya kartu produk
Atur setiap gambar katalog ke satu bentuk agar kartu tersusun rapi, pilih apakah gambar galeri tambahan muncul saat disorot atau diputar sebagai slideshow, dan tentukan apa yang ditawarkan overlay saat disorot: beli, tampilan cepat, atau keduanya.
18 templat toko di Penyunting Situs
Setiap layar toko adalah templat blok yang dapat Anda buka, edit, dan atur ulang di Penyunting Situs, sama seperti cara Anda mengedit templat blok lainnya.
Tata letak produk tunggal
Susun halaman produk sebagai tata letak default, ringkasan lengket yang mengikuti galeri, daftar, desain berbasis warna, desain toko, salah satu dari dua tata letak galeri tautan khusus, atau dengan varian sidebar kiri, kanan, atau dua sidebar.
Tata letak halaman toko
Tata toko itu sendiri dalam lebar penuh, dengan sidebar kiri, dengan sidebar kanan, atau dengan sidebar di kedua sisi, sehingga filter dan kategori berada di tempat yang dibutuhkan katalog Anda.
Arsip, keranjang, dan checkout
Arsip toko, arsip kategori produk, keranjang, dan checkout masing-masing hadir sebagai templat, bersama penimpaan templat WooCommerce yang disediakan tema.
Templat toko tercantum di bawah woocommerce pada panel Templat milik Penyunting Situs, bersama templat Canvas, dan dapat direset dari layar yang sama.
Tetapkan tata letak per produk dari penyunting, atau atur default untuk seluruh toko di Opsi Tema. Templat yang Anda sesuaikan di Penyunting Situs tetap disesuaikan saat pembaruan, dan Canvas memberi tahu Anda templat mana yang berubah setelah pembaruan.
39 opsi toko, 5 tab
Default tingkat toko untuk katalog, halaman produk, keranjang dan checkout, serta mini cart header, ditambah mode katalog untuk toko yang menerima permintaan. Jumlah produk per halaman, paginasi, bentuk gambar produk, gambar galeri tambahan, dan overlay kartu semuanya diatur di sini. Blok yang mengatur salah satunya secara mandiri tetap berlaku di halaman tempat blok tersebut dipasang.
- Katalog: produk per baris di setiap ukuran layar, bentuk gambar, perilaku hover, lencana diskon
- Halaman produk: apa yang ditampilkan layar produk tunggal, dan bilah tambah ke keranjang yang menempel
- Keranjang dan checkout: bilah progres pengiriman gratis, dan checkout tanpa gangguan
- Keranjang mini: apa yang dilakukan keranjang header saat pembeli menambahkan produk
- Mode katalog: sembunyikan harga dan tombol beli, tampilkan tombol permintaan informasi
Opsi toko yang membantu Anda menjual Mode katalog Daftar keinginan
Lima sakelar WooCommerce
WooCommerce memuat skrip dan stylesheet di setiap halaman situs, termasuk halaman yang tidak menjual apa pun. Lima sakelar ini menghentikan hal tersebut, dan setiap sakelar dapat dibatalkan.
- Hapus JavaScript WooCommerce di halaman yang tidak menampilkan konten toko
- Nonaktifkan pelacakan atribusi pesanan jika Anda tidak membaca laporan tersebut
- Hentikan polling skrip cart fragments pada setiap pemuatan halaman
- Hapus library kekuatan kata sandi di luar halaman akun dan checkout
- Hentikan pemuatan pustaka Select2 bawaan di luar halaman checkout dan akun
21 demo adalah toko WooCommerce yang berfungsi
Produk, kategori, atribut, keranjang, dan checkout, sudah diimpor dan siap diuji dengan pesanan percobaan. Pratinjau salah satunya secara langsung sebelum Anda memutuskan.
Demo Bag Store, pratinjau langsung (dibuka di tab baru)
Toko & E-commerce · 9 halaman · Yang dipasang: blok dan tipe konten dari demo Bag Store
Demo Barber Shop, pratinjau langsung (dibuka di tab baru)
Kecantikan & Spa · 7 halaman · Yang akan diinstal: blok dan jenis konten dari demo Barber Shop
Demo CanvasRoam, pratinjau langsung (dibuka di tab baru)
Portofolio & Pribadi · 10 halaman · Yang akan diinstal: blok dan jenis konten demo CanvasRoam
Demo Christmas Store, pratinjau langsung (dibuka di tab baru)
Toko & E-commerce · 6 halaman
Demo Clothing Store, pratinjau langsung (dibuka di tab baru)
Toko & E-commerce · 19 halaman · Yang dipasang: blok dan tipe konten dari demo Clothing Store
Demo Conference, pratinjau langsung (dibuka di tab baru)
Acara & Pernikahan · 25 halaman · Yang akan dipasang: blok dan jenis konten dari demo Conference
Demo Drone, pratinjau langsung (dibuka di tab baru)
Toko & E-commerce · 12 halaman
Demo eBook, pratinjau langsung (dibuka di tab baru)
Toko & E-commerce · 9 halaman
Demo Fashion Shop, pratinjau langsung (dibuka di tab baru)
Toko & E-commerce · 25 halaman
Demo Fashion Store, pratinjau langsung (dibuka di tab baru)
Toko & E-commerce · 16 halaman
Demo FORM 2026, pratinjau langsung (dibuka di tab baru)
Acara & Pernikahan · 14 halaman · Yang akan dipasang: blok dan jenis konten dari demo FORM 2026
Demo Furniture, pratinjau langsung (dibuka di tab baru)
Toko & E-commerce · 12 halaman
Demo Game of Canvas, pratinjau langsung (dibuka di tab baru)
Hiburan & Komunitas · 12 halaman · Yang dipasang: blok dan jenis konten dari demo Game of Canvas
Demo Illustrator, pratinjau langsung (dibuka di tab baru)
Portofolio & Pribadi · 7 halaman · Yang akan diinstal: blok dan jenis konten demo Illustrator
Demo Jewelry Boutique, pratinjau langsung (dibuka di tab baru)
Toko & E-commerce · 17 halaman
Demo Podcasts, pratinjau langsung (dibuka di tab baru)
Blog & Majalah · 13 halaman · Yang diinstal: blok dan jenis konten demo Podcasts
Demo Pottery Shop, pratinjau langsung (dibuka di tab baru)
Toko & E-commerce · 12 halaman
Demo Speaker Store, pratinjau langsung (dibuka di tab baru)
Toko & E-commerce · 11 halaman
Demo Supplement Store, pratinjau langsung (dibuka di tab baru)
Toko & E-commerce · 13 halaman
Demo Wildroot Gear, pratinjau langsung (dibuka di tab baru)
Toko & E-commerce · 14 halaman · Yang dipasang: blok dan tipe konten dari demo Wildroot Gear
Demo Wine Estate, pratinjau langsung (dibuka di tab baru)
Makanan & Minuman · 10 halaman · Apa yang dipasang: blok dan jenis konten dari demo Wine EstateHalaman toko Anda diadopsi, bukan digandakan
Kekhawatiran umum saat mengimpor desain toko adalah terbangun dengan dua halaman checkout. Canvas memetakan halaman WooCommerce dari demo ke halaman yang sudah ada di situs Anda.
Layar impor yang digunakan setiap demo toko, beserta rollback untuk membatalkannya.
Satu toko, satu keranjang, satu proses checkout
Pengimpor menemukan halaman WooCommerce yang sudah ada dan langsung mengarahkan menu serta tautan demo ke halaman tersebut.
Dapat dibatalkan
Semua yang dibuat oleh impor tercatat, sehingga satu layar dapat menghapus konten demo dan mengembalikan opsi serta menu yang ada sebelumnya.
Produk yang disertakan
Produk demo, kategori, atribut, dan warna swatch disertakan bersama desain, sehingga katalog tampil dengan benar saat Anda mengganti dengan produk Anda sendiri.
Atau hanya halaman
Jika Anda memilih impor per halaman, Anda hanya mendapatkan halaman demo tanpa Opsi Tema, menu, atau halaman depannya.
Menjual dengan Canvas
Yang paling sering ditanyakan pemilik toko. Dokumentasi membahas setiap blok dan opsi secara rinci.
Apakah saya masih memerlukan plugin WooCommerce?
Ya, Canvas menambahkan blok, templat, dan opsi di atas WooCommerce, dan tidak menggantikan fungsi apa pun darinya. Pesanan, produk, pajak, pengiriman, dan pembayaran tetap berada di WooCommerce tempat ekstensi lain Anda mengharapkannya. Jika Anda memulai dari demo toko, Wizard Penyiapan akan memasang dan mengaktifkan WooCommerce untuk Anda sebelum impor dijalankan.
Apakah mengimpor demo toko akan mengganti halaman toko dan checkout saya?
Tidak, importir Canvas menggunakan halaman WooCommerce yang sudah ada di situs Anda, sehingga tidak ada halaman toko, keranjang, checkout, atau akun kedua yang muncul. Produk dan pesanan Anda yang ada tidak diubah.
Bisakah saya memadukan ini dengan blok bawaan WooCommerce?
Ya, blok toko Canvas adalah blok terdaftar biasa, sehingga blok tersebut berada berdampingan dengan blok WooCommerce dan blok inti dalam templat dan halaman yang sama, dan Anda dapat mengganti satu per satu tanpa harus berkomitmen pada seluruh tata letak.
Bagaimana cara kerja swatch warna?
Beri warna pada istilah atribut produk di admin WordPress, dan blok Canvas Variation Swatches akan menampilkan atribut tersebut sebagai titik warna atau pil tombol, menggantikan dropdown, di halaman produk dan di templat yang menggunakannya.
Apakah blok toko termasuk dalam paket saya?
Ya: semua 24 blok toko Canvas adalah blok premium, dan setiap paket menyertakan setiap blok premium. Tidak ada add-on toko dan tidak ada tingkatan e-commerce. Tema lain sering memisahkan ini: quick view adalah fitur Astra Pro, dan OceanWP menjual plugin eCommerce Pro-nya sebagai produk terpisah.
Bangun tokonya, bukan sistem di baliknya
Setiap paket menyertakan semua 24 blok toko, semua 18 templat toko, dan semua 21 demo toko. Tidak ada tingkatan e-commerce untuk ditingkatkan.