Menggunakan Paket Tata Letak Mode Divi untuk Membuat Toko Online dengan WooCommerce

Paket Tata Letak Mode baru Divi memiliki pengaturan yang bagus untuk setiap toko online. Integrasi modul toko dan pengaturan tata letak halaman memberi Anda awal yang signifikan. Tetapi untuk mendapatkan tata letak ini dan berjalan sebagai toko online yang fungsional, kita memerlukan plugin WooCommerce. Dan, Anda mungkin terkejut melihat seberapa baik Divi dan WooCommerce bekerja sama.

Dalam tutorial ini, saya akan menunjukkan cara membuat toko online menggunakan paket tata letak Fashion Divi menggunakan Woocommerce. Saya akan memandu Anda melalui cara mengatur tata letak Anda dengan benar untuk disesuaikan, cara menghidupkan halaman toko dengan integrasi Woocommerce, dan beberapa tip tentang cara menggunakan elemen tata letak Anda dan penyesuai tema untuk menata halaman Woocommerce.

Pengaturan

Demi waktu, saya akan memulai tutorial ini dengan langkah-langkah tertentu yang sudah selesai.

1. Instal dan aktifkan Tema Divi
2. Instal dan aktifkan WooCommerce
3. Unduh Paket Tata Letak Mode dan Impor file Fashion_All.json ke Perpustakaan Tema Divi Anda.
4. Buat halaman baru untuk setiap tata letak.
5. Buat menu utama Anda.

Jika Anda bingung dengan pengaturan yang tercantum di atas, Anda dapat menemukan petunjuk lebih rinci tentang cara mengatur tata letak Anda dengan benar dengan memeriksa 10 langkah ini untuk menggunakan paket tata letak untuk proyek baru Anda.

Setelah Anda menyelesaikan 5 langkah di atas, Anda siap untuk memulai.

Sneak Peek

Berikut adalah intip beberapa halaman WooCommerce yang akan Anda buat.

Menggunakan Paket Tata Letak Mode Divi untuk Membuat Toko Online dengan WooCommerce

Berlangganan Saluran Youtube Kami

Ubah Warna Aksen Global Anda

Untuk memulai, kita akan mengubah warna aksen global untuk Tema Divi. Mengubah warna aksen global agar sesuai dengan tata letak Anda selalu merupakan ide yang bagus, tetapi juga merupakan cara termudah untuk mencocokkan halaman WooCommerce Anda dengan skema warna Anda tanpa harus menggunakan CSS khusus. Anda akan melihat warna aksen ini digunakan untuk menata elemen di setiap halaman WooCommerce Anda seperti halaman produk tunggal, halaman keranjang, dll…

Untuk mengubah Warna Aksen Global, buka Penyesuai Tema dan arahkan ke Pengaturan Umum > Pengaturan Tata Letak dan temukan opsi Warna Aksen Tema di bagian bawah.

Saya menggunakan warna pink ini dari layout: #fc7086

Kemudian, setelah Anda mengubahnya, simpan & publikasikan pengaturan Anda dan segarkan halaman Anda untuk memungkinkan warna aksen memperbarui pengaturan lain dalam penyesuai.

Perbarui Pengaturan Tipografi di Penyesuai Tema

Karena WooCommerce menggunakan pengaturan penyesuai tema default Anda untuk menata teks untuk setiap halamannya, Anda akan ingin memastikan bahwa Anda mencocokkan tipografi yang digunakan pada tata letak Anda dengan pengaturan tipografi di penyesuai tema.

Untuk memperbarui tipografi Anda, buka Divi > Penyesuai Tema > Pengaturan Umum > Tipografi dan perbarui yang berikut:

Ukuran Teks Tubuh: 16px
Tinggi Garis Tubuh: 1,9
Ukuran Teks Tajuk: 42
Gaya Font Tajuk: B
Font Header: Tampilan Playfair
Font Tubuh: Poppins
Warna Tautan Tubuh: [jika Anda memperbarui warna aksen global Anda, warna ini akan muncul di sini]

Setel Halaman Toko WooCommerce

WooCommerce memungkinkan Anda untuk mengatur halaman mana yang Anda inginkan menjadi halaman toko dasar Anda. Halaman ini harus mencakup semua kategori produk sehingga pengguna akan mengetahui semua yang ditawarkan toko Anda. Karena tata letak kita memiliki halaman toko, mari kita lanjutkan dan jadikan ini halaman toko dasar kita.

Dari Dasbor WordPress Anda, buka WooCommerce > Pengaturan dan klik tab Produk di bagian atas halaman. Di menu tepat di bawah tab, pilih Tampilan . Kemudian pilih Halaman Toko ke halaman "Toko" yang Anda buat dengan tata letak halaman toko baru dari paket tata letak mode.

Kemudian simpan perubahan.

Tambahkan Produk ke Toko Anda

Anda mungkin telah memperhatikan bahwa Halaman Toko Anda, meskipun memiliki dua modul toko, tidak menampilkan produk apa pun. Nah jelas Anda perlu menambahkan produk terlebih dahulu. Untuk menambahkan produk baru ke toko Anda, buka dasbor WordPress Anda dan ikuti langkah-langkah ini:

1. Navigasikan ke Produk > Tambah Baru
2. Masukkan Nama Produk
3. Masukkan Deskripsi untuk Produk
4. Masukkan Harga Produk
5. Masukkan Deskripsi Singkat untuk Produk
6. Tambahkan Tiga Kategori Baru (Musim Panas, Unggulan, dan Obral)
7. Pilih kategori untuk Produk Anda (dalam hal ini adalah Musim Panas)
8. Tambahkan Gambar Produk
9. Publikasikan/Perbarui Produk

Tetapkan Kategori ke Produk Anda

Saat Anda mengulangi langkah-langkah di atas untuk membuat lebih banyak produk baru, pastikan untuk menetapkan kategori untuk masing-masing produk (#7 dalam langkah-langkah yang tercantum di atas). Untuk tutorial ini, saya telah menambahkan 6 produk di bawah kategori “Musim Panas”, 6 produk di bawah kategori “Unggulan”, dan 1 produk di bawah kategori “On Sale”.

Perbarui Modul Toko di Halaman Toko

Sekarang setelah produk Anda dibuat, Anda dapat menambahkan produk ini ke halaman toko Anda. Seperti yang saya sebutkan sebelumnya, tata letak halaman toko sudah memiliki modul toko yang terpasang di dalam tata letak. Ada satu di bawah bagian Musim Panas dan satu di bawah bagian Unggulan.

Buka halaman toko dan terapkan pembuat visual. Kemudian arahkan kursor ke modul toko (saat ini tidak menampilkan produk apa pun) di bawah baris yang berisi tajuk Busana Musim Panas dan klik pengaturan modul.

Perbarui pengaturan untuk hanya menyertakan kategori "Musim Panas".

Sekarang Anda akan melihat semua produk yang ditambahkan dengan kategori musim panas.

Selanjutnya, temukan modul toko di bawah Judul Produk unggulan dan perbarui pengaturan untuk hanya menyertakan kategori Unggulan.

Tambahkan Modul Toko untuk Menampilkan Barang “On Sale” di Halaman Toko

Karena kami memiliki dua kategori (Produk Unggulan dan Busana Musim Panas) di halaman toko, akan mudah untuk membuat kategori dan produk tambahan menggunakan modul yang sudah disediakan di tata letak.

Mari buat bagian lain untuk menampilkan produk “On Sale” kita.

Untuk melakukan ini, gunakan pembuat visual dan gunakan opsi klik kanan untuk menyalin seluruh bagian yang menampilkan produk mode musim panas dan menempelkannya langsung di bawah bagian Produk Unggulan.

Sekarang yang harus Anda lakukan adalah membuat beberapa pembaruan.

Di baris yang menampilkan Judul, lanjutkan dengan mengklik teks di modul teks dan ubah judul menjadi "On Sale" alih-alih "Summer Fashion".

Kemudian ubah gambar di kolom kiri menjadi sesuatu yang lebih sesuai dengan produk sale Anda.

Terakhir, perbarui modul toko agar hanya menyertakan kategori “On Sale”.

Gaya Halaman WooCommerce Anda dengan Tata Letak Mode

WooCommerce menghasilkan kumpulan halaman WooCommerce sendiri secara otomatis saat Anda menginstal plugin. Ini termasuk yang berikut:

Toko – yang merupakan tempat untuk arsip jenis kiriman untuk produk Anda.
Keranjang – yang menggunakan kode pendek [woocommerce_cart] untuk menghasilkan isi keranjang
Checkout – yang menggunakan kode pendek [woocommerce_checkout] untuk menampilkan informasi.
Akun Saya – yang menggunakan kode pendek [woocommerce_my_account] untuk menampilkan informasi pelanggan tertentu yang terkait dengan akun mereka.

Karena kami telah memilih halaman Toko kami, tidak diperlukan desain lebih lanjut. Tetapi untuk 3 halaman WooCommerce lainnya, kita perlu menatanya agar sesuai dengan desain tata letak halaman kita yang lain.

Menambahkan Header Bagian ke Halaman Keranjang dan Checkout

Mari kita lihat halaman Cart terlebih dahulu. Inilah tampilannya sebelum kita melakukan apa pun untuk itu.

Perhatikan bahwa karena kami memperbarui warna aksen global kami, tautan dan tombol kami sudah cocok dengan skema warna. Dan, karena kami memperbarui pengaturan tipografi kami di Penyesuai Tema, tajuk dan teks isi juga cocok dengan tema kami.

Tapi kita bisa melakukan sedikit lebih baik dari ini hanya dengan beberapa klik. Pertama, buka halaman toko, gunakan pembuat visual, dan simpan bagian atas yang berisi header halaman ke perpustakaan. Anda bisa memberi nama “bagian header halaman”.

Kemudian gulir ke bawah ke bagian bawah halaman dan temukan bagian terakhir yang berisi email optin dan detail kontak dan simpan ke perpustakaan Anda dengan nama "bagian footer halaman".

Sekarang pergi mengedit halaman keranjang Anda. Dari editor halaman default, pilih untuk menggunakan Divi Builder, lalu "Gunakan Visual Builder". Pembangun seharusnya secara otomatis menempatkan kode pendek [woocommerce_cart] dalam modul teks dalam satu baris kolom dari bagian reguler. Jika tidak, Anda harus membuatnya sendiri. Selanjutnya, klik ikon plus biru untuk menambahkan bagian baru di bawah yang sekarang, pilih tab "Tambahkan dari Perpustakaan". Kemudian pilih bagian baru yang baru saja Anda buat yang disebut "Bagian Header Halaman".

Kemudian seret bagian itu ke bagian atas halaman Anda dan ubah teks judul menjadi "Keranjang Anda". Itu dia!

Anda juga dapat mengulangi proses ini untuk Halaman Checkout.

Mendesain Halaman Akun Saya menggunakan Divi Builder

Sekarang setelah Anda tahu cara menambahkan header ke halaman WooCommerce ini, lanjutkan dan lakukan hal yang sama untuk halaman Akun Saya. Kali ini Anda dapat menambahkan bagian footer yang Anda simpan ke perpustakaan ke bagian bawah halaman ini.

Anda mungkin ingin memberikan halaman ini desain yang berbeda untuk membuatnya lebih jelas bahwa ini adalah halaman yang mengelola akun Anda. Jadi, alih-alih latar belakang gradien merah muda untuk bagian header dan footer, buka pengaturan bagian untuk masing-masing dan ubah warna gradien latar belakang menjadi #9599e2 dan #8bc6ec.

Gunakan Pengaturan Modul Teks untuk Menata Konten Kode Pendek WooCommerce

Karena kode pendek WooCommerce sekarang berada di dalam modul teks, Anda dapat menggunakan ini untuk keuntungan Anda untuk menata beberapa elemen tersebut dalam pengaturan modul.

Mari kita lakukan ini untuk halaman Akun Saya. Dari pembuat visual, perbarui pengaturan modul teks yang menyimpan konten kode pendek sebagai berikut:

Di bawah tab desain…

Ukuran Teks Teks: 20px
Tinggi Baris Teks: 1.6em

Sekarang klik pada tab tautan di bawah bagian Teks untuk menata tautan sebagai berikut:

Font Tautan: Poppins
Berat Huruf Tautan: Semi Tebal
Ukuran Teks Tautan: 27px
Tinggi garis tautan: 1.5em

Simpan Pengaturan

Sekarang periksa Halaman Akun Saya Anda.

Menggunakan CSS Kustom untuk Menata Halaman Arsip WooCommerce?

Beberapa halaman arsip yang digunakan oleh WooCommerce tidak dibuat dengan kode pendek seperti halaman lainnya, oleh karena itu halaman tersebut tidak dapat diubah menggunakan Divi Builder. Jadi untuk halaman ini, Anda perlu membuat beberapa CSS khusus.

Mari kita lihat halaman Kategori Unggulan sebagai contoh.

Sekarang mari kita buka Theme Customizer dan klik pada CSS tambahan dan tambahkan yang berikut ini:

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

Ini akan menata kotak dropdown penyortiran, remah roti, dan font harga. Teks lainnya dapat diubah menggunakan pengaturan Tipografi dari penyesuai tema.

Pikiran Akhir

Membangun toko online untuk situs web Anda menjadi jauh lebih mudah dengan bantuan paket tata letak yang luar biasa ini, WooCommerce, dan Divi Builder. Jelas, ada beberapa kebutuhan yang masih perlu dilakukan yang berada di luar cakupan artikel ini. Misalnya, Anda masih perlu memutuskan gateway pembayaran apa yang akan digunakan, bagaimana Anda ingin menangani pengiriman, dan item tindakan spesifik perusahaan lainnya. Tetapi WooCommerce harus dapat menangani sebagian besar dari apa yang Anda butuhkan.

Jika ada, saya harap posting ini menginspirasi Anda untuk membuat sesuatu yang luar biasa sendiri.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!