Cara Membuat Situs Web eCommerce Profesional dengan WordPress (Panduan Video Langkah-demi-Langkah)

Penawaran WordPress


Membuat toko eCommerce online Anda sendiri dapat sangat menguntungkan – dan jika Anda telah memutuskan untuk menggunakan WordPress untuk melakukannya *, dilakukan dengan baik: Anda telah memilih platform yang sangat baik!

Tetapi bagaimana cara terbaik untuk memulai? Di mana Anda mulai? Di mana dan bagaimana Anda membeli nama domain dan hosting? Tema mana yang harus Anda pilih? Plugin mana yang harus Anda gunakan? Dll, dll!

Untuk membantu, kami telah mengumpulkan a panduan langkah demi langkah yang sangat serius tentang semua yang perlu Anda ketahui (dan lakukan) untuk membuat toko eCommerce online profesional Anda yang berfungsi penuh secara profesional – menggunakan WooCommerce (sejauh ini dan jauh yang paling populer – dan terbaik sepanjang waktu – plugin eCommerce untuk WordPress).

Apa yang membuat video ini begitu istimewa pada dasarnya adalah tiga hal: 1. bahwa inilah tepatnya cara kita sendiri menciptakan toko online sendiri; 2. tingkat detail yang kami masuki (videonya lebih dari dua jam lamanya!) – catatan: dalam video kami membuat seluruh contoh situs web eCommerce – dari awal; dan 3. bahwa video ini ditujukan untuk pemula lengkap – orang-orang yang sangat mungkin belum melakukan hal seperti ini sebelumnya.

Dengan hanya mengikuti, dengan mengklik di mana kita mengklik, dan dengan sedikit pemikiran untuk mengubah beberapa aspek agar sesuai dengan tujuan khusus Anda sendiri, Anda akan dapat membuat toko online yang sama hebat (dan secara teknis luar biasa) – dari awal hingga selesai – untuk diri sendiri!

Cara Membuat Situs Web eCommerce Profesional dengan WordPress:

Tautan langsung untuk menonton video di Vimeo.

– (catatan: kredit video untuk Topher DeRosia – pencipta HeroPress

Transkrip Video:

Dalam video ini saya akan menunjukkan kepada Anda bagaimana mengatur situs web e-commerce profesional menggunakan WordPress online tanpa langkah-langkah yang dilewati. Saya akan menunjukkan kepada Anda cara menyiapkan hosting aman sehingga orang dapat mempercayai pembelian dari situs Anda. Kami akan menyiapkan WooCommerce, sehingga Anda memiliki kekuatan untuk menjual apa pun. Kami akan memasang tema hebat yang tampak hebat dan dapat diperpanjang sehingga jika suatu hari Anda ingin memperluas dan melakukan sesuatu yang benar-benar gila, Anda bisa. Kami akan menghubungkannya ke Jetpack sehingga Anda dapat menghilangkan beberapa sakit kepala pajak dan pengiriman. Saya akan menunjukkan kepada Anda cara mengatur Stripe, sehingga Anda dapat memproses kartu kredit dan mendapatkan uang ke bank Anda dengan cepat dan mudah. Kami akan melihat pemasaran email, optimisasi mesin pencari, serta analitik, sehingga Anda tahu bagaimana orang menggunakan toko Anda. Ketika kita selesai, kita akan memiliki toko yang sangat mirip dengan ini, dengan gambar besar dan indah untuk kategori, produk unggulan, produk terbaru, produk penjualan, buku terlaris. Selain produk penjualan, kami akan membahas kode kupon. Orang akan dapat melihat produk mereka yang baru dilihat. Mereka akan dapat membeli melalui Stripe atau PayPal dan di halaman belanja Anda, mereka akan memiliki banyak opsi untuk menyortir untuk membantu menemukan apa yang mereka inginkan. Mereka akan dapat mengurutkan berdasarkan popularitas, peringkat rata-rata, baru, harga dan kemudian setelah mereka mempersempitnya, mereka bahkan akan dapat menyaringnya lebih sempit berdasarkan harga dengan widget keren ini. Toko saya menjual peralatan berkemah tetapi toko Anda dapat menjual apa pun yang Anda inginkan. Jadi ikutilah dengan saya dan ketika Anda selesai Anda akan dapat menjual produk Anda secara online. Hal pertama yang akan kami lakukan adalah menyiapkan hosting web kami dan kami akan menggunakan SiteGround tetapi sebelum kita terlalu banyak membahasnya, saya ingin menunjukkan kepada Anda tautan khusus ini di sini. Ini adalah tautan afiliasi dan melakukan dua hal. Ketika Anda pergi ke sana ia menawarkan Anda kesepakatan khusus, Anda mendapatkan persentase dari hosting tetapi juga sejumlah kecil kembali ke WinningWP untuk membantu mendanai video seperti ini, sehingga mereka dapat tetap gratis. Jadi ketika Anda memulai pastikan untuk mengklik tautan di bawah video untuk mendapatkan penawaran khusus ini. Halaman yang kami lihat di sini adalah hosting WooCommerce khusus di SiteGround. Ini sangat mirip dengan hosting WordPress mereka tetapi memiliki beberapa fitur WooCommerce tambahan yang ditambahkan. Misalnya ia datang dengan WooCommerce pra-instal dan tema. Berikut adalah opsi kami untuk hosting. StartUp adalah $. sebulan, GrowBig adalah $., dan GoGeek adalah $ .. Kami akan pergi dengan GoGeek karena kami berharap untuk jumlah lalu lintas yang tinggi ke toko WooCommerce kami. Ini juga sesuai PCI, yang merupakan fitur hukum yang bisa sangat, sangat berguna. Jadi mari kita pergi dan mendaftar. Saya akan mengklik memulai dan sekarang kami akan membuat akun SiteGround kami. Saya akan mengedit mengisi bagian atas formulir ini dengan informasi kartu kredit saya dan hal-hal seperti itu. Anda dapat melakukannya sendiri tetapi saya akan kembali kepada Anda ketika kami sampai di bagian ini tentang informasi paket. Jadi sekarang saya sudah mengisi informasi kartu kredit saya dan kami akan melihat informasi paket kami. Kami memilih GoGeek dan jika Anda mau, Anda bisa mengklik di sini dan mengubahnya, tetapi kami akan membiarkannya di sana, dan kami akan memilih pusat data. Chicago cukup dekat dengan rumah saya, jadi saya akan meninggalkannya di sana tetapi Anda dapat memilih berbagai opsi. Kami akan memilih bulan sekaligus, meskipun Anda dapat melakukan uji coba atau atau. Harga hosting adalah $. sebulan, harga reguler adalah $. tetapi untuk saat ini saya akan ditagih $ .. Kami harus menyetujui Ketentuan Layanan SiteGround dan kami dapat memilih untuk menerima berita SiteGround dan penawaran khusus melalui email. Saya sebenarnya sudah mendapatkannya jadi saya akan hapus centang dan kita klik bayar sekarang. Dan akun kami berhasil dibuat, jadi kami akan melanjutkan ke area pelanggan. Sekarang kami telah membuat akun SiteGround kami, kami akan masuk dan mengatur nama domain kami. SiteGround akan mengirimi Anda kredensial WordPress Anda, jadi lihatlah di sana. Sekarang hal pertama yang ingin dilakukan adalah mengkonfigurasi nama domain kami dan opsi kami adalah sudah memiliki domain atau mendaftarkan yang baru, atau memutuskan nanti. Secara opsional, kita juga bisa mengklik di sini dan memilih untuk kembali ke kotak ini. Jika Anda sudah memiliki domain yang dihosting di tempat lain, SiteGround memiliki beberapa dokumentasi yang bagus tentang cara mengarahkannya di sini. Itu ada di basis pengetahuan mereka dan ada instruksi khusus baik tentang cara menunjukkan nama domain Anda di SiteGround atau bagaimana sebenarnya memindahkan nama domain Anda ke SiteGround, bisa berfungsi dengan baik. Tetapi untuk saat ini kami akan membuat yang baru, jadi saya akan klik daftarkan nama domain baru dan itu akan disebut mywpstore.com. Dan dikatakan tersedia dan $. per tahun dan kami memiliki beberapa opsi di sini. Kami juga dapat melindungi informasi pribadi kami dengan Privasi Domain dan saya sangat menyarankan Anda melakukan ini, jika tidak, spammer akan dapat mengambil informasi Anda selamanya. Jadi mari kita lakukan itu dan kemudian kita dapat memilih untuk mendeteksi malware situs web dengan Pemindai Situs SG. Ini dapat ditambahkan nanti dan kami akan melihat berbagai opsi, jadi saya tidak akan memilih yang sekarang. Jadi kami akan mengklik konfirmasi dan sekarang kami perlu membayar $., Dan mereka ingat kartu kredit saya sejak saya mendaftar. Kemudian kami mengkonfirmasi bahwa kami telah membaca dan menyetujui Ketentuan Layanan dan Kebijakan Privasi SiteGround. Saya akan meninggalkan itu sebagai latihan untuk Anda dan kami akan mengklik bayar dan menyelesaikan pengaturan. Dan sekarang akun hosting kami siap digunakan. Kami akan melanjutkan ke area pelanggan. Sekarang setelah kami membuat nama domain kami, saya ingin menunjukkan kepada Anda beberapa hal dan kemudian kami akan menginstal SSL. Saat ini saya akan mengklik Akun Saya dan saya ingin menunjukkan kepada Anda bahwa mereka telah menginstal WordPress untuk kami di mywpstore.com. Jadi jika saya pergi ke sana, Anda bisa melihatnya. Tidak hanya itu, mereka telah menginstal WooCommerce untuk kami dan tema yang kami lihat disebut Storefront. Ini adalah tema yang sangat umum, yang dimaksudkan untuk memiliki desain yang diterapkan padanya. Kami sebenarnya tidak akan menggunakan tema ini, tetapi tema ini bagus untuk dipasang pada awalnya. Tapi sekarang, kami ingin menjadikan ini nama domain yang aman dan menggunakan HTTPS dan memiliki kunci hijau kecil, dan semua itu. Jadi kita akan menginstal SSL dan inilah cara melakukannya. Kami pergi ke cPanel dan kami selalu ingin mengakses dengan aman, jadi mari kita lanjutkan ke sana, dan sekarang ada dua jenis sertifikat SSL yang bisa Anda dapatkan. Sertifikat SSL Anda adalah hal yang sebenarnya memberi tahu browser dan server bahwa ini aman dan memungkinkan enkripsi. Anda dapat membayarnya atau Anda dapat menggunakan sertifikat gratis dari Let’s Encrypt. SiteGround menawarkan sertifikat gratis sehingga kami akan menggunakannya. Di sebelah sini di sebelah kiri ada pencarian untuk cPanel dan kita bisa mengetikkan biarkan dan filter langsung turun ke Biarkan Enkripsi. Jadi kami akan mengisi formulir ini dan itu akan membuat dan menginstal sertifikat SSL untuk kami dan kemudian kami akan diamankan. Sekarang Anda ingat sebelumnya ketika kami mengatakan kami ingin mengakses panel ini dengan aman, mereka menciptakan satu untuk kami hanya untuk itu, tetapi itu bukan yang kami inginkan untuk situs web kami. Kami akan memilih mywpstore dan kami benar-benar menginginkan Wildcard SSL. Kami tidak akan menggunakannya sekarang tetapi memungkinkan untuk fleksibilitas di masa depan dan jadi saya sarankan untuk menyalakannya. Dan sekarang kita klik install. Dan sekarang sudah terpasang, begitu saja. Jadi sekarang kita harus dapat kembali ke situs kita dan memasukkan https: // dan kita mendapatkan kunci hijau. Jika kita klik itu, konon koneksinya aman. Jadi sekarang semua lalu lintas situs kami dienkripsi. Selanjutnya kita akan melihat pengaturan email untuk nama domain kita. Hal berikutnya yang akan kita lakukan adalah mengatur email untuk nama domain baru kita, tetapi sebelum kita melakukannya kita perlu melakukan beberapa pembersihan. Ketika kami membeli nama domain kami, kami dikirimi email ke alamat yang kami gunakan ketika kami menyiapkan akun SiteGround kami, dan itu digunakan untuk memverifikasi bahwa alamat email ini asli. Mari kita lihat email itu dengan cepat. Jadi, inilah email kami. Pelanggan yang terhormat, baru-baru ini Anda mendaftar, mentransfer, atau mengubah informasi kontak untuk satu atau beberapa domain Anda, mywpstore.com. Untuk menjaga nama domain Anda aktif, ICANN mengharuskan Anda memverifikasi informasi kontak baru Anda. Klik tautan di bawah dan ikuti instruksi yang diberikan. Jadi mari kita lakukan itu. Jadi ini penting. Jika kami tidak melakukan langkah ini, nama domain akan ditangguhkan. Yang mereka ingin kami konfirmasikan adalah nama depan, nama belakang, dan email, dan saya mengklik Verifikasi Informasi, dan sekarang sudah selesai, dan kami dapat menutup tab ini. Namun, ada satu lagi email yang saya dapatkan. Sekarang dikatakan sebagai bagian dari upaya privasi dan keamanan data kami yang berkelanjutan, kami meminta Anda untuk mengatur data Anda menggunakan preferensi persetujuan. Jadi mari kita klik di sini dan lakukan itu. Sekarang Tucows adalah kontraktor yang digunakan SiteGround untuk mendaftarkan nama domain. Jadi SG Hosting Inc. telah memilih Tucows untuk memberi Anda nama domain dan layanan terkait. Tucows Inc. diharuskan oleh hukum untuk meminta persetujuan Anda untuk memproses beberapa bagian data yang ditunjukkan di bawah ini, sehingga persetujuan tersebut berlaku untuk orang ini, yang kebetulan adalah saya dan dikatakan dengan persetujuan Anda Tucows Inc. akan membagikan data berikut dengan penyedia layanan registri, sistem Whois yang terjaga keamanannya, dan penyedia data escrow kami. Untuk informasi lebih lanjut, kunjungi halaman informasi penggunaan data kami. Sekarang proses ini relatif baru dan berkaitan dengan beberapa undang-undang baru yang ditetapkan di Eropa. Ini adalah hal-hal yang selalu dilakukan pendaftar nama domain, hanya saja sekarang mereka membutuhkan persetujuan. Jadi saya akan menyetujui semua hal di atas dan saya akan menyimpan pengaturan persetujuan saya. Sekarang dikatakan Anda dapat memperbarui pilihan persetujuan Anda kapan saja dengan kembali ke halaman ini. Jadi cukup simpan email yang Anda dapatkan dan Anda dapat kembali ke sini kapan saja. Dan sekarang, siapkan email untuk nama domain baru kami. Kami dapat mengetikkan email di sini di panel pencarian dan ada berbagai opsi di sini. Saya akan mengklik Akun Email dan di sini kita dapat membuat alamat email, sesuatu @ mywpstore. Kami akan membuat [email protected] dan saya akan membuat kata sandi, dan kami perlu menetapkan kuota kotak surat. Anda akan perhatikan di sini bahwa tidak terbatas tidak diperbolehkan. Maksnya adalah megabyte, itu banyak ruang. Saya akan mengatur tambang ke megabyte dan Buat Akun. Sekarang alamat email itu ada tetapi bagaimana cara memeriksanya? Mari ku tunjukkan. Kami akan kembali ke Beranda cPanel dan di sini kami akan mengetik lagi dan di sini adalah opsi untuk Webmail. Sekarang jika Anda sudah nyaman mengatur email di klien email Anda sendiri, yang bisa jadi Thunderbird, atau Apple Mail, atau Outlook, atau apa pun, Anda dipersilakan untuk melakukannya. Ini akan bekerja dengan baik. Untuk tujuan kami, kami hanya akan menggunakan Webmail yang disediakan. Kami dapat mengubah konfigurasi email kami kapan saja dan kami dapat memilih salah satu dari ketiga klien email ini. SquirrelMail adalah yang paling sederhana, Roundcube sangat mirip klien email nyata di desktop Anda, dan Horde sangat kuat. Saya akan memilih SquirrelMail. Jika Anda ingin mengatur sendiri ada petunjuk di sini untuk banyak klien email yang berbeda. Saya mengklik, Tetapkan sebagai Default untuk SquirrelMail dan kemudian saya akan mengklik SquirrelMail. Sekarang kami masuk ke Webmail kami, kecuali alamatnya salah. Itu login kami ke akun administrator SiteGround kami dan kami tidak menginginkannya. Jadi mari kita klik Logout di sini di kanan atas dan sekarang kita dapat memasukkan alamat email baru kita, dan kata sandi yang kita berikan. Dan sekarang kami sedang menyiapkan konfigurasi untuk alamat email ini. Jadi kita akan menetapkan ini sebagai default dan klik SquirrelMail dan itu dia. Sekarang ini adalah halaman pengaturan untuk SquirrelMail dan ia menginginkan beberapa hal seperti informasi kami. Ada Topher dan kami dapat menandatangani, kami dapat memilih zona waktu dan kemudian ketika kami selesai, kami menekan kirim. Di sebelah kiri kami adalah kotak masuk kami. Inilah tautan penulisan. Mari kita buat email ke alamat baru dan kirim, dan sudah ada di sini. Jadi sekarang kami memiliki email yang berfungsi untuk nama domain baru kami, dan saya akan merekomendasikan Anda menggunakan ini dengan toko Anda. Itu memungkinkan konsistensi merek antara toko dan email yang dengannya Anda dapat berkomunikasi dengan pelanggan Anda. Sekarang Anda tidak perlu melalui cPanel untuk sampai ke klien email ini. Anda dapat mem-bookmark halaman ini dan kembali kapan saja. Selanjutnya kita akan menginstal tema kita, tetapi sebelum kita sampai ke sana, saya ingin memandu Anda mengatur pengguna baru untuk toko Anda. Secara default SiteGround menggunakan nama pengguna dan kata sandi SiteGround Anda untuk nama pengguna dan kata sandi WordPress Anda, dan kami harus memisahkannya sehingga jika seseorang mengetahui satu, mereka tidak dapat secara otomatis masuk ke yang lain. Kami ada di sini di admin SiteGround dan jika kami membuka akun saya, lalu mengklik informasi dan pengaturan, Anda dapat melihat di sini nama pengguna cPanel Anda dan kata sandi adalah apa pun yang Anda gunakan untuk membahas hal ini. Jadi mari masuk ke situs kami dan sekarang kami ingin membuat pengguna baru, dan pengguna ini bisa apa saja yang Anda inginkan. Tetapi Anda harus mencoba menggunakan domain email baru yang kami siapkan. Jadi saya akan pergi ke Pengguna, Tambah Baru, akan menutup jendela ini karena itu tidak terkait dengan menambahkan pengguna dan saya akan membuat nama pengguna dan alamat email. Sekarang saya tidak benar-benar membuat alamat ini. Itu yang saya buat sebelumnya di video. Dan saya akan menetapkan kata sandi saya sendiri. Saya akan memilih untuk tidak mengirim email sendiri dan menjadikan diri saya seorang administrator. Sekarang saya akan beralih pengguna. Jadi saya akan keluar dari ini dan masuk ke yang baru. Dan saya akan menghapus yang dibuat secara otomatis. Kami akan mengaitkan semua konten yang ada dengan pengguna baru. Di sana sekarang kita hanya memiliki satu pengguna. Jadi sekarang mari kita lihat menginstal tema kita. Tema yang akan kita gunakan, berasal dari arraythemes.com dan salah satu hal hebat tentang Array Themes adalah bahwa mereka dirancang dengan cukup baik untuk menjadi cantik di luar kotak dan dikodekan dengan cukup baik sehingga jika di jalan Anda memerlukan pengembang untuk memperluasnya untuk keperluan Anda sendiri, mudah dilakukan. Kami akan menggunakan Terbaru dan secara khusus dibuat untuk bekerja dengan WooCommerce. Ini memiliki tampilan produk Anda yang sangat mudah digunakan, memiliki banyak tata letak untuk blog Anda, dan bekerja dengan sempurna dengan WooCommerce. Jadi, Anda dapat membeli ke klub mereka dengan $ dan mendapatkan akses ke semua tema mereka atau hanya membeli Terbaru dengan $. Kami akan melakukan itu. Sekarang saya akan mengisi informasi nama dan kartu kredit saya, dan klik pembelian. Dan sepertinya mereka menawarkan kami% diskon, jadi mari kita ambil. Sekarang saya telah mengisi informasi kartu kredit tetapi saya belum mengklik kirim. Saya akan memilih untuk tidak mendapatkan diskon dan berita Tema di kotak masuk saya, tetapi sekarang saya akan mengklik Beli. Dan sekarang kami sudah melakukan transaksi kami. Di sini di bagian atas, ada tautan ke hal-hal lain yang mungkin menarik bagi Anda. Ada Tema Documents, Dukungan Tema, dan Dasbor. Mari kita ke bawah di sini dan klik untuk mengunduh. Dan sekarang kami sudah mengunduh file kami. Untuk menginstal kita pergi ke Penampilan, Tema, dan di atas klik Tambah Baru, lalu kita akan klik Unggah Tema dan kemudian pilih file yang baru saja kita unduh. Kami klik Instal Sekarang dan kemudian Aktifkan. Setelah diaktifkan, kami mendapatkan layar ini yang akan membantu kami memulai. Ada tautan di sebelah kiri yang disebut Getting Started yang membawa kita kembali ke halaman ini. Kami akan klik memulai dan ada beberapa hal di sini yang akan kami lakukan dan beberapa yang tidak akan kami lakukan sampai nanti. Dikatakan kami sangat menyarankan Anda menambahkan dan mengaktifkan kunci lisensi tema Anda di halaman Memulai. Ini memberikan pembaruan Tema yang mulus, dan sebagainya. Kita bisa mendapatkannya dari Dashboard kami, yang Anda lihat beberapa saat yang lalu, tetapi jika kita klik di sini kita bisa langsung ke Halaman Lisensi dan di sana di sebelah kanan, klik Lisensi, dan inilah kunci lisensi kami. Kami akan menyalinnya dan di sini masukkan kunci lisensi kami, dan kami mulai. Sekarang kita akan mendapatkan pembaruan setiap kali dirilis. Jika kita kembali ke Memulai dan gulir ke bawah sedikit, Anda akan melihat bahwa ada beberapa Data Demo Tema. Sekarang sebagian dari ini adalah pengaturan pra-konfigurasi untuk situs dan kami akan menggunakannya, tetapi beberapa di antaranya adalah data yang tidak akan kami gunakan, contohnya produk dan hal-hal seperti itu. Kami akan menginstal beberapa pengaturan penyesuai dan beberapa widget. Ini akan membantu kami memulai dengan situs kami. Ada juga beberapa plug-in yang direkomendasikan yang akan kami pasang. Setelah kami mendapatkan pengaturan penyesuai, dan widget, dan plug-in yang disarankan semuanya terpasang maka kita harus siap untuk memulai toko kami. Penyesuai di WordPress adalah tempat Anda dapat mengatur banyak pengaturan umum untuk situs Anda, serta beberapa pengaturan khusus untuk hal-hal seperti WooCommerce. Sekarang tema baru kami, yang disebut Terbaru, memiliki beberapa pengaturan penyesuai spesifik yang sangat membantu dan alih-alih membuat kami melaluinya dan mengatur semuanya sendiri, mereka menyediakan file impor. Sekarang sebelum kita dapat menggunakannya kita perlu menginstal plug-in Customizer Impor / Ekspor jadi mari kita pergi ke plug-in, Add New, dan kami akan mencari di sini. Dan ini dia, Customizer Ekspor / Impor. Kami klik Instal Sekarang dan Aktifkan. Kami akan menangani pemberitahuan ini hanya dalam beberapa menit, tetapi untuk saat ini kami juga perlu mengunduh file impor penyesuai, dan ini disebut custom-customizer-export.txt terbaru. Dan ketika Anda selesai mengunduh Anda dapat mengklik X kecil ini di sini di kanan atas. Jadi sekarang kita masuk ke Appearance, Customize, Export / Import. Jadi di sini Penampilan, Kustomisasi, Ekspor / Impor. Kami akan memilih dan kami juga akan memilih untuk mengunduh dan mengimpor file gambar. Saya tidak yakin apakah ada tetapi jika ada yang kita inginkan, dan sekarang kita klik Impor. Di sana sekarang kami memiliki sejumlah pengaturan pra-konfigurasi yang disiapkan untuk kami, tetapi sekarang setelah itu selesai kami juga ingin menginstal beberapa widget dan untuk ini kami memerlukan eksportir yang berbeda. Jadi, mari salin nama plug-in ini dan kembali ke Plug-in, Add New, dan kami akan mencarinya, dan itu dia. Kami klik Instal Sekarang dan kemudian Aktifkan. Kemudian instruksi mengatakan untuk mengunduh file impor widget di sini. Ayo lakukan itu. Terbaru-widget-export.wie dan kami menutup jendela unduhan ini, dan kemudian mengatakan untuk pergi ke Alat, Pengimpor Widget & Eksportir. Buka Alat, Pengimpor Widget & Eksportir dan kami akan memilih file kami, dan mengimpor widget. Sekarang memberi kami sejumlah hasil. Ada beberapa widget yang tidak masuk, namun semua sisanya dan yang penting. Jadi sekarang kita akan kembali ke halaman ini dan Anda akan melihat bahwa ada beberapa plug-in yang direkomendasikan. Mari kita instal itu. Sekarang plug-in yang direkomendasikan pertama disebut Array Toolkit dan ini disediakan oleh Tim Pembuatan Tema. Jadi kita akan pergi ke Plug-in, Add New, dan mencarinya, dan itu dia. Kami akan mengklik Instal Sekarang dan Aktifkan, dan kami tidak perlu melakukan apa pun dengan itu sekarang. Kami baru saja menginstalnya. Kami juga akan menggunakan MailChimp nanti di video ini, jadi mari kita pasang MailChimp untuk WordPress. Instal Sekarang dan Aktifkan. Berikutnya adalah Shortcodes Ultimate. Ini menyediakan banyak kode pendek untuk membuat hal-hal seperti tab, dan tombol, dan kotak, dan sebagainya. Selanjutnya adalah Tiled Gallery Carousel Without Jetpack. Ini membuat beberapa galeri gambar tampak sangat apik. Berikutnya adalah WooCommerce yang sudah diinstal untuk kita oleh SiteGround, jadi kita akan melewati itu, dan kita juga akan melewatkan widget Instagram. Kami tidak akan membahas Instagram di video ini. Namun yang terakhir adalah WPForms, yang merupakan plug-in Bentuk kecil yang apik dengan Tema Array. Instal Sekarang dan Aktifkan, dan kami akan lewati tutorial kecil ini untuk saat ini. Jadi sekarang kita telah menginstal Array Toolkit, MailChimp untuk WordPress, Shortcodes Ultimate, Carousel Gallery Tiled Tanpa Jetpack. Kami sudah memiliki WooCommerce dan kami melewatkan widget Instagram, dan kami mengakhiri dengan WPForms. Seharusnya itu yang kita butuhkan untuk plug-in untuk saat ini. Kami akan melakukan satu hal terakhir sebelum mengkonfigurasi WooCommerce dan itu adalah pengaturan Jetpack. Alasan untuk ini adalah bahwa Jetpack hadir dengan sejumlah fitur, terutama dibuat untuk WooCommerce dan kami ingin memilikinya tersedia saat kami menyiapkan WooCommerce. Sekarang Jetpack adalah kumpulan plug-in. Mereka disediakan oleh WordPress.com dan salah satu hal menarik tentang itu adalah bahwa semua kerja keras dilakukan di server WordPress.com, bukan server Anda. Ketika datang ke WooCommerce secara khusus itu berarti bahwa hal-hal seperti pajak dan pengiriman diketahui dari server Anda dan kemudian informasi dikirim ke server Anda. Ini sangat membantu dalam hal kecepatan dan perhitungan, dan ketika aturan berubah untuk hal-hal seperti pajak, maka Jetpack dapat mengimbangi Anda dan Anda tidak perlu mengawasinya. Jadi mari kita atur Jetpack sekarang. Tepat di dasbor kami, saya mengklik tautan Jetpack, di sini di sebelah kiri, dan saya akan mengklik Pengaturan Jetpack. Sekarang kami membuat akun dengan Jetpack. Kita dapat memilih nama pengguna dan kata sandi. Sekarang jika Anda sudah memiliki akun di WordPress.com, Anda bisa menggunakannya untuk ini. Anda tidak harus membuat yang baru. Kami hanya melakukan itu karena kami belum memilikinya. Kami akan membuat akun kami. Sekarang pada awalnya sepertinya Jetpack akan ingin menagih kami, yang pada dasarnya tidak buruk. Ada beberapa fitur hebat tetapi ada juga model gratis dan kami akan mulai dengan gratis. Ada tombol di sini di bagian bawah, dan sekarang kami terhubung dengan Jetpack. Dan ia ingin kami mengaktifkan semua fitur yang direkomendasikan, tetapi kami belum akan melakukannya. Kami akan mengaktifkannya satu per satu sesuai kebutuhan. Jadi pada saat ini kami tidak akan melakukan apa pun dengan Jetpack. Kami hanya ingin membuatnya terhubung dan diatur, sehingga ketika saatnya tiba untuk menggunakannya, itu tersedia untuk kami. Sekarang saatnya mengatur dan mengkonfigurasi WooCommerce. Kami di sini di dasbor WordPress kami dan Anda akan perhatikan di atas, ada tombol yang mengatakan Jalankan Wisaya Penyetelan. Kami akan melakukan itu. Saya akan mengkliknya dan hal pertama yang ingin diketahui adalah di mana kita berada. Saya di Amerika dan karena saya di Amerika saya ingin menggunakan dolar, dan saya hanya akan menjual produk fisik. Tetapi saya tidak akan menjual produk atau layanan secara langsung, hanya online, jadi saya akan membiarkannya tidak dicentang. Dan kami memiliki opsi untuk membantu WooCommerce meningkatkan dengan pelacakan penggunaan. Sekarang karena saya membangun toko demo dan bukan yang asli, saya akan mematikannya, tetapi saya sarankan Anda membiarkannya untuk toko Anda yang sebenarnya. Ini membantu mereka membangun produk yang lebih baik. Di sini Anda dapat membaca lebih lanjut tentang apa yang mereka kumpulkan. Jadi mari kita klik, Ayo. Sekarang kami memiliki tiga opsi di sini untuk menerima pembayaran. Ada yang lain tersedia tetapi mereka akan diinstal kemudian dan kami akan melakukan Stripe dan PayPal tetapi tidak pembayaran offline. Kami akan memintanya untuk membuat akun Stripe baru untuk kami. Kami memasukkan alamat email kami dan menangani pembuatan akun. Sekarang ini berfungsi karena kami menghubungkan WooCommerce dan Jetpack sebelumnya dan meskipun itu membuat akun Stripe bagi kami, kami masih harus masuk ke dalamnya nanti dan menyiapkan beberapa hal. Sekarang untuk PayPal kami dapat menerima pembayaran tanpa menautkan akun PayPal tetapi kami tidak akan melakukannya. Kami akan menghubungkan akun PayPal kami hanya dalam beberapa saat. Sekarang beberapa plug-in akan dipasang untuk kita. Gateway Strip WooCommerce, Layanan WooCommerce, dan Gateway Checkout WooCommerce PayPal, yang semuanya akan terjadi secara otomatis dan kami tidak perlu melakukan apa pun. Kami cukup klik lanjutkan dan sekarang kami akan mengonfigurasi pengiriman. Dikatakan Anda semua siap untuk mengirim ke mana saja di Amerika Serikat dan di luarnya. Kami menyarankan untuk menggunakan tarif langsung yang didukung oleh plug-in Layanan WooCommerce dan Jetpack untuk mendapatkan harga pengiriman Layanan Pos Amerika Serikat yang akurat untuk menutupi biaya pemenuhan pesanan. Jadi kami akan memilih tarif live, tetapi kami bisa melakukan flat rate atau pengiriman gratis dan saya ingin menunjukkan bahwa ini dapat disempurnakan oleh produk nanti. Jadi Anda dapat memiliki tarif langsung untuk sebagian besar produk Anda tetapi menawarkan pengiriman gratis sebagai diskon pada sesuatu, dan kemudian lokasi tidak tercakup oleh zona Anda yang lain, sekali lagi kami akan membiarkannya dengan tarif langsung. Mereka ingin tahu bagaimana kita mengukur berat dan dimensi, kita akan melakukan beberapa ons dan inci tetapi itu bisa berupa pound, gram, kilogram, dan lain-lain. Kami akan klik lanjutkan dan sekarang kami memiliki dua opsi lagi. Ada Pajak Otomatis. Saya sangat menyarankan Anda menggunakan Pajak Otomatis dengan ini orang-orang baik di Jetpack mencari tahu siapa yang berhutang kepada siapa dan kapan, dan Anda tidak harus melakukannya, yang merupakan hal yang luar biasa karena pajak adalah sakit kepala online. Kami juga memiliki opsi di sini untuk bergabung dengan MailChimp. Saya juga merekomendasikan ini, memiliki pelanggan Anda di daftar email sehingga Anda dapat mengirim mereka email dan menunjukkan kepada mereka produk baru atau mengingatkan mereka untuk penarikan kembali atau hal-hal seperti itu, sangat berguna. Jadi kami akan membiarkan keduanya tetap aktif dan dikatakan plug-in berikut akan diinstal dan diaktifkan untuk Anda, MailChimp untuk WooCommerce. Sekarang ia ingin kunci API MailChimp kami dan kami bisa mencapainya dengan masuk ke MailChimp, dan pergi ke pengaturan akun, Ekstra dan kunci API. Sekarang MailChimp adalah layanan daftar email. Mereka memungkinkan Anda untuk membuat daftar alamat email dan kemudian mengirim pesan ke berbagai himpunan bagian dari daftar itu. Dalam hal ini ia akan menambahkan bidang tambahan ke formulir checkout kami yang mengatakan, apakah Anda ingin mendaftar untuk informasi tentang produk ini atau produk lain, dan lain-lain? Jadi mari kita pergi ke MailChimp dan di sini dikatakan kita dapat mendaftar secara gratis. Kami akan menggunakan alamat email baru kami dan kami akan mengklik Memulai. Jadi mari kita periksa email kami. Jadi kita akan pergi ke Webmail kami dan Anda akan melihat bahwa kami memiliki dua pesan email. Yang ini dari WordPress.com dan terkait dengan pendaftaran Jetpack kami. Sekarang kita dapat melihat ini sebagai HTML dan itu akan bekerja jauh lebih baik. Jadi mari kita klik Konfirmasi Sekarang untuk akun WordPress.com kami, dan sekarang selesai. Jadi saya akan menghapus pesan ini dan kemudian kita akan melihat mengaktifkan akun MailChimp kami. Kami dapat mengklik di sini dan untuk membuktikan bahwa kami bukan robot, saya akan mengklik ini. Tapi mungkin aku robot yang sangat pintar. Jadi sekarang mari kita mengatur akun MailChimp kami. Anda memberi tahu sedikit tentang toko kami dan di mana itu, dan kami akan melanjutkan. Apakah bisnis Anda menjual sesuatu secara online? Jika Anda menjual secara online, kami akan membantu Anda agar toko Anda terintegrasi dengan akun Anda sehingga Anda dapat mengirim email yang ditargetkan ke pelanggan e-commerce, melacak ROI, dan banyak lagi. Kami akan mengklik Ya dan dikatakan mereka memiliki integrasi untuk lima platform ini, dan banyak lagi, dan di sana ada WooCommerce. Yang kami gunakan. Dan kami dapat membagikan kampanye kami dengan pengikut dan membuat pos sosial. Ini mungkin ide yang bagus untuk toko nyata. Saya tidak akan melakukannya di video ini, tetapi Anda bisa melakukannya dengan mengikuti petunjuk ini. Dan terakhir mereka ingin tahu apakah kami ingin berlangganan buletin mereka. Saya akan mengatakan tidak untuk saat ini. Kami akan mengklik Ayo Pergi. Sekarang jika kita kembali ke blog kita dikatakan ingin pergi ke pengaturan akun, Ekstra, kunci API, jadi mari kita lakukan itu. Ada Akun, Ekstra, Kunci API. Dikatakan kami tidak punya apa-apa sekarang, jadi kami harus membuatnya. Jadi kami akan membuat kunci dan hanya itu. Yang harus kita lakukan adalah mengklik tombol itu. Jadi kami menyalin kunci API ini dan menempelkannya di sini, dan sekarang MailChimp ingin tahu lebih banyak tentang toko kami. Lokal kami adalah bahasa Inggris, kami menggunakan Dolar AS, dan kami berada di zona waktu Timur. Jadi sekarang saya akan menyimpan semua perubahan dan sekarang ketika kami mengirim email, ia ingin mengetahui beberapa informasi. Dari siapa ini? Saya hanya akan memasukkan nama saya, saya akan memasukkan alamat email baru kami, subjek default, bahasa default adalah bahasa Inggris, dan pesan pengingat izin yang mengatakan Anda berlangganan buletin dari myWPstore dan menyimpan semua perubahan. Sekarang kami ingin menyinkronkan toko kami dengan daftar dan itu akan menjadi yang ini. Selama sinkronisasi awal otomatis berlangganan pelanggan yang ada. Saat ini kami tidak memiliki sehingga itu bekerja dengan baik. Kami memiliki Pengaturan Keikutsertaan kami, yang harus Anda baca dengan cermat karena apa yang Anda perlukan berbeda-beda di tempat Anda berada, Pengaturan Kotak Centang, untuk mengubah lokasi kotak centang keikutsertaan di checkout masukan salah satu tindakan formulir WooCommerce yang tersedia. Kami akan meninggalkannya di sini di formulir penagihan. Dan kemudian ingin tahu apa ukuran gambar untuk produk yang akan dimasukkan dalam email. Kami akan pergi dan saya akan menyimpan semua perubahan. Itu dia. Sekarang MailChimp dan WooCommerce saling berkomunikasi. MailChimp tahu tentang produk Anda dan WooCommerce tahu tentang pembaca email Anda. Kami akan meninggalkan ini sendirian untuk saat ini dan kami akan kembali ke sana ketika kami mulai melalui proses checkout. Sebelum kita sampai ke pengaturan Stripe, saya ingin menunjukkan di sini di atas bahwa ada peringatan tentang menempatkan kunci API MailChimp kami ke halaman pengaturan yang benar. Sekarang Anda mungkin ingat bahwa kami telah memasukkan kunci kami ke dalam satu halaman pengaturan. Plug-in itu untuk menghubungkan WooCommerce dan MailChimp. Yang ini menghubungkan WordPress dan MailChimp. Jadi mari kita lanjutkan dan masukkan kunci kita di sana. Dan seperti itulah sekarang WordPress tahu tentang daftar kami. Kami akan membahas MailChimp lebih dalam lagi dalam beberapa menit, tetapi untuk sekarang, mari kita lihat Stripe. Stripe adalah prosesor kartu kredit. Sekarang kami meminta WooCommerce untuk membuatkan kami akun dengan Stripe untuk kami. Jadi ayo buka email kami dan di sini adalah email dari Stripe, pembayaran Layanan WooCommerce, klaim akun Stripe Anda, dan dikatakan Stripe membuatnya mudah untuk menerima pembayaran online. Layanan WooCommerce baru saja membuat akun Stripe untuk Anda, silakan klik tautan di bawah untuk memastikan bahwa pembayaran Anda tiba di rekening bank Anda tanpa penundaan. Jadi mari klik, Klaim akun Stripe Anda. Kami perlu membuat kata sandi dan sekarang akun Stripe kami disimpan dan kami dapat melihat dasbor. Sekarang cara Stripe bekerja adalah seseorang mengunjungi situs web Anda, memilih suatu produk, dan mengisi formulir pembelian, dan ketika mereka mengklik Kirim, ia mengirimkan informasi kartu kredit Anda ke Stripe di mana ia diproses dan uang dikumpulkan. Kemudian Stripe memegangnya untuk waktu yang singkat, biasanya hanya satu hari, dan kemudian secara berkala mengirimkan semua uang yang mereka kumpulkan langsung ke rekening bank Anda. Jadi Anda benar-benar tidak perlu melakukan banyak hal sama sekali. Sekarang sesuatu yang WooCommerce butuhkan adalah kunci API. Jadi sekarang kita dapat melihat bahwa Stripe diaktifkan dan ini adalah bagaimana Stripe disebut di ujung depan situs web Anda, dan Anda dapat melihat bahwa kami memiliki Kunci yang Dapat Diterbitkan Langsung dan Kunci Rahasia Langsung, tetapi jika kami mengaktifkan mode uji, tidak ada kunci. Jadi kita harus mendapatkan kunci tes. Saat ini kami sedang melihat data uji. Anda dapat melihatnya di sini. Untuk mengakses data langsung, kami perlu mengaktifkan akun Anda. Kami tidak akan melakukannya di video ini. Anda akan mengklik di sini dan itu melibatkan memasukkan informasi bank Anda sendiri sehingga Stripes dapat mengirimi Anda uang. Untuk saat ini kami hanya akan menggunakan Stripe dalam mode uji. Jadi untuk mendapatkan kunci API kami, kami akan mengeklik Pengembang dan tautan berikutnya di bawahnya adalah kunci API. Dan Anda akan lihat di sini kami memiliki kunci yang Dapat Diterbitkan dan Rahasia. Sekarang dikatakan tepat di atas ini adalah kunci API pengujian kami, jadi saya akan menyalin kunci yang dapat diterbitkan dan kembali ke WooCommerce dan menempelkannya di sini, dan kemudian saya akan mendapatkan Kunci Rahasia Tes saya dan menempelkannya disini. Sekarang karena ini adalah kunci uji, maka kartu itu sebenarnya tidak dapat digunakan untuk memproses kartu apa pun. Satu opsi lagi yang ingin kita lihat adalah tombol permintaan pembayaran. Jika kita membiarkannya aktif maka Apple Pay menjadi opsi melalui Stripe. Satu lagi opsi adalah apakah akan mengizinkan kartu yang disimpan atau tidak. Saya akan meninggalkan itu untuk saat ini. Jadi kita akan klik Simpan Perubahan dan itu dia. Sekarang Stripe sudah diatur, baik dalam mode hidup dan tes. Sekarang jika saya mencoba memproses sesuatu dalam mode langsung, itu masih tidak akan berhasil karena saya belum menghubungkan Stripe ke bank saya dan saya akan membiarkan itu untuk Anda lakukan. Sama sekali tidak sulit dan Stripe akan dengan senang hati membantu Anda, jika Anda menelepon mereka atau mengirim email kepada mereka. Jadi sekarang Stripe sudah siap. Kami memiliki satu gateway pembayaran lagi yang perlu kami atur sebelum melanjutkan. Jadi saya akan pergi ke WooCommerce dan Pengaturan, dan di tengah atas di sini adalah Pembayaran, dan kami akan menyiapkan PayPal. Anda akan perhatikan ada berbagai macam gateway pembayaran di sini dan ada lebih banyak dari ini sebenarnya. Jika Anda pergi ke WooCommerce.com, Anda dapat melihat mungkin ada ratusan dan ada baiknya melihat melalui mereka untuk melihat apakah ada yang lebih cocok untuk Anda daripada PayPal atau Stripe, tetapi PayPal dan Stripe biasanya mencakup hampir semua hal yang ingin dilakukan siapa pun . Sekarang Anda akan perhatikan di sini bahwa PayPal reguler tidak diaktifkan. Itu karena standar PayPal mengarahkan pelanggan ke PayPal untuk memasukkan informasi pembayaran mereka dan banyak pelanggan yang merasa canggung. PayPal Express memungkinkan orang untuk membayar langsung di situs Anda tanpa harus pergi. Ini sudah diaktifkan dan kami akan klik Kelola, di sebelah sini di sebelah kanan. Judul ini di sini akan terlihat oleh pelanggan sebagai opsi bagi mereka untuk memilih melakukan pembayaran dan kemudian ada uraian ini yang juga akan mereka lihat. Saat ini kami berada di Lingkungan Langsung dan kami akan beralih ke Sandbox, dan sekarang kami memiliki tiga opsi di sini untuk menghubungkan ke PayPal. Kita dapat mengklik tombol biru ini untuk menyiapkan atau menautkan akun PayPal Sandbox yang ada, kita dapat mengklik di sini untuk beralih input kredensial API manual, yang berarti kita akan pergi ke PayPal dan mendapatkan kredensial kita sendiri dan mengetiknya, atau kita dapat mengotentikasi pembayaran dengan Layanan WooCommerce. Ini sebenarnya adalah pilihan termudah dan dilengkapi dengan modul Jetpack yang kami pasang. Jadi kita akan terus maju dan melakukan itu. Dan sekarang bagian ini berubah, yang dibutuhkan hanyalah alamat email kami untuk PayPal, dan hanya itu, itu akan mengurus sisanya. Sekarang ketika orang memilih untuk membayar melalui PayPal, uang akan muncul di akun Anda. Sekarang ada beberapa opsi lain di sini, kita akan melihatnya. Inilah nama merek, ini harus nama toko Anda, atau merek atau hal lain yang penting bagi Anda. Kami akan menambahkan gambar logo kami dan pastikan untuk memasukkan Alt Text, ini sangat membantu pembaca layar, dan kami akan memasukkan gambar yang sama untuk kedua tempat, meskipun dikatakan ada ukuran yang berbeda karena WooCommerce mengubah ukuran itu untuk kita. Dan sekarang ada beberapa hal lain di sini yang bersifat opsional, yang tidak akan kami bahas. Beberapa dari mereka terkait secara khusus dengan bisnis dan akan menjadi pilihan yang perlu Anda buat. Misalnya, Awalan Faktur, jika Anda mulai dari awal tidak apa-apa untuk meninggalkannya di WC- tetapi jika Anda sudah memiliki awalan faktur untuk toko yang ada, Anda ingin mengubahnya di sini. Ada beberapa opsi di sini untuk meminta alamat penagihan atau nomor telepon, selain itu kita juga dapat memanipulasi tampilan tombol. Tombol pintar memungkinkan Anda melakukan hal-hal seperti memilih warna dan bentuk, dan lain-lain. Kami memilih untuk menyembunyikan fakta bahwa PayPal dapat menggunakan kartu kredit karena kami menawarkan Stripe, yang menggunakan kartu kredit. Jadi, sementara ada banyak opsi di halaman ini, kami akan membiarkan semuanya default karena semuanya bekerja dengan sangat baik, tetapi jangan ragu untuk bereksperimen dan melihat apa yang Anda suka. Dan sekarang kita akan klik Simpan Perubahan. Sekarang PayPal sudah siap. Dalam beberapa menit, kami akan bereksperimen dengan benar-benar mengirim beberapa transaksi melalui Kotak Pasir. Sekarang kami memiliki banyak konfigurasi toko yang diatur, kami akan mulai bekerja membuat ujung depan situs web kami terlihat seperti toko yang kami inginkan. Sekarang ujung depan terlihat seperti itu karena ia memiliki banyak, banyak pengaturan standar. Kami mengimpor beberapa widget dan ada beberapa bidang yang memiliki teks default di dalamnya, dan sebagainya. Jadi mari kita mulai. Pertama mari kita buat beranda. Saat ini beranda kami adalah halaman blog dan kami tidak menginginkannya, kami ingin menggunakan halaman yang sebenarnya. Jadi kita akan mulai dengan pergi ke Customize dan kita akan pergi ke Pengaturan Beranda, dan Anda akan melihat di sini, sekarang, beranda kami menampilkan posting terbaru kami. Kami akan beralih ke halaman statis dan kemudian kami harus benar-benar membuat beranda. Jadi kami akan mengklik Tambahkan Halaman Baru dan kami akan menyebutnya Beranda dan klik Tambah. Di sana, sekarang beranda kami adalah halaman yang disebut Beranda. Lalu untuk halaman Posting kami, kami juga perlu membuatnya tetapi kami akan menyebutnya Berita, bukan blog. Dan sekarang kami memiliki halaman berita, jadi mari kita klik Terbitkan, dan tutup penyesuai dan sekarang kami memiliki beranda kami. Tetapi kami masih memiliki bilah sisi di sini dan kami ingin mengubah logo kami. Jadi mari kita kembali ke Kustomisasi dan kita akan pergi ke Opsi Tema, Pengaturan Umum, dan kami ingin satu kolom dan bilah sisi. Dan di sini dikatakan, Lihatlah penjualan musim dingin kami! Berbelanja sekarang. Dan itulah teks ini di sini, jadi mari kita hapus itu dan alih-alih itu akan menampilkan tanggal. Selanjutnya mari kita lakukan logo kita. Kami akan pergi ke Identitas Situs dan Pilih Logo. Sekarang kami sudah mengunggah logo kami ketika kami bekerja dengan PayPal, jadi ada di sini. Dan kami tidak ingin memotong, jadi saya akan mengklik Lewati Pemotongan, dan di sana tertulis myWPstore tetapi kami tidak ingin tajuk berbasis teks ini, atau subtitle, jadi kami akan menghapus centang menampilkannya. Kemudian kita akan klik publish dan tutup customizer, dan alasan saya menutup customizer kali ini adalah sebenarnya membuat logo sedikit lebih besar karena ini adalah tema yang benar-benar responsif, logo semakin kecil karena browser semakin sempit, sehingga masih terlihat bagus bahkan di ponsel. Sekarang langkah-langkah kami berikutnya dalam desain sebenarnya berputar di sekitar produk, konten kami, yang belum kami miliki. Jadi kami tidak dapat membuat nav yang tepat dan kami tidak dapat menempatkan kategori dan produk di beranda di sini. Jadi mari kita lihat memasukkan beberapa produk. Untuk memasukkan produk, kami akan pergi ke dasbor dan kemudian produk, dan kami akan mengklik semua produk, dan karena kami tidak memilikinya, kami mendapat tombol besar untuk membuat yang pertama. Sekarang sebenarnya ada dua jenis produk untuk WooCommerce, sederhana dan variabel. Produk variabel adalah produk apa pun yang meminta Anda opsi. Jadi misalnya bisa ukuran atau warna t-shirt. Sebuah produk sederhana tidak memberi Anda opsi apa pun, Anda cukup membelinya seperti apa adanya. Kami akan mulai dengan produk sederhana. Kami akan menjual kompas. Toko kami akan menjual perlengkapan berkemah. Ini adalah waktu yang tepat untuk membahas pesan kesalahan ini yang telah Anda lihat sepanjang video sejauh ini. Dikatakan tema kami, Terbaru, berisi beberapa salinan usang dari beberapa file templat WooCommerce. Saya menghubungi Tema Array tentang ini dan mereka mengatakan bahwa template khusus ini tidak memengaruhi fungsi atau desain, sehingga kami dapat mengabaikannya dengan aman untuk saat ini. Pada saat Anda menonton video ini, masalahnya mungkin telah teratasi dan Anda bahkan mungkin tidak melihat kesalahan ini. Jadi untuk sekarang saya akan klik Singkirkan. Jadi mari kita masukkan nama produk kita dan kemudian kita dapat memasukkan informasi tentang produk kita. Selanjutnya kita memilih jenis produk kami. Seperti yang saya sebutkan itu adalah produk sederhana. WooCommerce juga dapat menangani produk virtual atau yang dapat diunduh yang akan seperti tiket atau perangkat lunak. Kami tidak akan membahas jenis-jenis itu dalam video ini. Produk kami hanya akan menjadi produk fisik. Selanjutnya kita akan memberi harga. Kami tidak akan melakukan harga jual sekarang. Kami akan membahasnya dalam beberapa menit. Ini adalah produk kena pajak dengan tarif pajak standar yang berlaku. Sekarang jika Anda mau, Anda dapat memasukkan informasi inventaris tetapi ini tidak diperlukan. Saya akan memasukkan SKU. Kami juga dapat memilih untuk mengelola stok. kita dapat mengatakan berapa banyak yang kita miliki dan kita dapat mengizinkan pesanan kembali atau tidak, dan kita dapat memilih secara opsional untuk hanya membeli satu dari ini dalam satu pesanan. Saya tidak akan mengelola stok sekarang. Lalu kami pindah ke pengiriman. Kami mengatakan berapa beratnya dan Anda akan perhatikan bahwa ini dalam ons karena kami mengaturnya dalam pengaturan kami sebelumnya dan kemudian dimensi. Ingatlah bahwa Anda tidak menempatkan dimensi produk seperti kompas, tetapi kemasannya, lalu kami dapat memilih kelas pengiriman. Kami belum menyiapkan kelas pengiriman apa pun. Ini juga tidak wajib. Jika Anda hanya mengirim satu cara, maka Anda tidak perlu kelas. Anda dapat menautkan produk secara opsional, jadi jika kami juga menjual kompas, kami dapat menautkannya tetapi kami tidak melakukannya sekarang. Ada Atribut yang dibuat khusus, jadi kita dapat mengatakan misalnya bahwa itu berlapis nikel atau semacamnya, tetapi kita tidak akan memasukkan atribut apa pun sekarang dan kemudian di bawah Advance, kita dapat memasukkan catatan pembelian dan dikatakan, Masukkan catatan opsional untuk dikirim ke pelanggan setelah pembelian. Ada Urutan Menu, yang memungkinkan Anda untuk menempatkan produk dalam urutan tertentu dan kemudian Anda dapat secara opsional mengaktifkan Ulasan, kami akan membiarkannya. Kami juga memiliki deskripsi singkat produk, yang mirip dengan yang lama tetapi muncul di tempat yang berbeda. Yang panjang muncul di halaman produk tunggal di mana yang pendek muncul di daftar arsip produk. Jadi kami hanya akan mengambil kalimat pertama dari ini dan memasukkannya ke sini. Sekarang mari kita lihat sidebar kami. Kita dapat memilih kategori. Saya akan menambahkan yang baru bernama Aksesoris. Saya tidak akan memilih untuk menggunakan tag sekarang. Kami ingin berbagi tombol dan saya akan memasukkan gambar produk. Dan kami akan memasukkan teks alt, seperti biasa dan memilih set gambar produk. Sekarang kami juga dapat menambahkan gambar galeri produk, jadi jika Anda memiliki lebih dari satu gambar produk ini, Anda dapat memasukkan sebanyak yang Anda butuhkan. Saya hanya punya satu. Jadi saya akan menambahkan ke galeri dan hanya itu. Kami memasukkan judul dan deskripsi panjang. Kami memilih produk sederhana. Kami memasukkan berapa biayanya. Kami tidak memilih untuk membuatnya dijual sekarang. Kami kebanyakan melewatkan inventaris. Kami memasukkan informasi pengiriman. Kami tidak memiliki produk lain untuk ditautkan. Kami tidak memiliki atribut lain dan kami memutuskan untuk membiarkan ulasan diaktifkan. Lalu kami memberikan deskripsi singkat produk. Kami memasukkannya ke dalam kategori, memasukkan gambar unggulan dan kemudian menambahkan gambar ke galeri produk. Jadi mari kita klik Terbitkan dan kami belum melakukan pekerjaan desain pada halaman produk tunggal, tapi mari kita lihat dan lihat seperti apa tampilannya. Jadi karena Tema Array hebat, itu terlihat indah di luar kotak. Kita dapat memperbesar gambar, kita dapat mengklik untuk melihat yang berbeda, kita dapat melihat deskripsi panjang, melihat informasi tambahan, melihat ulasan. Di sebelah sini, di sebelah kanan kita dapat melihat deskripsi singkat kita, kita dapat memilih berapa banyak yang ingin kita beli, kita dapat menambahkan ke keranjang atau menggunakan PayPal Beli Sekarang dan di sini adalah tombol berbagi dan SKU kami, serta kategorinya. Sesuatu yang ingin saya perbaiki pada halaman ini adalah URL. Itu adalah myWPstore.com/?product=brass-compass. Tanda tanya dan tanda sama dengan tidak bagus untuk SEO. Jadi mari kita lihat bagaimana cara memperbaikinya. Kami akan pergi ke Pengaturan, Permalinks, dan kami akan mengubah jenis URL menjadi nama posting. Kami juga memiliki beberapa opsi di sini untuk melihat bagaimana produk toko kami terlihat. Jika kita mau, kita bisa memiliki kata toko di URL atau kita dapat membiarkannya di default, yaitu produk / sampel-produk. Saya lebih suka berbelanja di sana. Anda juga dapat secara opsional memiliki kategori di sini tetapi mari klik Simpan Perubahan, maka kami akan klik Edit produk, dan Anda akan melihat di sini bahwa itu berubah. Jadi jika kita melihatnya lagi, itu adalah / shop / brass-compass yang merupakan URL yang bagus untuk SEO. Selanjutnya mari kita tambahkan produk variabel. Ketika kami mulai membuat produk kami berikutnya, saya ingin menunjukkan kepada Anda hal kecil yang rapi. Di bawah menu Baru di bilah admin WP adalah Produk, serta beberapa hal lain yang terkait dengan WooCommerce. Jadi mari klik Produk Baru. Sekarang produk terakhir kami adalah produk sederhana. Yang ini akan menjadi variabel, yang berarti akan menerima berbagai opsi. Yang ini akan menjadi kaos putih. Untuk perlengkapan berkemah Anda menginginkan kaos berkualitas tinggi antara Anda dan pakaian luar Anda. Kami akan memasukkan deskripsi kami. Sekarang akan menjadi uniseks sehingga tidak akan ada pria dan wanita, dan itu putih sehingga tidak akan ada beberapa warna tetapi akan ada berbagai ukuran. Sekarang kami memiliki deskripsi kami, mari kita pilih Produk Variabel. Kami meninggalkan pajak sesuai standar kena pajak, di bawah Inventaris. Saya akan membuat SKU dan kami akan memilih untuk tidak mengelola stok lagi. Di bawah Pengiriman, kami akan menempatkan ons, enam inci kali empat inci kali satu inci, tidak ada kelas pengiriman. Kami tidak memiliki produk terkait lagi, jika kami melakukannya kami mungkin akan melakukan sesuatu seperti celana yoga. Untuk Atribut, ini adalah tempat kami membuat variasi. Jadi kita akan membuat satu ukuran yang disebut dan beberapa nilai dipisahkan oleh bar vertikal yang disebut pipa, jadi kita akan melakukan ekstra kecil dan kemudian pipa, lalu kecil, lalu pipa lain, menengah, lalu pipa lain, besar , dan ekstra besar. Kami ingin mereka terlihat di halaman produk dan kami perlu menggunakannya untuk variasi. Jadi sekarang mari kita Simpan Atribut. Sekarang ketika kita pergi ke Variasi, kita akan mengklik Tambah Variasi, dan kita memiliki satu variasi, dan mereka dapat memilih ukuran apa pun, tetapi sekarang jika kita klik, kita mendapatkan semua opsi ini. Variasi ini diaktifkan, tidak dapat diunduh, atau virtual dan kami tidak mengelola stok. Untuk harga yang akan kami masukkan $ dan kami akan memilih lagi untuk tidak melakukan penjualan. Ada dalam stok, kami akan memasukkan berat dan ukuran yang sama, pengiriman dan pajak akan sama dengan orang tua dan kami bisa memberikan deskripsi kecil tetapi kami tidak akan melakukannya. Jadi saya akan klik Simpan Perubahan. Dan kemudian kita akan pergi ke Tingkat Lanjut dan kita akan meninggalkan ini dengan cara yang sama kita lakukan dengan lajang, di mana orang dapat meninggalkan ulasan tetapi kami tidak akan meninggalkan catatan pembelian atau pesanan menu. Kami membutuhkan deskripsi singkat produk sehingga saya akan mengambil hanya kalimat pertama dari deskripsi panjang dan meletakkannya di sana, dan di bilah samping kami, mari berikan kategori Pakaian. Tanpa tag, Berbagi, kami akan menunjukkan tombol dan sekarang mari kita pilih gambar kami. Dan kami akan memastikan kami memasukkan beberapa alt-teks dan ada gambar produk kami, dan kami akan menambahkan satu lagi untuk galeri, dan Tambahkan ke Galeri, dan sekarang kami akan Terbitkan. Dan sekarang mari kita melihatnya. Itu dia, t-shirt putih, $. Ini ukuran kami. Berapa banyak kemeja yang kami inginkan dan Anda akan perhatikan bahwa tombol Tambahkan ke Keranjang dan tombol Beli Sekarang PayPal tidak berfungsi. Itu karena kita belum memilih produk. Sekarang kita punya dan sekarang kita bisa. Di bawah Informasi Tambahan, kita dapat melihat bobot dan dimensi serta ukuran, dan kami tidak memiliki ulasan. Sekarang kami memiliki beberapa produk, saya akan mengimpor beberapa produk sehingga kami memiliki toko yang lebih lengkap, tetapi saya tidak akan melakukan hal baru yang belum pernah saya tunjukkan kepada Anda. Saya hanya akan melakukan hal yang sama berulang kali. Jadi kami akan mengeditnya. Melalui keajaiban pengeditan, Anda tidak perlu menyaksikan saya memasuki banyak, banyak produk. Satu-satunya hal baru di salah satu produk ini yang belum Anda lihat adalah pada item penjualan. Kami akan mengambil kompas yang kami masukkan sebelumnya dan kami akan pergi ke tab Umum dan Anda melihat ini harga reguler $. Mari kita membuat harga jual kami $ dan memperbaruinya dan sekarang saya ingin menunjukkan kepada Anda dua hal yang berbeda. Di bagian depan halaman produk kami, sekarang memiliki harga penuh dengan pemogokan melalui dan kemudian harga jual di sana, sementara di sisi admin Anda juga dapat melihat harga penuh dengan pemogokan melalui. Sekarang ada satu hal keren lagi yang bisa kita lakukan dengan penjualan. Kami dapat menjadwalkan, dari kemarin hingga besok, itulah penjualan Fourth of July kami. Kami klik perbarui dan muat ulang, dan Anda akan melihat bahwa itu masih dijual. Namun, mari kita lanjutkan sampai hari ini dan Anda akan melihat penjualan berakhir, yang berarti jika Anda ingin melewati akhir hari ini Anda harus menetapkan tanggal berakhirnya besok, dan hanya itu yang ada untuk menjual barang. Sekarang saatnya untuk membuat beranda kami sangat indah. Langkah pertama untuk membuat beranda kami benar-benar indah adalah mengubah templat beranda. Saat ini menggunakan templat posting blog tunggal. Jadi mari kita edit halaman ini dan lagi di sebelah sini kita akan memilih Shop Homepage dan Update, dan sekarang mari kita memuat ulang homepage. Dan seperti itu beranda kami lebih mirip sebuah toko tetapi masih kurang tepat. Untuk satu hal saya ingin gambar yang berbeda dan saya ingin kata-kata yang berbeda di sini untuk toko saya. Jadi kita akan mengklik Kustomisasi dan sekarang Anda akan melihat bahwa ada pensil biru kecil di sekitar. Mari klik yang ini. Saya akan membuat kata-kata ini berkata, Peralatan berkemah terbaik tersedia, dan saya akan mengambil teks sekunder sama sekali. Jadi sekarang kita memiliki teks yang kita inginkan tetapi mari kita ubah latar belakang header. Saya akan mengklik Ubah Gambar dan pergi ke Unggah. Kami akan memasukkan teks alternatif kami. Sekarang kita memiliki gambar yang bagus, mari kita pudar sedikit. Di sana itu terlihat cukup bagus. Sekarang untuk teks tombol tajuk, mari kita ubah ke, Lihat perlengkapan kami. Kami akan memasukkan / berbelanja untuk tautan karena itu adalah alamat toko kami. Maka saya ingin tombol kami menjadi bundar. Sekarang terlihat cukup bagus sejauh ini. Mari klik Terbitkan dan tutup penyesuai dan lihat seperti apa rasanya saat lebar. Itu terlihat sangat tajam. Sekarang bagian ini adalah kategori dan Anda akan perhatikan bahwa kategori ini memiliki gambar dan beberapa teks dan ini tidak. Ayo perbaiki itu. Kami akan pergi ke Produk dan Kategori, maka kami akan Edit, Aksesori dan semua yang kami butuhkan di sini adalah deskripsi dan gambar mini. There’s our alt-text and for our description we put in this text and then we’ll click Update. And now when I reload, there it is. Let’s change our bag image. Here’s our alt text. We’ll save and reload. Next let’s do clothing. There’s our description. We’ll upload an image. We’ll use this image and update, and then refresh. Now we have a great logo, a great header with a call to action link, and three categories. Let me click Customize and show you how those categories are placed there. The homepage template placed them there but you can click these and choose which ones they are. So for example, if we wanted to reorder them we could make accessories be in the middle and bags be on the end. This Header Search option is for this and it tells us what it is searching. The default search searches your entire site, including your blog posts but right now it’s searching only products. The shop sidebar position is this and in this section we’re going to put some products, and you’ll note that it’s going to come in columns of three. Let’s do that next. Since we’re building the store of course we want products on our homepage and while these categories are neat, we really want products right here. Fortunately our theme comes with a great way to make that happen. I’m going to go to the Dashboard and then under Appearance, Getting started. Right here it says add a WooCommerce store homepage. The way it works is that it includes a number of short codes and fortunately they even provide some great code for us. So we can simply copy this. Now we’ll edit our homepage and paste this information right here. However you note that there’s a light blue background here. We don’t really want that. What that means is that it copied some extra code from the page we were on. If we switch over the Text tab, you’ll note that all of our HTML tags are messed up. So we actually want to paste our HTML into the Text tab and now when we go back to Visual. It looks a lot more like it should. Let’s click Update and go back to our page and look at it. And here we have featured products, newest products, sale products, and best sellers. But how does that work? What makes them featured? Well let’s take a look here. Let’s click on the hat and then edit this product. In the top right box here, the Publish box, you’ll note that it says Catalog visibility, Shop and search results, Featured, if we click Edit you’ll see that we have a number of options here. We can have our product show up in both the shop and search results, or the shop only, or search results only, or we could have it completely hidden. Hidden is useful for when you run out of inventory but there’s also a checkbox here for, This is a featured product. So let’s uncheck that, click Update, and reload our homepage and now the hat is gone. Let’s look at our compass that we made ourselves. And we’ll edit this, and go to Catalog Visibility, and mark it as a featured product. Click Update, and now our brass compass is a featured product. Now there’s something important I need to tell you. The concept of featured product is a WooCommerce feature. How it gets rendered on your website is entirely up to the theme. Array Themes allows you to make a little shortcut that displays featured products but another theme might not have that shortcode and you might need to put it in a widget or something like that. For our purposes the shortcode works wonderfully but if you ever switch themes you need to keep in mind that your featured products might appear in a different way. Newest products obviously are simply listed in the order they were created so there are the two we created, plus one that was imported from an earlier date. Then we have sale products and these are simply products that are marked as on sale, and of course here we have bestsellers. Now this is calculated by number of sales. Since we didn’t really have any sales at all on this demo store, part of the data that I imported included some transaction information. So this section is simply looking at those transactions and counting them, whichever product has the most shows up in here. We’ll take a look at transactions in a few minutes but this is all there is to getting products on your homepage, just those shortcodes. Now of course you want more products than you can fit right here, so also in a few minutes I’ll show you how to make a great navigation system, so people can find all of your products. Now that we’re starting to get product archives, as well as single product pages together, it’s time to look at our sidebar. This is the homepage and our sidebar has a Cart, Product Categories, Recently Viewed, which is really slick and Search. If we go to a single product and scroll down, you’ll see there’s Cart, Recently Viewed, Product Categories, and Search again. But if we go to a category page, you’ll see there’s a Cart but then there’s also a Filter by price, and again Categories, and Recently Viewed. Filtering by price is pretty slick. For example we can make it go less than $ and our compass disappears but something else that’s slick is that the filter range is the lowest product price on the page to the highest. So if you sell a collection of $ to $ things you don’t end up with a slider that goes up to $, and people have to adjust it every time. Let’s take a look at how these side bars are organized. If we go to our Dashboard, Appearance, Widgets, we have a plain the sidebar that appears on posts and pages. We have a footer, which has right now a plain text widget, Recent Posts, Categories and Products, then we have our Shop Archive and our single product. Now if we look on our left there are a variety of widgets we could use. We looked at Filter Products by Price but there’s also Filter Products by Attribute and by Rating. Then if we scroll down, you’ll be able to see Product Categories, Products, Product Search, Products by Rating, Product Tag Cloud, which are different from filtering, it simply lists your products. Now you’ll note that the Shop Archive sidebar has a Filter Products by Price widget but the homepage does not. That’s because the WooCommerce widgets are smart enough to not show up on a page where they can’t be used even if you put it there. So while you don’t see that filter widget here it actually is the homepage. Now on our Archive, under the Product Categories, we’re showing product counts but on our single, we’re not and that bothers me. So I’m going to show product counts. So we’ll save and you can see them here on an archive and if we go to any product now you can see the counts there, as well. The most important widget to have is your Cart. That’s what people use to see what they have when they’re shopping. You’ll want that available to them at all times. Now if we go to our News page, it does not have anything related to the store and that’s not good. We want our cart on this page, as well. Now you’ll see that up here in the header but it’s not quite as visible and flashy. We want it in more than one place so that people are more likely to see it. So all we have to do is drag the cart right there. We have the option to Hide if the cart is empty, but again we don’t want people to forget that they’re here to shop, we want them to see the cart all the time. So now while looking at this post you can see we have a cart. Now my next suggestion is entirely up to you from a marketing standpoint, you could also put products there. You could choose to put a list of your store’s products or the product categories. Now this is the News page we’re talking about so we don’t want to take useful news information, like recent posts and hide it too much. So we’ll leave the Product Categories here on the bottom. So now as people are reading a post, they get to see these product categories and again we don’t have numbers, so we’ll show product counts and there they are. So now we’ve configured the sidebar on your blog on single products and on the homepage. One of the most important things on any site is the navigation. That’s how people find your content, it’s how Google finds your content, and it’s even more important with a store. If you had a brick-and-mortar store and you hid your products in the back room no one would ever buy them. So let’s take a look at how to make the navs on this site work wonderfully. There’s one right here that was automatically created by WordPress but there are several more on this page that aren’t readily visible yet because we haven’t built them. So let’s dive in. We’ll click the Customizer, and we’ll go to Menus, and you’ll see we have no menus, but we have locations, we have a Featured Product Category Menu, a Primary Menu, a Top Bar Menu, Social Icons, Featured Category, and a Footer Menu, and we’ll create a menu for each of those positions. The items you end up with in your navigation, might vary from what I have because you have a different store, but this will show you how to get them in the right place and then you can choose whatever you want in them. Let’s go back here and we’ll create new menu. And you can see here our locations. I’m actually going to start with a Social Icon Menu. With this particular theme the menu name doesn’t matter, you can name it anything you want. So I give it a name and I click Social Icon Menu and then Next, and now I can add items. Now for Social, we’re linking off our site so we don’t need any of these pages. We’ll close Pages and open Custom Links, and now I’m going to put in Twitter.com and then you could put in your Twitter handle after that, but for text I’m just going to call it Twitter, and click Add to Menu. We’ll do the same with Facebook, next we’ll do Instagram, and then we’ll leave it at that. Let’s click Publish and now you’ll see that in the top right we have social icons, and if I click this pencil it takes me right back over here where I can choose which menu goes in there. If we want to go back we can edit, we can add items, and you’ll see it added a Pinterest item. Now if you add something that it doesn’t understand, like winningwp.com, then it puts it up there in text. We can click to reorder, we can move them around, and then we can optionally also remove. So I’m going to publish that and then we’ll look at the next menu. Next we’re going to work on the Top Bar Menu, which goes right here next to Social. So we’ll Create New Menu, choose Top Bar Menu, and we’ll just call it the Top Bar Menu and click Next, and then Add Items. So let’s close Custom Links and open up Pages. We’ll add My Account and Checkout. We also want a cart so I’m going to search here and there it is. So now I’ll click Publish and we’ll close the customizer and you can see it without pencils. In the top we have our Social, we have My Account, Checkout and Cart. When we scroll this cart follows us around. Next let’s take a look at our footer nav. We come all the way down here and we can have a nav right here. So let’s click Customize and then Menus. We’ll scroll down here so we can see it, click Create New Menu, Footer, call it Footer Menu and again it doesn’t really matter but it helps for reference, and we’ll Add Items. So let’s add a home link and then we’ll make it very much like the nav top bar. So we’ll go to My Account, Checkout and we’ll put a cart in there, and then Publish. And there we are, we have very nice footer menu. So now let’s take a look at our primary navigation ’cause this is the big one. We’ll go back here, Create New Menu, there it is, Primary Menu, and we’ll click Next. Now we don’t need My Account, Checkout, or Cart because they’re right here. Cart is here and there are links in the footer, as well. So let’s make a Home button. We’ll make a News button for the blog and then down here we have some options. We have Products, so we can link to a specific product, Product Categories, and WooCommerce endpoints for things like account details, and orders, and whatnot. Right now while we only have five categories we could add them all, and Publish, and it even works while the page is slightly narrow like this. Once it goes to full width, there’s plenty of room. However, if you had many, many categories we would probably want to make this a drop-down. Let me show you how to do that. We’re going to add a page called Shop, which already exists. It comes with WooCommerce. Then we’ll just drag that right here and then each of these we’ll drag slightly to the right and what we’re doing is creating a drop-down menu. You can see it here, there’s a little drop-down arrow. So now if we click Publish and then close the customizer, you’ll see that it makes a nice drop-down of the categories. If you had indented one more it would have made another level of navigation. Let me show you. We could put shirts under clothing and we’ll Publish this and close it, and it flies out like this. So as you can see the navigation is really quite flexible. If you only have a few categories I recommend having them all visible on one line, drop-down navigations can be problematic for people with who don’t control the mouse very well. However if you end up with dozens or even hundreds of categories the theme allows for a well-built drop-down navigation system. There’s another important thing we need to work on on our homepage and that is the footer. Now the footer is simply a widget area and it comes pre-installed with some widgets, some of which are exactly what we want but some not so much. For example, the one on the left is an ad for this particular theme. Recent Posts is an excellent choice because while this is not a blog we do want our news posts on the homepage somewhere. Categories is not our product categories, it’s our post categories so we don’t want that one and here we have a Products widget but it’s not any particular products, it’s just products. So let’s go about making this a better footer. Let’s go to our Dashboard, we’ll go to Appearance, Widgets, and here’s our footer area. So we have a Custom HTML widget but we don’t really want this one. So I’m simply going to drag it out and here we have a Contact info and Map. We’ll put that right there and we’ll call it Contact Us. I’m going to leave this contact information in there since our store is fake anyway. Now we don’t need ours. This is a digital store. So let’s click Save and we’ll take a look at what it looks like. There we are. Now that we have a Contact Us widget, let’s look at the next spot. This is Recent Posts and for all that this is not a blog, the posts in our store can generate a lot of traffic and having links to your individual posts on every page can be really valuable. You don’t want to give it a lot of real estate so the footer is perfect for that. So we’re actually going to leave this widget just the way it is. Next we have Categories, except these aren’t Product Categories, these are blog categories and we don’t want that. We want to focus on products much more, so let’s go switch that out. We’ll drag Categories right out of here and then you’ll find Product Categories and here it is. I’ll drag that right up above Products and as you can see we can order by name or category order, shows a drop-down, product counts, et cetera and then we’ll click Save, and go take a look. And there we are. So next let’s look at Products. Right now this is just the three most recent products, there’s a much better option for this, let me show you. We’ll take Products out of there and we’ll add Products by Rating, and we’ll choose to show only three so that it doesn’t get too long. And now we’ll reload and there we are. It looks like we could fit a fourth in there, let’s do that. There we go. So now we have very popular products on our page as opposed to simply whatever we added most recently. Now I’d like to speak to that, it’s not inherently wrong to show what you added most recently, in fact it might make good business sense. I’ve shown you how to change the contents of your footer by using different widgets. The business decisions behind what goes in there vary from store to store. I would try different widgets and see if you get different kinds of traffic. Do some testing, put different listings of products in there and see what drives more sales, then do that. After the homepage the shop page is probably the second most important page in your entire store site. Let’s take a look at the one we have already. We’ll simply click Shop, right here and right now we’re looking at one through of results, and they’re ordered a bit randomly. However, right here we can sort by popularity, average rating, newness, or price. This sorting combined with the category sorting of our navigation, give a pretty good samp of our products to our customer. There’s one more trick that this page has up its sleeve, though, let me show you. We’ll go to Customize and then Menus. We’ll go to the bottom here and I’m going to Create a New Menu and it’s going to be the Featured Product Category Menu. We’ll click Next and then Add Items, and now what’s important is that we’re not adding categories, we’re adding product categories, and I’m simply going to add all of them, but not uncategorized. So now I’m going to click Publish and close the customizer. Now if we go to the bottom, you’ll see there are four products here and they are from the Accessories section and if I click Clothing, we get clothing, Bags we get bags, and so on. Now this is a fun way to render your product. We have far more accessories than four and there isn’t a More link but you can set the order of the products in your admin area so that the ones you think are most important appear here in this section. This gadget is by no means required but it’s kind of fun and it does a good job of showing your products. If you decide you don’t want it you, go back to Customize, back to Menus, open up the Featured Product Category Menu and right here at the bottom, Delete Menu. Now if we Publish and close the customizer and go back to the bottom, it’s going. So our shop page does everything that it’s supposed to do. It shows products and allows you to filter them, and sort them, and there’s a cart here for paying. Now that we have the front end of our store looking good and working well, we need to check our transaction system and make sure that people can actually buy. The first thing we’re going to do is look at our payment gateways and make sure they’re both in Sandbox mode or at least testing. We’ll go to WooCommerce, Settings, Payments, and let’s manage both Stripe and PayPal checkout. Stripe is enabled and is in test mode. PayPal is in the Sandbox mode Now when testing your credit card processors you can use some fake credit card numbers. Let me show you how to find the proper ones. I simply Google for Stripe test cards and this will take you to the testing section at Stripe and down the page here are test card numbers and tokens. I almost always use this first one ’cause I can remember all the s, you can use any little code on the back and any future date. So I’m going to copy this Visa number and now I’m going to try buying something with Stripe. Let’s buy our compass. I’ll click Add to Cart, here and we can do the View cart or Checkout. Let’s try both. I’m viewing my cart in the tab here and it looks good but if I simply clicked Check out it takes us right here. So I’m going to put in my billing information, you’ll note that most of it is fake, which works when you’re testing. I don’t want to subscribe right now. I don’t want to ship to a different address and I want to pay with Stripe right now, and our theme is cool enough to tell us that we can use this test code, while we’re in testing mode and we’ll place our order. And now it says, thank you, your order has been received. Now this is what your customers are going to see. Shipping was determined to be $., their shipping and billing addresses and now in the admin area, let’s go to WooCommerce Orders, and here’s my order and it’s in processing. That means the Striped charge has completed. I can click the I and see the information here, and if I click this link, which is a unique identifier with Stripe for this transaction, it takes me to Stripe and here’s where you can see the transaction happening in Stripe. Here at the top you can see there’s a Refund button and if you push that it would send money back. Now since we’re in test mode that doesn’t actually work but in live mode that is how it would work. Also in live mode in the day or so $. would come in to your bank account. So it looks like transactions are working for Stripe. If you actually click the name instead of that I you get a lot more information. You can get shipping labels, there are Order notes, Custom Fields and all the information about the transaction. Now you’ll note there’s an error here, with WooCommerce Services, details are logged here. Let’s take a look at what the error was and it says no rate requests have been made for this service. So when we were doing our configuration we set up USPS for United States shipping zone but we didn’t also do it for international, which we knew at the time and it’s fine. One more thing we want to test while we’re testing transactions is coupon codes. Let’s take a look at how those work. We’ll go to the Dashboard and under WooCommerce Coupons. There’s an existing coupon here already, it’s % off, and there are an unlimited number of uses available. Let’s click Edit real quick and I’ll show you some other options. Instead of percentage you could choose Fixed cart discount or Fixed product discount. You could optionally allow free shipping and you can set an end date for this coupon, so that you don’t have to remember to come back and turn it off, before the holiday weekend. You can set a minimum spend and a maximum spend. You can say this cannot be used in conjunction with other coupons. You can exclude sale items and you can make it apply specifically to these things. You can also choose how many times the coupon can be used and the same for individual users but we’ll leave it alone right now. The name of this coupon is %, let’s add a brand new one. We’ll call it July and we’ll make it a percentage off. We get % off and we’ll make it expire on the sixth. No usage restrictions and no usage limits. Let’s publish and now let’s go buy something. Let’s buy our compass again because it’s a nice round number. We’ll Add to cart, go to Checkout and right here it says, Have a coupon? Click here to enter your code. And Apply Coupon, and now right here you can see that it removes $. Now taxes and shipping add back $, so we’re only $ off, however, the coupon code worked and you don’t actually have to run transaction to know that it worked because you can see the total that it’s going to run. So that’s how coupons work. Now that our store is functioning well, we’re going to look at adding some things around the store, some pages and some other plug-ins that will help make it work better. Now that the basic functionality of our store is all set up we’re going to add a few pages, specifically a contact page and an about page. Let’s start with the contact page. We’ll go to the Dashboard and the first thing we want to create is a contact form. We installed WPForms near the beginning of this video because it works particularly well with our theme. You could use any other Forms plug-in if you wish. I’m going to Add a New Form. I’m going to call it Contact and simply choose Create a Simple Contact Form. We have name, email, and comment. So we’ll save this form and click the X here. Now let’s go to Pages, we’ll Add New and the title will be Contact Us and now we’ll put in some information about how to contact us and then we’re going to click Add form. We’ll choose the Contact Form and we’re not going to show the form name or form description and that’s all there is. This other button that says Add Contact Form, uses a form from Jetpack and you may use it if you wish. I chose to use WPForms. Now we’ll click Publish and let’s view this page. It looks like we want some more spacing in there. Let’s put in horizontal rules. And there we are. Now before our form works we need to go back to WPForms and go to Settings, and we need to tell it where to send email. So let’s click Email. It’s going to use an HTML template and it’s going to use a header image. and we’ll choose Save Settings. When someone submits a form it gets sent to the email of the site owner, which is found in Settings, General and you can see here that it’s [email protected] So let’s fill out our form and see what happens. I’ll put in Name, Email, and a short message and click Submit and now it says, Thanks for contacting us! We will be in touch with you shortly. And if we go to our email, you can see we have a new email from me and we asked for it in an HTML template, so we need to view this as HTML in SquirrelMail. We can also view Unsafe Images. SquirrelMail considers all images to be unsafe but now that we have everything turned on you can see the email results. Now that our contact page is working let’s add it to our navigation. We’ll go to Customize, Menus, Primary Menu, and Add Items, and choose Contact Us, then Publish, and close the customizer, and now we have a fully functional Contact Us page. Now that we have a Contact page, let’s make an About page. We’ll go to New, Page and call it About Us. Now there won’t really be anything special about this page, it’s just a plain vanilla page with some information about the store. There’s the beginnings of a great About Page but we also want to urge our customers to get back to us. So we’ll link over to our Contact page. We’ll highlight Contact Us, click the anchor, and then we’ll click Link Options, and we can choose the Contact Us page, and click Add link. That’s all there is to it. Now we’ll click Publish and we want to put it in our navigation. So let’s go back to our homepage and click Customize then Menus, Primary Menu, and we’ll put it last, and there it is. Now let’s click Publish and now we have an About page. Again, we want to keep our cart on every page so that people are reminded that this is a shopping place and that they can be adding things to their cart anytime. We have Recent Posts, a Search and Product categories. How much content goes on your about page depends entirely upon the culture that you’ve built around your store. You might need a great deal of information there but maybe similar to this page, you only need a little bit because people really understand who you are. That’s up to you but I’m sure you’re going to make a great one. One area of the store that we’ve not spent too much time on is the News section and this is essentially a blog. The reason I haven’t spent a ton of time on it is that there isn’t anything particularly special about individual posts. They are very stock WordPress posts. There aren’t any extra features or anything unusual. This is a WordPress gallery, the one that comes built into WordPress, normal images, et cetera. One thing that is cool and this just comes out of the box is these are related posts but they’re related by category. Let’s edit the post we’re looking at and I’ll show you what I mean. Over on the right, it has Design, Featured and Travel. So now we have Design, Featured, and Travel at the bottom here. This image is the featured image and it has the title and the text. Let’s look at the Archive page for a moment. It’s a normal archive page, posts all in a row, very normal but this theme has one extra cool thing. Let’s go to Customize and go to Theme Options and here we have a Featured Posts Header. You’ll note here that we could set up a Hero Header just a large image, but instead we can choose an entire category to populate the hero header. We’ll choose Design first and now for its image it takes the background image of the first post, then also links related posts underneath of it and then moves on. We can choose alignment, left, right, or center and we can change the opacity of the background image. We can even color it. I like mine without color and then you can change the colors of the text. Right now we have black text on a white background. So now I’m going to click Publish and close the customizer, and now our Archive page has this beautiful header at the top. One of the great things about this theme, Latest from Array, is that I don’t have to mess with the blog very much. I want a store, the blog is secondary, and so it came with a great many features for the store and just coincidentally happened to make an attractive blog. Our site look and feel is finally done. Next we’re going to take a look at some of the utilities that can make our site a lot more functional. One of the most important parts of running an online store is quality communication with your customers and a great way to do this is with MailChimp email lists. Now we’ve already done a number of things with MailChimp during the setup of our store but let’s review a little of what we’ve done and then look at what we need to do next. Now we actually have two MailChimp plug-ins installed. The one you see at the bottom here is connected to our WooCommerce store. It knows things about our store and it’s used specifically on the checkout form. Let me show you. Let’s add a compass to our cart and go to Checkout and right here we have the option to subscribe to our newsletter. That’s what the WooCommerce plug-in does. Now the other plug-in is called MailChimp for WP and this one is not specifically for e-commerce. It’s good for just about any site. It also is connected via API, the same key as the other plug-in. So they’re talking to the exact same MailChimp account and that’s important. Our email list is called myWPstore and it has these fields. Note these tags, how they’re uppercase. We’re going to use those in a few minutes. Now this plug-in is intended to create a form that you can use either in widgets, or in posts, or pages. If we click Form here on the left, you can see the form. Now this is in HTML and it says, Sign up for our newsletter to get updates about Array Themes discounts and new WordPress theme releases. Now this came from Array Themes and we are not Array Themes, we are running our own store. So let’s change this. There now over on the right is what it’s going to look like. Right now we’re only collecting an email address. We also want to collect first and last name. So I’m going to copy the email address field and paste it two more times, and then change it to say first name, last name and remember those tags I told you about? We need to change them right here. There are also placeholders. Now right now all three fields are required. Simply removing the word required makes them not required and that’s entirely up to you. You can make them required or not required and now we’ll Save Changes. So now we have a form that looks like this but how do we get it where we want it to go? We’ll go to the News page. Now this is our blog and the sidebar looks like this. Let’s put our sign up form right here above the search. We’ll go to Appearance, Widgets, and this is that sidebar, and then we’ll find the MailChimp signup form right here. And it put it at the bottom so let’s move it up here, and we’ll leave the title at Newsletter. So now let’s reload and there we have a sign up for our newsletter. Now there’s one more very important detail. We’ll go to MailChimp for WP, Form, and there are some tabs here at the top. These are some messages that the user will receive at various times. The defaults are great and I rarely change them but I wanted to point them out so that you can if you wish. Settings is the key here. Right now if someone filled out that form nothing would happen. We need to say that this form subscribes to this list. We can choose double opt-in and update existing subscribers. We can choose to hide the form after a successful sign up and then we can choose to have it go someplace after the form is filled out. We’ll leave it empty for no redirect at all and Save Changes. Now we will reload to refresh the form and I’ll put in my information, and we get an error that says, Please include an @ in the email address, and I know why. If we go back to our form, I changed the name but I did not change the input type. So for the names, we want to change the type to text and then Save Changes. Now we will reload to refresh the form and I’ll click Signup, and right here it says, Thank you! Your sign up request was successful. Please check your email inbox to confirm. So now we have people signing up for our email list from two different places. One is this sidebar and the other is from the cart. I suspect you’ll get far more signups from your cart than you will from your sidebar. People are used to seeing subscribe items in their sidebar but when they’re in the process of checking out and you suggest to them that perhaps they might want to know more information about the product they’re actually buying they usually sign up. So that’s a great place to have it. Another extremely important part of any online store is site speed. You need your site to load absolutely as quickly as possible. You want your products to appear, your images to pop, people need to be able to move through your store very smoothly and seamlessly. The way this is done is with caching. Caching basically makes a copy of each page and then serves that copy, rather than rebuilding it with code and databases every time. Now caching for an online store can be quite difficult. However, more and more managed WordPress hosts are offering built-in caching and it works great. Let’s take a look at what SiteGround has to offer. We have a plug-in installed here called SG Optimizer and SiteGround installed that for us. If you did a manual install of your WordPress site and you don’t have this plug-in and you’re on SiteGround, you can get it from the WordPress plug-in repository and you should absolutely have it. First let’s look at the SuperCacher Config. Right now we have our Dynamic Cache turned off, as well as Memcached. Now those are two different kinds of caching. Dynamic Caching caches each individual page and then serves that for a short time. We absolutely want that turned on. So I click it and now it’s on. Now Dynamic Caching does not happen for people who are logged into the website, so for you while you’re logged in right now you may not see an immediate change but when you’re logged out and for all of your customers who are logged out the site should appear much faster. We also want to turn on Memcached. Memcached caches specific database queries, particularly large ones and those happen quite often with e-commerce stores. So we want to turn this on. Unfortunately, we can’t do it directly from here. We have to do it through our cPanel on SiteGround. So let’s log in there, we’ll click on My Accounts and then go to cPanel. Now in here we can use this cool search and type in cache and you’ll find the SuperCacher, and right here we have Level : Memcached and there’s a switch right here to turn it on, and now it’s on. And now we can go back to our site and turn it on. We can test right here and it says it is not being cached. If we go to the top of the page, you’ll note there’s an error that says, it’s not being cached. Make sure the Dynamic Cache is enabled in the SuperCacher tool in cPanel. So let’s go back to cPanel and click on Level : Dynamic Cache. And you’ll see we can turn it on right here. So both caches need to be turned on, both in the admin and in cPanel. So now let’s go to the bottom and try testing again. Now it is being cached and now we can hide this notice. Now there are other things that are important to do with SG Optimizer, and HTTPS Config is one of them. Now the only thing this does is require that your site is run over HTTPS and this is very important for two different reasons. One is that it encrypts all the traffic between your customers and your server. That keeps them safe but the other thing is right here under this last bullet. Once your site is loaded through HTTPS it will also automatically take advantage of the HTTP protocol, too. The HTTP protocol is much, much faster than good old-fashioned HTTP. If you want to know all the ins and outs about it, Wikipedia has a great article but trust me, HTTP is way faster, and so simply having this Force HTTP option turned on, gets us both privacy for our customers and speed for our site, so we definitely want it. Lastly we have PHP Config, which you probably won’t need to change. We absolutely want to be on some form of PHP , not . If you’re building your store on a site that’s been around for a while, it might still be on some version of . If you need to change, this page can help you test to see if you have any old code that won’t work. We’re not going to change anything because PHP . is great. So for a quick review, under SuperCacher we turned Dynamic Cache and Memcached, both on this page and also in cPanel. We made sure that HTTPS was forced so that we have privacy for our customers and speed for our site, and then we made sure that we’re running on PHP . All three of those pages can dramatically increase the speed of your site, so make sure not to skip this step. Another incredibly important element to running an e-commerce site is search engine optimization and this can mean a variety of different things to a variety of different people. What we’re going to do next is set up an account with Google Search Console and Google Analytics. Let’s start off with Google Search Console. The one we want is not actually the top one but rather the second one, where it says Google Webmasters. In here you can learn a great deal about Search Console and what it can do for you. In the top right we’re going to click Sign In. If you already have a Google account you may use it for this and what’s interesting about Google accounts is that they work on all Google properties. So if you already have an account for Gmail, or Google Maps, or Google Drive, or maybe with your Chromebook, you can use it, otherwise we’ll create a new one. I’m going to create a new one now. I’m going to use my current email address, instead of making a Gmail address and then we need to create a password, and then we’ll choose Next. So now we need to go check our email to get the verification code and here’s where we verify our email address. We’ll take this number and put it right here, then they need a phone number, and our birthday, and gender, and now I’m going to send a text to my phone. And my code is . Now they’d like to add my phone number to other Google services. I’m not going to do that right now, so I’ll click Skip. Privacy, I agree, and now we are logged into the Google Search Console. Now we’re not going to do anything with it yet. We’re going to use some WordPress plug-ins to manage our console. All we needed to do is create an account, which we have now done. So next we’re going to create an account for Google Analytics and here’s a page where you can read a great deal more about Google Analytics, but in the top right I’m going to click Sign In, and now that I’ve created my other account I can choose it from my list of accounts. So three things need to happen here. We need to sign up, we need to add a tracking code, and we need to learn about our audience. Steps two and three are going to happen with WordPress plug-ins. Right now all we’re going to do is sign up. So I’ll click Sign up. We’re making a website not a mobile app. We need to create an account name, so I’m just gonna call it myWPstore, and we need to make a website name. These don’t have to be the same. We put in the address of our store, choose an industry category. We’ll choose travel and then a time zone. I happen to be in Eastern. Then we have Data Sharing Settings. I recommend you leave most of these on. I’m going to turn them off because I’m not making a real store, but turning them on can help you get better results from your stats. Now I click Get Tracking ID, but first I need to accept the Terms of Service. Now right here is our tracking ID and right here is the code that is used to make it work, but we’re not going to use either of these things directly. We’re going to use a WordPress plug-in, as I mentioned. So now that we have both Google Search Console and Google Analytics accounts created, let’s go set up the plug-ins that use them. Now that we have a Google Analytics account set up, let’s get it tied to our site. First I want to show you how to test that it’s not working and it’s quite easy. Take any fragment of this tracking ID, probably the biggest one in the middle there and copy it. Then on your website right click and View Page Source and simply search for it with Command or Control + F and it found zero results, which means our code is not anywhere in our site. We’re going to use a plug-in to get it there. Let’s go to plug-ins, Add New, and search for Monsterinsights, and we’ll find Google Analytics for WordPress by Monsterinsights. Let’s click Install and Activate. Now I’d like to talk for a moment about why we chose this one. Using any plug-in to insert your Analytics code means that when Google changes the rules your plug-in can flex with them for you, so that you don’t have to go change your code. This may not sound like a big deal but once or twice a year Google will tweak their Analytics code and you should probably get new code. If you use a plug-in it’ll take care of it for you. Now the one from Monsterinsights is particularly well written and offers a great many features. Mari lihat. Right here it says, Please configure your Google Analytics settings and one of the great features about it is that you can authenticate with your Google account, which means you tie the two accounts together and they can communicate back and forth. And monsterinsights.com wants to access our Google account to manage our Google Analytics data, management entities, you’re AdSense data, so if you’re doing ads on your site, it can help manage those, and view and manage Search Console data for your verified sites. Remember we also set up Google Search Console. It wasn’t primarily for this plug-in but because this one can access it you get some extra good stuff. So let’s click Allow and we’re going to allow all website data. We’ll Complete Authentication and now it’s done, and look there’s our code. So let’s go back to our homepage. We’ll copy this code again, right click, and View Page Source and we’ll search for it again, and there it is. So now this whole, big block of code was put there by our plug-in and it does a great many more things than the code that Google was going to give us. Google’s code is only this long but our plug-in tracks many more things and gives us a lot more information. Let’s go back to our Settings, the version we’re using is the free version and the paid version has quite a few things specifically for e-commerce and we’ll take a look at those in just a sec. I would recommend you set it to automatic updates, that way it can keep itself up to date and thereby also allow your Google Analytics code to stay up to date. You can optionally allow usage tracking, so that they know how you’re using this. I would turn it on. I personally know the folks that made this plug-in and I trust them. Now we’ll save changes and then let’s go to the Tracking tab. We’re not really going to change anything in here but I wanted you to see what’s here. This plug-in ignores traffic from logged in administrators and editors, that way you don’t artificially inflate your stats with your own traffic. One of the things this plug-in allows that the default code does not is tracking events, and events are things like clicks on things, filling out forms, downloaded files, and things like that. If we go down to e-commerce then you’ll see that with the Pro version you can see who’s buying your product, what’s the most popular item in your store, the average order value and tons more. If you find yourself wanting that information I recommend you upgrade. Now that we’ve connected the site, let’s go back to our Google Analytics page and click the Home button here, and this is where your data will appear. Now it usually won’t appear for about hours. Google shows you your data in hour blocks, so each day you get to see what happened yesterday, except for the REAL-TIME. REAL-TIME actually shows you who is showing up and from where. So if I go to our site in an incognito window, where I am not logged in then you can see it pop up, and it says I’m from Forest Hills. I’m not actually, my internet service provider links through there, which tells you that Google Analytics isn’t % accurate but it’s close. Now let’s take a look at what we can do with Google Search Console. Before we get too deep into the Google Search Console, I’d like to explain a little bit about what it is. The Search Console is the way that your site can communicate to Google. In the old days when you put up a new page, you would have to wait until Google stumbled upon it. They would come visit your site at random times, no one knew exactly when it was, and then they would crawl your site but if your site is tied to Google Search Console when you publish a new page it immediately tells Google and Google comes and crawls it much more quickly. Furthermore Google can use the Search Console to communicate back to you problems that it finds with your site, pages that are missing, or load too slow, or maybe you’ve been hacked. You’ll find out much more early with Google Search Console. So let’s connect it to your site. We’ll go to the Dashboard, and then Plug-ins, Add New. We’ll search for Yoast and we’re going to install Yoast SEO. Now Yoast SEO does a great many things for us, but one of them is tie us to the Search Console. Now right away it says we have four notifications. Huge SEO issue. You’re blocking access to robots. That’s true, if we go to my Reading Settings it says, Discourage search engines from indexing this site, which for now is appropriate. I don’t want Google to know that the site is here ’cause it’s not ready. So we’re going to leave that alone for now and it says you still have the default WordPress tagline, even an empty one is probably better, and we will take care of that as well. Then it says Yoast SEO and WooCommerce can work together a lot better by adding a helper plug-in. Please install Yoast WooCommerce SEO to make your life better. We’ll do that in just a second and lastly, Don’t miss your crawl errors. Connect with Google Search Console here. So let’s do that one first. We need to get a Google authorization code and we can simply click a button, sign in with our proper account, and it says Yoast SEO wants to view and manage Search Console Data. Let’s click allow, and we’ll copy this big long code, and close this tab, and then we’ll paste right here, and click Authenticate, and now we’re authenticated. So let’s go back to the Search Console and we’re going to put our website address, and add a property. There now the Search Console knows about our site but it needs to know that we own that site and the easiest way is with Google Analytics, which we’ve already installed. So let’s click Verify and now we have verified that we own that site. And now Google Search Console is connected. We don’t have any data yet because we’ve only just connected, in about hours there will be a ton of great information here. Let’s go back to our Yoast page about the Search Console, and reload, and we’re going to choose that profile and save it. There, now our site and the Console are tied tightly together. Now before we install the WooCommerce extension for Yoast let’s look at some of the general settings. We aren’t really going to change many of these settings because the defaults are great but Yoast can do SEO analysis, readability analysis, it can look for cornerstone content, it can find how many text links there are, it can create an XML sitemap for you, and a XML sitemap is a special way of listing every page on your site so that Google can find them much more easily. Google loves that and you want Google to love your site. If we go to Search Appearance we get to choose how different parts of our site appear in search results. If we look here in our title bar, you see where it says General-Yoast SEO and there’s a hyphen there, the hyphen is the title separator and you can choose any of these, and that doesn’t really affect your SEO much but reflects your style. You get to choose whether you’re a company or person, and then provide the company name, and an image. Now Google knows that this site is a company. We can choose what the show in search results. We’re showing posts, and pages, and products. We can choose what to do with Media, as well as Taxonomies, and Archives. Right now we have Breadcrumbs turned off. If you’d like to better understand how Breadcrumbs affect your site I recommend reading this article, right here, and lastly there’s RSS, which is a way for other sites to read about your site. I recommend leaving these settings just the way they are. Now let’s take a look at the Social menu item. Yoast wants to know the URLs for all of your social accounts that way it can help Google know which content of yours across the internet is tied together. If you wish you can more tightly tie with Facebook, and Twitter, and Pinterest, and Google+. Whether or not you want to depends on whether or not your customers are there. If they are I recommend you do it but if they’re not the kind of folks that hang out there then it’s probably not worth it. So let’s go back to our notifications and let’s get more information about the WooCommerce SEO plug-in. This one is not free, it’s $, and right here it says what it can do for you. As soon as you’ve installed and configured it you’ll have more people clicking your rich pins. So if you use Pinterest then your pins become much more attractive. The built in breadcrumb navigation doesn’t work very well with WooCommerce but with the WooCommerce add-on it fixes that. Remember I told you about XML sitemaps to tell Google about your pages and posts. Well with the WooCommerce add-on it also makes products easier to find. You can also reorganize the user interface, so that it makes it a little easier to use for WooCommerce products. If these are the sorts of things that would help with your store, then I recommend doing it. If you have a strong presence on Pinterest by all means this is great, you should absolutely do it. Now these two things we’re going to fix a little later but I want to go to Products, and edit one and look at it with you. Now that we have Yoast installed there’s a brand new box and this is what your product looks like in a search result. We can provide a focus keyword, like t-shirt, and we can edit the snippet. Now this whole box is what will show up in your search results. Now I said we’d fix the tagline a little later but we’ll go ahead and do it now because it’ll make this look a lot better. First I’m going to update this product, then we will fix the WordPress tagline. Now we never changed the site title in the tag line because we hid them and if they’re not visible it doesn’t really matter, right? Wrong, they’re actually used in a number of places. For example, look right here in the title tab. It says Home-My Blog. Wow, we don’t want it to say My Blog, we want it to say myWPstore or whatever your store name is, and then for a tagline make it say, and then we’ll Publish, and close this. And now we’ll reload our product and now you can see that the title contains my store name. The more information you can provide to Yoast about your product, the more information that Yoast can give to Google and that’s what you want. Yoast provides analysis of this particular page, a product in this case, it says no internal links appear on this page, which isn’t actually true, it just doesn’t see any in this content. So some of these problems need to be taken with a grain of salt. To sum up what we do with Yoast, the most important thing is getting it connected to the Google Search Console and the second most important thing is making sure that you put good content into those fields on individual products. If you have good content and Google knows about it then you’re going to win the SEO game. Once your site is built and working, one of the most important things you can do is set up automatic backups. That way if something terrible happens to it, whether via earthquake, or the slip of a mouse finger, or a hacker, you can get your store back and your work is not lost. We’re going to set up backups via VaultPress through Jetpack. If we go to the Jetpack dashboard and click on Plans, you’ll note that for $ a year we get spam protection, off-site backups, priority email support, plus all the free features. Now the backups are once-daily. If you want to be able to push a button and backup your site whenever you wish, you would need to paid $ a year but it comes with a great many other things, so it could very well be worth it to you. We’re going to upgrade to Personal. You may recall that when we first set up Jetpack we chose the free model. Now it’s time to pay and to get more features. So let’s go ahead and do that. We’ll log into our WordPress.com account and now we can pay via either credit card or PayPal. I’m going to fill this out with my credit card and hit Pay, and now we’ve made our purchase. It’s installed the parts of the plug-in that it needs to for the paid version and we’ll go back to our site. Now we have an alert at the top for Akismet. We’re going to look at that in a few minutes, so I’m going to close this, but now on the left we have a nav item called VaultPress. Let’s click that. Now VaultPress has already begun backing up the site. The first time is going to take quite a long time because it’s backing up everything but after that it only backs up what’s new, so individual backups run quite quickly. There’s a yellow bar here that says, Setup remote access to enable restores and improve performance across the board. VaultPress is requesting access to our server, so let’s do that. It says, Howdy, would you like to log in to VaultPress using your WordPress.com account. We will approve. Now it says, we’ve never had a backup because it’s still going through the first one. If we upgraded our plan then VaultPress would scan our backups for security problems but let’s go to Settings and we want to provide access via SSH. Now this might seem a little complicated, but it’s really not. We’ll click SSH and it’s going to want this information from our server. It’s also going to provide this public key to our server. Fortunately SiteGround provides us this information and is asking for this information. Let’s take a look at how to do that. We’ll go to SiteGround, My Accounts, and then Information and Settings. Now VaultPress wants a server address. We can use myWPstore.com. It also wants a port number but SiteGround’s SSH port number is not . If we google for the SiteGround SSH port the second option down says how to log in to SiteGround via SSH, and right at the top it says the SSH port on SiteGround’s server is also instead of . So let’s take that and put it right here. Now our username is our cPanel username and we’ll put that right here, and we’re not going to use a password. We’re going to use this key. So I’m going to copy everything in this black box and now we’ll go back to SiteGround and go to cPanel. I’m going to search for SSH and there’s only one option. We’re not going to make a new key pair, we’re going to upload a key, and this is the one that we just copied from right here. Don’t put in anything for allowed IP address and click Upload and now it’s been successfully added. Now we click Save and it’s attempting to connect, and it worked. While we’re here at the VaultPress dashboard let’s go to backups and it shows that our uploads folder is % done. It’s going to take hours to finish this first backup, so we’re going to leave this here. Once the backup is done when you go to the VaultPress dashboard there will be a button to restore. It will take the most recent backup and just overwrite your site with it. If you’ve made any changes since the last backup, you’ll lose them, however that’s a very low price to pay for getting your site back if you lose it. We’re almost done with this video but before we wrap up there are a couple more major tools that I want to show you. The first is called Akismet and you’ll note right here there’s a warning at the top of our dashboard regarding Akismet. Now Akismet helps block spam but it also deals with email in general. If you’re not aware recently the European Union passed a law called GDPR, which deals with how people can manage their own personal information. As a result your website should now either tell people they can delete their own information or deliberately choose not to do that. This box gives us that option. We can enable an alert or we can disable. I’m going to click enable and you’ll note that it takes us to a dashboard for Akismet, and right there is the choice that I made. It displays a privacy notice under my comment forms. If you don’t want to do that you simply click here and Save Changes. I’m going to leave it on. Now let’s talk about some other things that Akismet does. Normally you need to set up Akismet and get an API key, and things like that, but since we purchased a personal license for Jetpack it set it up for us and it gave us an API key. So now all we need to do is look at our settings. Right now we have it set to show the number of approved comments besides each comment author. That helps you know which authors have a particularly good reputation. There’s also a Strictness option. Normally spam is put into your spam folder, however Akismet right now is set to take the worst spam and just delete it. If you wish you can have all of it going to your spam folder so that you don’t ever miss any. This can get pretty tedious actually. Most sites get lots and lots of spam. I would leave this default the way it is and now at the bottom it says our subscription type is Jetpack Personal Yearly and it is active. The documentation around Akismet will all refer to comments because that’s what it’s really made for, however Akismet filters all forms being filled out on your site, which means if somebody leaves a product review that is spammy it’ll get filtered. So even if you have comments off, if you have product reviews turned on you’ll want Akismet turned on. The other thing I wanted to show you was Site Stats from Jetpack. this is a different tool from Google Analytics but it still counts statistics for your site, but what’s interesting is it can count some different things and in different ways. Right now we’re looking at stats inside our dashboard and it can show us Referrers, and Search Engine Terms, et cetera. But what’s interesting about Jetpack is that it can show you daily views as they happen. With Google Analytics you either get real-time, which are very transient, they go away as soon as the visitor goes away or you get daily and so you don’t see a day’s stats until the day is over. With Jetpack you can watch this number right here, today views, grow as the day moves on. This is particularly useful if you release something on a given day and you want to watch how traffic is growing throughout that day. Jetpack stats are not as complete or in-depth as Google Analytics and you may even get different numbers, but as long as you look at the numbers consistently and you look at traffic over time they can provide some new insights that Google Analytics do not. Similar to Akismet normally you would have to set this up, however, since we purchased the Jetpack Personal it was set up for us, so you don’t need to do anything at all. One more thing I want to show you. You can click this button to leave your site and go to WordPress.com and get some additional information. There are Insights, which can show you all-time views, most popular day and hour, et cetera. You can look at Activity and under Traffic, you can change by days, weeks, months, and years. So to reiterate don’t treat Jetpack stats as either better or worse than Google Analytics. Simply a different source of some unique information. Our store is done but we’re going to make one last sweep through the settings and the customizer to make sure everything is set exactly right. Let’s start with the settings. We’ll go to the dashboard and I’m going to go to the Settings menu. So these are WordPress settings not WooCommerce settings. We’ll make sure we have a site title and a tagline. We’ll make sure that our email address is set properly and particularly make sure your time zone is set properly, otherwise the time stamps on your purchases won’t be right. Date and time format are entirely optional, as well as week starts on. I prefer Sunday. Next we’ll look at writing. You can choose a default post category but other than that there isn’t really anything on this page that we need to change, so let’s move on to Reading. The most important thing on this page is the Search Engine Visibility. If you’re happy with your site, you can uncheck this and Google can start finding your site. If you’re not leave it checked and uncheck it whenever you’re ready to go live. Next is discussion. I’m going to choose to turn off comments for all my blog posts. However, you may recall that we left reviews on our products. Reviews are similar to comments and still run through Akismet for anti-spam. We’re going to skip Media since the defaults there are great and go to Permalinks. You’ll want to make sure that your common settings are for post name. That gives one of the very best SEO structures for your page URLs. You could change the things down below here, as well, but the defaults are great, I would leave them. Privacy is an important section. Your site has a privacy page because Jetpack made it for you but it’s a draft right now, let’s go take a look at it. It has some boilerplate information about privacy but it’s incomplete. When we get down to the bottom all of these questions are incomplete. I have two important things to say about this. One is don’t fake it, don’t borrow from somebody else, and don’t just write something up that sounds good. The other thing is get a lawyer. This information is important and someday if you get sued, you want to have this be rock-solid. So once you’ve gotten a lawyer and you’ve gotten some good information on this page then you can come back to this page and change the status from draft to published. We’re going to see this in one more place in just a minute. The last setting is for Sharing buttons. At the top here you can connect your site to your sharing network. You can connect to Facebook and Twitter, et cetera. And once you’ve done that you can choose which services you want on your posts, pages et cetera. I’m going to add Print, and Email, and Facebook. You can choose button styles. We’ll go with official buttons. There’s a sharing label and then you get to choose on which pages you see them. Now products already have these links because your theme built them, however, posts and pages do not. So let’s Save Changes and go look at a post. You’ll find them at the bottom of the post and they look like this, and they work like this. Now again these buttons are entirely optional. An SEO expert will tell you that they’re incredibly valuable but if you don’t want them you don’t have to have them. I’m going to take mine right back off. Now that we’ve been through the settings I’m going to take a look at the customizer. Now most of these areas we’ve been through quite thoroughly. We went through the Theme Pptions and the Site Identity. Colors simply chooses a background color, which you can’t see in my screen here because it’s too narrow. On a very wide monitor you would see colored bars on either side of my store and right now they’re gray. You can set them to any color you wish. Optionally you could use a background image. There’s something very important under WooCommerce that I need to look at with you and that’s the Store notice. If enabled this text will be shown site-wide. You can use it to show events or promotions to visitors. Right now it says, This is a demo store for testing purposes, no order shall be fulfilled. I’m going to enable that and I’m going to leave it enable on mine because mine is a demo and will never be a real store but the message doesn’t have to be that this is a demo store. You could draw attention to a sale or anything else you wish. I also want to draw your attention to the Checkout. There are some fields on here that aren’t entirely necessary. For example, the Company Name field, you could make it hidden or required, Address line and the Phone field. You can optionally highlight required fields with an asterisk. Now it’s off and now it’s back on, and remember when I mentioned that we would come back to the privacy policy. This is where you choose where it links and here’s some text, in addition to that page, and it appears right here above the Place Order. Now you’ll note that there’s a link here to the privacy policy page and that is created by this short code. If your privacy policy page is still in draft then this link is not going to work and it won’t look good at all. So I would suggest either, not having this privacy policy here or changing it slightly so that it doesn’t link. There’s also a Terms and Conditions option. You can set it to any page. There isn’t a Terms and Conditions page right now but if you set it to one then this text also appears. Now all of these things are entirely optional but I recommend that you read through them and understand how they work. Now our site is done but before I let you go, I’d like to review a little bit of what we covered. We started by setting up hosting and a domain name with SiteGround, but we also used a special deal from WinningWP.com to get a discount and help support videos like this. Our theme comes from Array Themes and it’s called Latest. We also depend quite heavily on Jetpack. There are some great connector plug-ins, specifically for WooCommerce, the e-commerce plug-in that we use that helps with taxes and shipping. we also use Stripe as our primary credit card processor. It works extremely well and comes built into WooCommerce. Now let’s take a look at some of the more important things on the site that we built. We always want to provide quick and easy access to people’s own account information and the cart. So right here in the top nav we have access to our cart and then also in this nav we have access to our cart and that one sticks with us as we scroll, and we even have a third one on this page, in the sidebar. Having quick and easy access to the cart makes it easy for people to see what they have and what they can buy right now. Any barrier you can remove to people buying your products will increase sales. We also made sure that we had a big beautiful header. People like to have attractive things at the top of the site. Building off that we put in big, beautiful pictures for some of our categories. We want to entice people to click on these. And on our homepage we have a variety of listing types. There’s featured products, newest products, sale products and bestsellers, all of these things will appeal to different people. One more extremely important thing on this page is the Shop menu item. Not only can you click on it to go to the store but it provides quick, direct access to specific categories. Again the fewer times you make people click to get to what they want, the more likely they are to buy. Now that said, if they do simply click on the Shop button, we also have this wonderful sort tool, which helps them find exactly what they want. Additionally our theme provides for us some great widgets, like this Filter by price, to help people narrow down what they’re looking for and what’s great about it is it works on whatever page you’re looking at. Also in every sidebar we have a widget for product categories. This is very similar to the drop-down menu under the Shop button. The Recently Viewed widget is really slick because it helps people get back to something they just saw a few minutes ago but can’t quite remember where it was they saw it. We also created a Contact Us page so that people can get a hold of us and ask questions about the products. You always want to be available to your customers. Another tool we included was MailChimp email lists. If you can get your customers on an email list and communicate with them regularly, they’re far more likely to come back and buy a second time. So people can sign up both here in the sidebar, as well as on the Checkout page. If we add a product to our cart and then View cart and go to Proceed to checkout, you’ll see that they can subscribe right here. Something else we covered was coupon codes. People are far more likely to buy something if they think they’re getting a deal. So if you create a coupon code and make it available, they’re probably going to buy. There are two more very important elements that we covered. We covered SEO using the Yoast tool and if we look at a product, you’ll see that we can edit how it appears on Google and the opposite twin of SEO is Statistics, both Google Analytics, Jetpack Stats, as well as Google Search Console. These things let you know what people are actually doing on your site. That knowledge can help you change your site to fit what they want. The store I built here is for camping gear but you can use this model to sell anything. When you’re done with your store and it’s live please come back and make a comment here below it on YouTube. We’d love to see the stores that you make.

Lihat lebih banyak video …

* Sejauh ini yang terbaik untuk platform yang dapat digunakan untuk membuat situs eCommerce, menurut pendapat kami, adalah Shopify (bagus untuk mereka yang belum merasa nyaman dengan WordPress, ingin menjaga segala sesuatunya sederhana, dan tidak cenderung menginginkan apa pun selain norma di kemudian hari) dan WordPress (sedikit lebih banyak dari kurva pembelajaran awal dari Shopify, tetapi jauh lebih dapat disesuaikan) – baca lebih lanjut tentang perbandingan di sini.

Apa pun untuk ditambahkan?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map