Cara Mendesain Timeline Alur Keranjang WooCommerce untuk Divi Anda

WooCommerce adalah salah satu plugin eCommerce WordPress yang paling disukai. Untuk mendukung ini, Divi mengeluarkan beberapa modul Woo-centric baru yang memungkinkan Anda mengontrol lebih besar dalam mendesain halaman WooCommerce default Anda. Dalam posting hari ini, kami akan mengembangkan garis waktu keranjang WooCommerce untuk Divi. Untuk garis waktu ini, kami akan membuat representasi visual dari perjalanan pengguna. Kami ingin menunjukkan kepada pengguna secara visual bagaimana mereka berpindah dari toko ke pembayaran.

Templat Halaman Keranjang

Tampilan Dekstop

Tampilan Tablet dan Seluler

Templat Halaman Pembayaran

Tampilan Tablet dan Seluler

Unduh Template Troli & Pembayaran secara GRATIS

Untuk mendapatkan template cart & checkout gratis, pertama-tama Anda harus mengunduhnya menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan buletin 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 dan klik unduh. Anda tidak akan "berlangganan kembali" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirim email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, plus banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis lainnya. Ikuti terus 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!

Cara Mengunduh & Memasang Template Troli & Pembayaran

Pergi ke Divi Theme Builder

Untuk mengunggah template, navigasikan ke Divi Theme Builder di backend situs web WordPress Anda.

Unggah Templat Situs Web Default Global

Kemudian, di pojok kanan atas, Anda akan melihat ikon dengan dua anak panah. Klik pada ikon.

Arahkan ke tab impor, unggah file JSON yang dapat Anda unduh di pos ini, dan klik 'Impor Template Pembuat Tema Divi.

Simpan Perubahan Pembuat Tema Divi

Setelah Anda mengunggah file, Anda akan melihat keranjang baru, checkout, dan template toko. Simpan perubahan Divi Theme Builder segera setelah Anda ingin templat diaktifkan.

Cara Membuat Timeline Keranjang WooCommerce dari Awal

Jika Anda menginginkan lebih banyak tantangan, bagian selanjutnya dari posting blog kami akan menunjukkan kepada Anda cara membuat ulang garis waktu keranjang WooCommerce untuk Divi. Anda dapat menggunakan langkah-langkah dalam tutorial ini untuk menyesuaikan garis waktu keranjang Anda sendiri. Gunakan itu sebagai inspirasi untuk proyek WooCommerce dan Divi Anda berikutnya! Linimasa keranjang WooCommerce yang akan kita buat terlihat seperti ini:

Halaman Keranjang

Halaman Pembayaran

Garis waktu keranjang Woocommerce untuk Divi ini juga responsif seluler. Itu tetap sebagai garis waktu horizontal pada perangkat seluler:

Sekarang kita memiliki panduan visual tentang apa yang akan kita bangun, mari kita mulai!

Siapkan Pembuat Tema Divi

Kami akan membuat template ini untuk memengaruhi keranjang dan halaman pembayaran WooCommerce. Karena itu, kami memulai tugas kami di Divi Theme Builder.

Buat Template Keranjang

Klik ikon plus di dalam kartu Add New Template.

Selanjutnya, pilih Build New Template .

Setelah itu, Anda akan diberikan kotak modal dari berbagai tugas yang dapat Anda lampirkan ke template baru yang Anda buat. Dalam kasus kami, kami akan membuat template untuk halaman keranjang toko WooCommerce kami. Jadi, gulir ke bawah kotak modal , dan pilih Keranjang di bawah tajuk WooCommerce. Setelah dipilih, klik Create Template . Saat kami melakukan ini, kami menugaskan template yang baru dibuat ke halaman keranjang.

Buat Templat Pembayaran

Kami akan melalui langkah yang sama untuk membuat template checkout. Klik ikon plus di dalam kartu Add New Template.

Sekali lagi, pilih Build New Template .

Untuk halaman pembayaran, kita perlu menggulir ke bawah modal box , dan memilih Checkout di bawah tajuk WooCommerce. Setelah dipilih, klik Create Template .

Simpan Templat dan Tugas

Sekarang template keranjang dan pembayaran kami telah dibuat, kami dapat menyimpannya. Klik tombol hijau Simpan Perubahan di bagian atas Divi Theme Builder.

Mari Mulai Membangun Garis Waktu Alur Keranjang WooCommerce

Menyiapkan Templat Halaman Keranjang

Sekarang kesenangan dimulai! Kita akan mulai membuat garis waktu alur keranjang untuk halaman keranjang. Untuk melakukan ini, kita klik tombol Add Custom Body di dalam template Cart yang baru saja kita buat.

Mirip dengan saat kita membuat template ini dan tugasnya, kita akan mengklik tombol Build Custom Body yang muncul di kotak modal.

Tambahkan Bagian dan Baris Baru

Sekarang kita berada di Divi Builder, kita akan menambahkan baris baru. Baris ini akan memiliki lima kolom.

Tambahkan Modul Uraian

Tambahkan tiga Modul Blurb ke kolom 1, 3, dan 5 dari baris baru Anda.

Berikut isi dari setiap Blurb Module yang akan kita gunakan:

Uraian Pertama (Kolom 1)

• Judul: Toko
• Isi: Biarkan kosong
• Gunakan Ikon: Ya
• Ikon: Lihat tangkapan layar di bawah
• URL Tautan Modul: /shop (Atau tautan khusus Anda ke halaman toko Anda)

Uraian Kedua (Kolom 3)

• Judul: Ulasan
• Isi: Biarkan kosong
• Gunakan Ikon: Ya
• Ikon: Lihat tangkapan layar di bawah
• URL Tautan Modul: /cart (Atau tautan khusus Anda ke halaman keranjang Anda)

Uraian Ketiga (Kolom 5)

• Judul: Pembayaran
• Isi: Biarkan kosong
• Gunakan Ikon: Ya
• Ikon: Lihat tangkapan layar di bawah
• URL Tautan Modul: /checkout (Atau tautan khusus Anda ke halaman checkout Anda)

Sekarang, garis waktu WooCommerce kami akan terlihat seperti ini pada titik ini:

Menambahkan Tautan ke Uraian

Saat kami membuat template untuk keranjang dan halaman pembayaran, kami membutuhkan Modul Uraian kami agar mudah diakses di mana pun halaman tempat pelanggan berada. Fitur inti dari garis waktu WooCommerce adalah bahwa pengguna akhir – pelanggan Anda – akan dapat dengan mudah menavigasi di antara berbagai tahapan proses pembayaran. Untuk menambahkan tautan ke halaman toko, keranjang, dan pembayaran default situs kami, pertama-tama kami akan memasukkan pengaturan modul dari uraian pertama, toko.

Setelah kotak pengaturan modul muncul, kita akan menggulir ke bawah menuju tajuk Tautan. Kami akan menambahkan tautan ke kotak URL Tautan Modul karena ini akan memastikan bahwa di mana pun klik khusus Anda – apakah itu Judul Blurb atau ikon itu sendiri – mereka akan diarahkan ke halaman yang harus mereka tuju.

Kami akan menambahkan tautan ke halaman WooCommerce standar ke setiap Modul Blurb. Jika Anda telah membuat tautan khusus untuk halaman ini di instalasi WooCommerce Anda, sesuaikan tautannya. Pertama, kita mulai dengan Modul Uraian Toko. Untuk URL Tautan Modul, kita masukkan /shop. Ini adalah URL default untuk halaman toko di WooCommerce. Ingat, jika Anda telah mengubah URL ini, masukkan URL khusus Anda di sini.

Klik tombol tanda centang hijau untuk menyimpan perubahan Anda. Selanjutnya, kita pindah ke Review Blurb Module. Modul ini berfungsi sebagai tautan ke halaman keranjang. Sekali lagi, kita arahkan ke tab Link , lalu kita tambahkan Module Link URL /cart , ke Module URL.

Untuk Modul Blurb terakhir, Modul Blurb Checkout, kami akan menautkan ke tautan halaman checkout WooCommerce default yaitu /checkout.

Modul Uraian Gaya

Selanjutnya, kita akan mulai menata Modul Blurb tambahan kita. Kami akan menggunakan gaya hover pada modul. Ini membantu dengan pengalaman pengguna (UX) dari garis waktu keranjang WooCommerce. Kami ingin Blurb Module yang mewakili halaman yang sedang kami buka memiliki warna yang berbeda. Dan, kami juga ingin ikon membesar saat kami mengarahkan kursor ke atasnya dan mengubah warna.

Penataan Modul Uraian

• Warna Ikon: #eac989
• Arahkan Warna Ikon: #9fa2ce
• Perataan Teks: Tengah

• Teks Judul:
  • Teks Tajuk Judul: H4
  • Font Judul: Baskerville
  • Bobot Huruf Judul: Tebal
  • Warna Teks Judul: #354e7c

Mengubah:

• Skala Transformasi (Desktop): 100%
• Skala Transformasi (Hover): 115%

Setelah kita menetapkan pengaturan desain untuk Modul Blurb pertama, kita akan memperluasnya ke Modul Blurb lainnya di baris kita.

Kami ingin memperluas gaya kami hanya ke Blurb Modules dalam bagian kami. Ini penting untuk diperhatikan terutama jika Anda mengerjakan halaman yang sudah memiliki konten di dalamnya.

Menata Modul Uraian Keranjang

Untuk menunjukkan tahapan yang berbeda dari proses checkout, kami akan memberikan warna ikon yang berbeda ke tahapan saat ini di mana pengguna kami berada. Misalnya, jika mereka ada di halaman keranjang, kami akan mengubah warna Modul Blurb yang mereferensikan tahap keranjang dari proses tersebut.

Modul Uraian Halaman Keranjang:

• Warna Ikon (Desktop): #f6c6c5
• Warna Ikon (Hover): #9fa2ce

Tambahkan Pembagi Timeline

Setelah kami membuat dan menata Modul Uraian kami, kami akan mulai menambahkan dan menata Modul Pembagi kami. Kami menggunakan Modul Pembagi di kolom dua dan empat baris kami.

Pemisah Timeline Gaya

Selanjutnya, kami akan menambahkan gaya kami ke Modul Pembagi kami.

Pengaturan Pemisah

Visibilitas:

• Tampilkan Pembagi: Ya

Garis:

• Warna Garis: #354e7c
• Gaya Garis: Bertitik
• Posisi Baris: Berpusat Secara Vertikal

Perekat

• Berat Pembagi: 5px

Mari gunakan fitur Divi lain yang sangat keren untuk menyalin dan menempelkan gaya Modul Pembagi ini ke modul lain dalam baris kita. Pertama, kita akan klik kanan pada Divider Module kita yang sudah selesai . Kedua, kita akan klik Copy Module Settings . Selanjutnya, kita klik kanan pada Modul Pembagi yang saat ini tidak diberi gaya. Terakhir, kita klik Paste Module Settings . Waktu yang dihemat adalah waktu yang diperoleh!

Menambahkan CSS Kustom

Seperti inilah garis waktu keranjang WooCommerce kami saat ini:

Untuk memastikan bahwa Modul Pembagi kami disejajarkan dengan benar dan untuk membuat modul waktu kami responsif seluler, kami akan menambahkan beberapa CSS ke baris kami.

Untuk menambahkan CSS Kustom kami, pertama-tama kami harus memasukkan Pengaturan Baris untuk Timeline Keranjang WooCommerce kami. Selanjutnya, kita pilih Tab Lanjutan . Terakhir, kami akan menambahkan CSS berikut ke Elemen Utama:

CSS khusus:

display:flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;

Setelah kami menambahkan ini ke Pengaturan Baris, kami mengklik tanda centang hijau untuk menyimpan pengaturan kami.

Penyesuaian Akhir untuk Daya Tanggap Seluler

Salah satu manfaat luar biasa dari Divi adalah kenyataan bahwa Anda dapat menyesuaikan berbagai elemen dengan cukup mendalam. Kita perlu melakukan satu pengeditan terakhir pada Modul Blurb terakhir di kolom terakhir di baris kita. Perubahan ini akan membuatnya terlihat lebih baik di perangkat seluler dan layar yang lebih kecil. Fakta bahwa Divi memungkinkan kami untuk mendapatkan perincian dengan gaya kami memastikan bahwa pekerjaan kami terlihat bagus untuk klien kami serta situs web kami sendiri.

Perhatikan bagaimana kolom terakhir, pada ponsel, sedikit lebih rendah daripada Modul Uraian lainnya. Kami akan mengubahnya! Untuk melakukan ini, kita akan masuk ke pengaturan untuk modul ketiga dan terakhir . Selanjutnya, kita akan menuju ke Spacing > Margin . Kami akan meninggalkan margin untuk tampilan desktop. Namun, kami akan menambahkan margin bawah 15px untuk tablet .

Terakhir, kita akan menambahkan margin bawah 21px untuk perangkat seluler.

Sekarang, kami memiliki garis waktu keranjang Woocommerce yang benar-benar responsif seluler yang dapat kami gunakan untuk memandu pengguna dari toko hingga checkout.

Menyiapkan Halaman Pembayaran

Kami telah menetapkan dasar untuk garis waktu aliran keranjang WooCommerce kami di halaman keranjang kami. Namun, kita harus menyelesaikan timeline kita dengan menambahkan pekerjaan yang telah kita lakukan ke template halaman checkout kita. Kami akan menggunakan fitur OG Divi, Menu Klik Kanan untuk membantu mempermudah proses halaman pembayaran. Mari kita mulai!

Salin Garis Waktu Alur Keranjang WooCommerce dari Halaman Keranjang

Kami akan kembali ke halaman keranjang. Namun, kami tidak akan memasukkan Divi Builder untuk bodi.

Klik kanan pada Custom Body template keranjang. Selanjutnya, klik opsi Salin dari menu klik kanan.

Sekarang kami telah menyalin pekerjaan yang kami lakukan di dalam template keranjang, sekarang kami akan menempelkannya ke template checkout. Untuk melakukan ini, kami mengklik kanan tombol Add Custom Body di dalam template halaman checkout. Setelah Anda melakukan ini, menu akan menampilkan opsi untuk Tempel. Klik Tempel untuk menyalin Badan Kustom dari template halaman keranjang ke template halaman checkout.

Sekarang, Anda akan melihat bahwa template keranjang dan halaman pembayaran memiliki badan khusus. Ini akan membantu kami menghemat waktu dalam proses desain web kami. Terima kasih, Divi Untuk menyimpan perubahan kami di dalam template pembayaran, kami akan mengklik tombol hijau Simpan Perubahan di bagian atas pembuat.

Perbarui Templat Halaman Checkout

Sekarang kita telah memangkas beberapa waktu dari proses desain kita, mari kita lakukan pengeditan terakhir pada halaman checkout untuk memastikannya bekerja dengan baik dengan sisa proyek kita. Pertama, klik ikon pensil untuk mengedit Badan Kustom template halaman pembayaran.

Ikon Checkout Gaya

Mari kita mulai menata ikon checkout kita. Klik ikon roda gigi yang akan membuka Pengaturan Modul dari ikon checkout.

Pindah ke tab Desain dari modul Pengaturan Modul. Klik pada judul Gambar & Ikon . Kami akan mengedit warna ikon. Dengan demikian, klik ikon pipet dan masukkan kode hex #f6c6c5 . Ini akan menjadikan ikon warna pink yang kita gunakan untuk menunjukkan halaman saat ini.

Perbarui Ikon Keranjang

Kami harus kembali dan memperbarui warna ikon dari ikon gerobak. Untuk melakukan ini, kita akan kembali ke pengaturan modul modul. Selanjutnya, kita klik ikon roda gigi dari ikon gerobak .

Sekali lagi, kami akan pindah ke tab Desain dari pengaturan modul. Selanjutnya, di bawah judul Gambar & Ikon, klik alat pipet . Selanjutnya, tambahkan kode hex #eac989.

Ingatlah untuk menyimpan pengaturan Anda dan semua kerja keras Anda setelah Anda keluar dari Divi Builder.

Menyatukan Semuanya

Meskipun kami telah memfokuskan tutorial ini untuk membuat timeline keranjang, ada modul WooCommerce lain yang digunakan untuk melengkapi template. Untuk tutorial ini, kami menggunakan Paket Tata Letak Divi Toy Store GRATIS sebagai inspirasi penataan. Berikut adalah modul WooCommerce lainnya yang perlu Anda tambahkan ke setiap halaman template untuk melengkapi toko Anda.

Templat Halaman Keranjang

• Produk Woo Cart: Ini akan menampilkan keranjang WooCommerce
• Woo Cart Totals: Pamerkan subtotal, pajak, dan lainnya dengan modul ini

Templat Halaman Pembayaran

• Modul Woo Notice: Kami menggunakan modul ini untuk menampilkan kesalahan, informasi, atau pemberitahuan apa pun yang terkait dengan check out
• Woo Checkout Billing: Modul ini akan mewarnai detail billing pelanggan Anda
• Detail Checkout Woo: Tidak seperti total keranjang, modul ini akan menampilkan nama produk aktual, jumlah, dan lainnya
• Woo Checkout Billing: Untuk menampilkan metode pembayaran yang tersedia, kami telah menambahkan modul ini ke halaman checkout

Kesimpulannya

Memiliki garis waktu keranjang menambahkan representasi visual dari proses yang dilakukan pelanggan Anda di toko Anda. Dengan Divi, Anda memiliki kemampuan untuk menyesuaikan dan membuat karya tambahan ke toko WooCommerce Anda. Divi memberi Anda alat untuk dapat membawa apa yang telah Anda pelajari di sini ke klien Anda sendiri dan situs web pribadi. Saya ingin mendengar dari Anda jika Anda menggunakan tutorial ini di alam bebas!