Buat Halaman Kategori Produk WooCommerce dengan Pembuat Tema Divi

Halaman kategori adalah bagian penting dari situs eCommerce mana pun. Klien menelusuri kategori produk untuk menemukan apa yang mereka butuhkan. Itulah mengapa halaman kategori Anda harus terlihat sama bagusnya dengan halaman produk Anda. Dengan Pembuat Tema Divi, membuat templat halaman kategori lebih mudah dari sebelumnya. Dalam tutorial ini, kami akan menunjukkan cara membuat template halaman kategori langkah demi langkah dan menatanya menggunakan opsi bawaan Divi. Selanjutnya, kami akan menunjukkan cara membuatnya dapat difilter dengan bantuan dari plugin Filter Produk WooCommerce Themify.

Buka dua tab browser berdampingan. Gunakan tab pertama untuk pembuat tema dan tab kedua untuk pratinjau langsung halaman kategori. Bekerja dengan cara ini untuk melihat kemajuan saat Anda pergi. Untuk kenyamanan Anda, kami juga telah menambahkan template sebagai unduhan gratis.

Mari kita lakukan!

Pratinjau

Sebelum kita mulai membuat ulang template, mari kita lihat seperti apa tampilan template halaman kategori pada ukuran layar yang berbeda.

Desktop

Seluler

Unduh Templat Halaman Kategori Woo GRATIS

Untuk mendapatkan templat halaman kategori Woo gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Perbarui Produk Dan Kategori Anda

Sebelum membuat template, pastikan produk Anda diatur dalam kategori yang benar. Periksa apakah mereka juga ditandai dengan benar. Ini akan menjadi penting saat menyiapkan plug-in filter produk.

2. Plugin Pengaturan

Unduh dan pasang

Unduh Filter Produk WooCommerce. Arahkan ke dasbor plugin Anda dan unggah file .zip plugin untuk menginstalnya. Atau, cari plugin di direktori. Plugin akan menambahkan tab baru di menu dasbor Anda. Pastikan Anda mengaktifkan plugin juga.

Tambahkan Formulir Filter Baru

Klik pada tab plugin di dasbor Anda. Di dalam pengaturan plugin, klik tombol untuk menambahkan formulir filter baru.

Siapkan Formulir Filter

Untuk membuat sidebar Anda yang dapat difilter terlihat persis seperti yang ada di pratinjau posting ini, gunakan pengaturan yang disebutkan di bawah ini. Anda selalu dapat menyesuaikan pengaturan ini sesudahnya.

• Tata Letak: Vertikal
• Bidang Kosong: Jangan tampilkan bidang jika kosong
• Penyortiran Produk: Sembunyikan penyortiran produk
• Opsi Pagination: Gulir Tak Terbatas
• Tombol Reset: Tidak ada tombol reset
• Hubungan Logis Antar Taksonomi: AND
• Templat Halaman Hasil: Tampilkan hasil di halaman yang sama

Buat Bidang Kategori

Di bilah menu di bawah area utama, Anda akan melihat pilihan tab. Seret dan lepas tab 'Kategori' ke pembuat di bawahnya. Kemudian sesuaikan pengaturan sebagai berikut:

• Judul Bidang: Kategori
• Termasuk Anak-anak: Ya
• Tampilkan sebagai: Kotak centang
• Logika: OR
• Urutan: Nama, Turun
• Tata Letak: Horizontal, 2 kolom

Buat Bidang Tag

Sekarang seret dan lepas tab 'Tag' ke dalam pembuat. Pastikan itu ditempatkan di bawah tab 'Kategori'. Sesuaikan pengaturan sebagai berikut:

• Judul Bidang: Jenis
• Tampilkan sebagai: Kotak centang
• Urutan: Nama, Turun
• Tata Letak: Horizontal, 2 kolom
• Ikon Warna
  • Latar Belakang: Transparan
  • Warna Teks: Coklat Tua #44000d

Klik Simpan untuk Menghasilkan Kode Pendek

Simpan pekerjaan Anda dan tutup pembuatnya. Anda akan melihat kode pendek di menu utama plugin. Salin, Anda akan membutuhkannya nanti.

3. Buat Ulang Templat Halaman Kategori Produk di Pembuat Tema

Buka Pembuat Tema / Tambahkan Template Baru

Saatnya untuk mulai membuat ulang template! Buka pembuat tema Anda dan tambahkan templat baru.

Setel Pengaturan Template

Dalam pengaturan template, pilih 'Halaman Kategori Produk Tertentu'. Klik pada kategori yang ingin Anda tetapkan template ini. Kami akan memilih Barang Kulit Buatan Tangan.

Tambahkan Tubuh Kustom

Kemudian, klik 'Tambahkan Badan Kustom'.

Pilih Bangun Badan Khusus

Kami akan membuat ulang template ini dari awal, jadi lanjutkan dan pilih 'Build Custom Body'.

Bangun Dari Awal

Setelah berada di dalam pembuat visual, pilih opsi untuk membangun dari awal sekali lagi.

Bagian 1 Pengaturan

Latar belakang

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan tambahkan warna latar belakang.

• Warna Latar Belakang: Abu-abu kebiruan transparan – rgba(68,66,109,0.02)

Menambahkan baris

Struktur Kolom

Sekarang tambahkan baris baru dengan struktur kolom berikut:

Perekat

Sesuaikan pengaturan ukuran baris berikutnya.

• Lebar Talang: 1
• Lebar
  • Desktop: 90%
  • Tablet dan Telepon: 85%
• Lebar Maks: 1920px

Jarak

Kemudian, terapkan beberapa nilai spasi yang berbeda di berbagai ukuran layar.

• Margin Kiri dan Kanan
  • Desktop: otomatis
  • Tablet: 55px
  • Telepon: 30px
• Padding Atas: 100px

Tambahkan Modul Judul Postingan ke Kolom 1

Elemen

Saatnya menambahkan modul, dimulai dengan Modul Judul Postingan di kolom 1. Aktifkan judul saja.

• Judul Acara: Ya

Latar belakang

Tambahkan warna latar belakang berikutnya.

• Warna: #e8e8e8

Teks Judul

Pindah ke tab desain dan beri gaya pada teks judul.

• Tingkat Judul: H1
• Font: Josefin Sans
• Berat: Tebal
• Gaya: TT
• Warna: #44000d
• Ukuran
  • Desktop: 32px
  • Tablet: 28px
  • Telepon: 30px
• Tinggi Garis: 1.2 em

Jarak

Sesuaikan juga jaraknya.

• Lapisan Atas
  • Desktop dan Tablet: 100px
• Padding Bawah: 80px
• Bantalan Kiri
  • Desktop dan Tablet: 30px
• Bantalan Kanan
  • Desktop dan Tablet: 30px
  • Telepon: 10px

Berbatasan

Berikan modul beberapa sudut membulat.

• Sudut Bulat: 15px keempatnya

Bayangan Kotak

Dan tambahkan bayangan kotak halus.

• Bayangan Kotak: Opsi Kedua
• Posisi Horizontal: 12px
• Posisi Vertikal: 12px
• Kekuatan Kabur: 20px
• Kekuatan Sebaran: -5px
• Warna Bayangan: #dddddd

Tambahkan Modul Teks ke Kolom 1

Isi

Tambahkan Modul Teks tepat di bawah modul sebelumnya. Di kotak konten, tambahkan kode pendek yang Anda salin dari plugin.

• Isi: Kode Pendek Plugin

Latar belakang

Tambahkan warna latar belakang berikutnya.

• Warna: #e8e8e8

Teks

Gaya teks.

• Font: Josefin Sans
• Warna: #44000d
• Ukuran
  • Desktop: 20px
  • Tablet: 18 piksel
  • Telepon: 16px
• Spasi: 1 piksel

Jarak

Sesuaikan pengaturan spasi juga.

• Margin Atas: 50px
• Padding Atas dan Bawah: 40px
• Padding Kiri dan Kanan: 30px

Berbatasan

Kemudian, tambahkan beberapa sudut membulat.

• Sudut Bulat: 15px keempatnya

Bayangan Kotak

Dan selesaikan pengaturan modul dengan menambahkan bayangan kotak halus.

• Bayangan Kotak: Opsi Kedua
• Posisi Horizontal: 12px
• Posisi Vertikal: 12px
• Kekuatan Kabur: 20px
• Kekuatan Sebaran: -5px
• Warna Bayangan: #dddddd

Tambahkan Modul Toko ke Kolom 2

Isi

Ke kolom berikutnya! Tambahkan modul toko dan sesuaikan pengaturan utama sebagai berikut:

• Jenis Tampilan Produk: Default
• Gunakan Halaman Saat Ini: Ya
• Tata Letak Kolom: 3 Kolom

Gambar

Pindah ke tab desain dan gaya gambar yang sesuai:

• Gambar Sudut Bulat: 15px keempatnya
• Bayangan Kotak Gambar: Opsi ke-2
  • Posisi Horizontal: 6px
  • Posisi Vertikal: 6px
  • Kekuatan Kabur: 18px
  • Warna Bayangan: #dddddd

Teks Judul

Gaya teks judul berikutnya.

• Font: Josefin Sans
• Berat: Semi Tebal
• Penjajaran: Kanan
• Warna: #44000d
• Ukuran
  • Desktop: 26px
  • Tablet: 24px
  • Telepon: 17px
• Spasi: 2px

Teks Harga

Jangan lupa untuk memberi gaya pada teks harga juga.

• Font: Josefin Sans
• Penjajaran: Kanan
• Warna: #44000d
• Ukuran: 15px
• Spasi Huruf: 2px
• Tinggi garis: 46px

Jarak

Sesuaikan pengaturan spasi juga.

• Lapisan Atas
  • Tablet dan Ponsel: 50px
• Bantalan Kiri
  • Desktop: 50px
  • Tablet dan Ponsel: 0px

CSS khusus

Dan yang tidak kalah pentingnya, tambahkan dua baris kode CSS khusus di tab lanjutan untuk menghasilkan beberapa ruang antara elemen yang berbeda dalam modul toko. Itu dia!

• Gambar: padding-bottom: 20px
• Harga: padding-bottom: 40px

padding-bottom: 20px;

padding-bottom: 40px;

Pratinjau

Kami telah selesai membuat ulang template halaman kategori produk WooCommerce. Mari kita lihat lagi desain yang sudah jadi pada ukuran layar yang berbeda.

Desktop

Seluler

Pikiran Akhir

Templat halaman kategori produk ini dapat diterapkan ke semua kategori dan tag di toko WooCommerce Anda. Dengan bantuan dari plugin filter produk, Anda dapat menambahkan pengaturan filter yang sesuai dengan toko dan produk Anda sendiri. Anda dapat menggunakan salah satu modul Divi woo untuk mempersonalisasi toko Anda sesuai keinginan Anda. Kami berharap template ini akan membantu Anda menambahkan tampilan yang dipersonalisasi ke desain Anda. Beri tahu kami di komentar jika Anda memiliki pertanyaan atau saran!