Cara Membuat Kedai Dalam Talian yang Hebat dengan WooCommerce, Divi dan SiteGround (2021 Ogos)

Lebih 74 juta laman web bergantung pada platform WordPress untuk menjadi tuan rumah blog mereka, menjual produk mereka atau hanya menulis renungan harian mereka untuk dilihat oleh dunia. Apabila anda mula membina laman web e-dagang anda pasti mempunyai banyak pilihan untuk dibuat, dan WordPress mengaitkannya.

Yang paling menonjol platform e-dagang adakah anda akan memilih? Adakah anda merancang untuk mengambil tema untuk menjual produk anda atau adakah orang yang boleh anda bayar untuk membina laman web dari awal? Apa yang anda rancangkan untuk jual melalui laman web e-dagang anda?

Catatan editor: Catatan ini pada mulanya diterbitkan pada 15 Januari 2015 dan telah diperbaharui sepenuhnya dan dikemas kini untuk ketepatan dan komprehensif.

Terdapat ribuan hingga berjuta-juta tema WordPress untuk dipilih semasa anda mencari struktur frontend dan backend untuk mula menjual secara dalam talian. Hampir sama dengan hosting (tetapi kami lebih suka SiteGround or Bluehost).

Tema terbaik merangkumi alat pengurusan e-dagang yang cepat dan mudah supaya anda dapat memuat naik produk dan menguruskan perkara seperti diskaun, ganjaran, butang dan halaman produk. Tema anda juga merupakan perkara pertama yang akan dilihat orang ketika mereka melayari laman web anda. Ini membimbing mereka melalui proses dan benar-benar membawa perbezaan antara seseorang yang berpuas hati dengan pengalaman atau tidak.

Ringkasnya, tema WordPress sangat penting, dan Divi Tema WordPress dari Tema Elegant adalah pilihan yang agak menarik untuk anda pertimbangkan. Itu dapat digunakan untuk laman web perniagaan standard, tetapi juga termasuk integrasi untuk proses penjualan e-dagang dan penjualan cepat. Mari belajar bagaimana membuat kedai dalam talian dengan Divi Tema WordPress.

Dapatkan Domain dan Hosting Anda Pertama

💡Langkah pertama dalam proses pembuatan laman web adalah merebut akaun hosting, nama domain dan memasang WordPress di laman web ini. Divi tidak berbeza. Terdapat banyak cara untuk mendapatkan hosting dan nama domain, tetapi secara peribadi saya fikir SiteGround adalah salah satu pilihan yang paling selamat dan boleh dipercayai. (Untuk keterangan lebih lanjut, periksa lengkap kami SiteGround mengkaji).

Apa yang sangat keren ialah SiteGround menawarkan khusus berjaya WooCommerce hosting pakej perkhidmatan dengan hampir semua yang anda perlukan untuk mula menjual secara dalam talian. Di dalam pakej, anda boleh memilih salah satu Rancangan StartUp untuk pemula, Rancangan GrowBig untuk mengembangkan perniagaan, atau GoGeek untuk ditubuhkan WooCommerce kedai.

Masing-masing menawarkan ciri canggih untuk mengoptimumkan ciri anda WooCommerce laman web dengan harga yang berpatutan.

Walaupun begitu, perkhidmatan hosting yang sangat kami sarankan Divi WooCommerce kedai adalah BlueHost. Walaupun ciri-ciri di sini tidak sepadan dengan SiteGroundAnda masih dapat WooCommerce-fokus hosting melalui pakej e-dagang WordPressnya. Rancangan dapat menangani dengan selesa a Divi WooCommerce kedai, tetapi sayangnya, anda tidak akan mendapat perkhidmatan terurus.

???? Sekarang, demi kejelasan, mari kita teruskan SiteGround...

Bagaimana Anda Bermula?

Pergi ke SiteGround Diuruskan WooCommerce hosting halaman, pilih rancangan yang sesuai, dan klik Dapatkan Rancangan.

Pada pendapat saya, yang Pelan GoGeek nampaknya pilihan yang paling sesuai kerana menyokong tanpa had WooCommerce laman web dengan keupayaan e-dagang maju. Selain daripada kekuatan pelayan yang lebih banyak, anda mendapat sokongan keutamaan, pementasan WordPress, sandaran atas permintaan, dan sumber super chacher, serta pemindahan laman percuma dan Cloudflare CDN, antara ciri-ciri lain.

???? Dan mengenai peruntukan sumber, rancangan ini menampung:

  • Peti mel 6GB
  • Storan Pangkalan Data 1 GB
  • Simpanan SSD
  • Pemindahan data yang tidak dimeterai
  • Ruang storan 30GB
  • Sehingga 100,000 lawatan bulanan

Perlu diingat bahawa perkhidmatan ini bermula pada $ 11.95 sebulan, dan sangat serupa dengan cara anda memasang laman WordPress biasa pada akaun hosting BlueHost.

Tetapi ingat, itu harga istimewa untuk pemula. Jangkakan ia akan meningkat menjadi $ 34.95 dalam pembaharuan masa depan, yang masih merupakan caj yang berpatutan jika anda mempertimbangkan semua ciri yang anda dapat dalam jangka masa panjang.

Sekarang, setelah anda memilih rancangan pilihan anda, SiteGround akan mengarahkan anda ke halaman pendaftaran domainnya. Sekiranya anda sudah memiliki domain, pilih pilihan kedua dan masukkan butirannya. Jika tidak, teruskan dengan pendaftaran nama domain baru pada $ 15.95 setahun.

Selanjutnya adalah peringkat akhir, di mana anda memilih pilihan hosting pilihan anda, serta memasukkan maklumat pembayaran dan maklumat peribadi anda, sebelum membuat akaun.

Sudah tentu, ini adalah perkara asas yang pernah anda kendalikan sebelumnya. Oleh itu, anda tidak perlu menghadapi masalah untuk memasukkan nombor telefon, negara, nama, e-mel, kata laluan akaun, dll.

Bahagian pembayaran menghendaki anda memasukkan butiran kad kredit anda. Anda boleh meneruskannya Cari, MasterCard or Visa

Namun, dan agak menarik, SiteGround tidak menyenaraikan PayPal, walaupun semakin popular di kalangan mereka WooCommerce peniaga. Tetapi, syukurlah, ternyata mereka dapat menerima pembayaran PayPal, walaupun secara tidak langsung.

Sekiranya ini adalah mod pilihan anda, biarkan bidang kosong dan hubungi SiteGroundejen penjualan melalui alat sembang langsung. Mereka akan membantu anda menyelesaikan proses melalui PayPal.

Bahagian terakhir mengandungi beberapa pilihan untuk perkhidmatan hosting anda, termasuk lokasi pusat data pilihan anda, ditambah tempoh langganan.

Sekarang, untuk meminimumkan jarak pemindahan data antara Sitegroundpelayan dan anda WooCommerce pelawat laman web, pilih lokasi pusat data yang paling dekat dengan kawasan pasaran sasaran anda.

Kemudian pilih perkhidmatan tambahan yang anda mahu sertakan dalam pakej anda, dan voila! Itu sahaja yang diperlukan untuk menubuhkan a Siteground akaun.

Setelah selesai, log masuk ke akaun anda dan terus ke kawasan cPanel anda. Anda akan menemui pemasang automatik WordPress lalai. Oleh itu, pilih, masukkan butiran log masuk WordPress anda, dan tekan butang pasang.

Anda akan melihat proses pemasangan WordPress memerlukan beberapa saat kerana semuanya automatik. Dan setelah semuanya disiapkan, SiteGround akan memberi anda nama domain yang sesuai untuk diakses jika anda ingin mengubah sesuatu di bahagian belakang laman web anda.

Membuat Kedai Dalam Talian Anda Dengan Divi

Apa itu Divi?

Baiklah, jika anda belum mencubanya, saya yakin anda sudah pernah mendengarnya. Divi tidak biasa WooCommerce tema. Sebenarnya, ini adalah salah satu tema WordPress yang paling popular di Tema Elegant. Dan yang menarik, Divi is Tema Elegantproduk unggulan.

Jadi, apa yang istimewa dengan tema ini? Dan adakah perkara yang luar biasa Divi's WooCommerce?

Tidak seperti tema WordPress biasa, Divi lebih merupakan pek komprehensif. Ini bermaksud menggabungkan ciri tema standard dengan fungsi tambahan yang sangat berguna Divi WooCommerce kedai.

apa yang divi

Jangan salah faham. Walaupun Divi's WooCommerce sokongan adalah fokus utama di sini, temanya mampu lebih daripada itu. Pada asasnya, Divi dapat disatukan dengan lancar dengan semua jenis laman web, berkat susun atur laman webnya yang luas. Bukan hanya e-dagang.

Kemudian untuk menyelesaikannya, Divi dilengkapi dengan plugin pembangun halaman WordPress sendiri yang intuitif. Anda boleh menggunakannya untuk menyesuaikan secara bebas Divi WooCommerce simpan tanpa pengekodan sama sekali.

Malah, Divi dikembangkan untuk pemula. Oleh itu, anda boleh menjumpai panel kawalan yang rapi dengan hampir tidak ada keluk pembelajaran. Hanya memerlukan beberapa minit untuk mengetahui keseluruhannya Divi ekosistem, siapkan, dan sesuaikan Divi's WooCommerce susun atur.

???? Oleh itu, pada akhirnya, anda akan dapat memanfaatkannya Divi:

  • Susun atur susun atur untuk jenis laman web WordPress, termasuk WooCommerce kedai dalam talian.
  • Pembangun Halaman yang mudah digunakan, yang menyediakan pelbagai elemen laman web dan kemampuan reka bentuk.
  • Proses penyesuaian yang fleksibel tanpa sebarang bentuk pengekodan. Malah pemula dapat mengatur dengan selesa dan berfungsi sepenuhnya Divi WooCommerce kedai.
  • Integrasi WordPress secara langsung. Divi adalah salah satu daripada beberapa tema WordPress luaran yang dapat dipasang dengan lancar tanpa tweak yang rumit.
  • Dioptimumkan e-dagang WooCommerce template.

Divi Drag and Drop Page Builder

Seperti yang telah kita katakan, Divi terdapat dalam dua rasa yang berbeza-beza. Apabila anda membayar keahlian pada Tema yang elegan, anda akan menemui standard Divi Tema di papan pemuka, disertakan dengan Divi Pemalam Pembangun Halaman WordPress.

Tetapi, perlu diperhatikan bahawa pembina ini tidak terikat secara eksklusif dengan Divi Tema. Ia hadir sebagai pemalam tambahan untuk setiap tema yang diperoleh dari Tema Elegant.

Yang mengatakan, Divi Pembangun Halaman WordPress adalah editor drag-and-drop dengan kemampuan penyesuaian lanjutan. Ia membolehkan anda memindahkan dan menentukan elemen, lajur, baris, dan modul tanpa pengalaman pengekodan. Dengan kata lain, ia adalah jenis pembina a Divi WooCommerce pemula berharap dapat.

divi tetapan

Tetapi, jangan salah. walaupun Divi Pembangun Halaman menyasarkan pemula, ini adalah editor yang juga memudahkan pembangun yang berpengalaman. Mereka dapat menggabungkan ciri visualnya secara sistematik dengan kawalan CSS untuk mendorongnya Divi WooCommerce laman web ke peringkat seterusnya.

Namun, fikirkanlah, anda tidak memerlukan pembangun untuk merancang semua elemen di dalamnya Divi WooCommerce menyimpan. Anda boleh bergantung pada fungsi visual sahaja.

Dan anda tahu apa?

Divi malah berusaha menjadikan keseluruhan proses lebih mudah dengan melabelkan kode warna modul susun aturnya.

Dan yang lain, peruntukan lain yang penting di sini adalah Divipenyederhanaan keseluruhan proses penyesuaian susun atur. Sekiranya anda ingin memperkenalkan bahagian baru, misalnya, satu klik harus dilakukan. Kemudian menduplikasi, membuang, dan memasukkan modul untuk anda Divi WooCommerce kedai hanya akan membawa anda beberapa klik butang.

Sementara itu, DiviTetingkap penyuntingan akan memaparkan perubahan susun atur laman web anda dalam masa nyata. Anda akan dapat mengesan setiap penyesuaian secara visual, dan melihat bagaimana ia mempengaruhi keseluruhan reka bentuk pandangan anda Divi WooCommerce kedai.

Pra-reka Divi WooCommerce Susun atur Laman Web

Untuk menyelamatkan anda dari proses yang sangat menyakitkan dalam membuat laman web dari awal, the Divi Tema WordPress dilengkapi dengan pelbagai templat laman web yang telah dirancang. Dan kerana anda mungkin memerlukan pilihan susun atur yang berbeza dari templat yang sama, Divi menawarkan reka bentuk laman webnya sebagai pek yang komprehensif. Akibatnya, anda mendapat susun atur dan warna templat yang berbeza-beza.

Baiklah, untuk lebih tepat, Divi menyediakan kira-kira 7-8 susun atur yang telah dirancang sebelumnya pada setiap pek laman web. Memandangkan masing-masing dilengkapi sepenuhnya, anda boleh menggunakan susun atur dengan mudah tanpa menyusun semula struktur yang mendasarinya. Anda hanya beberapa perubahan di sana sini.

divi susun atur laman web

Sekarang untuk mencari diri anda yang paling sesuai untuk anda WooCommerce kedai dalam talian, cukup tatal pelbagai kategori laman web di Divi Tema. Atau sebagai alternatif, gunakan kata kunci untuk mencari semua pilihan sekaligus.

Baiklah, tidak perlu lama untuk mengenal pasti yang sesuai Divi susun atur kedai dalam talian. Anda hanya perlu menggabungkannya dengan WooCommerce, dan anda akan menuju ke laman web e-dagang WordPress yang menarik.

Melangkah, satu perkara yang sangat luar biasa yang anda akan perhatikan ialah Divi tidak menumpukan pada penampilan sahaja. The WooCommerce susun atur yang disertakan dengan Divi Tema telah dibina dengan mempertimbangkan fungsi.

Jadi, selain halaman kedai biasa seperti pembayaran, produk, dan troli, Divi merangkumi modul e-dagang secara lalai. Lebih khusus lagi, anda mendapat bahagian seperti produk unggulan, item penjualan, dan banyak lagi.

Is Divi Sesuai untuk WooCommerce?

Semua perkara yang dianggap, Divi semakin popular kerana pada dasarnya penyelesaian tema WordPress semua-dalam-satu.

Gabungan, yang Divi Pembina Halaman dan Divi Tema menawarkan menyediakan hampir semua yang anda perlukan untuk menyiapkan sebarang jenis laman WordPress. Dan itu termasuk berfungsi sepenuhnya WooCommerce simpan dengan semua keupayaan e-dagang teras.

???? Secara ringkas, Divi adalah pilihan yang patut dipertimbangkan untuk anda WooCommerce laman web kerana:

  • Anda boleh menyesuaikan diri anda WooCommerce laman web melalui penyunting visual drag-and-drop.
  • Divi membolehkan anda menyimpan tweak anda sebagai elemen global di semua susun atur.
  • Ia dilengkapi dengan lebih daripada 20 susun atur laman web prabentuk yang dirancang dengan baik.
  • Anda boleh mengeksport susun atur dengan mudah, dan seterusnya, memanfaatkannya di laman web lain.
  • Anda boleh merancang WooCommerce simpan dengan pelbagai lajur, baris, dan elemen kandungan.
  • Semua WooCommerce susun atur telah dioptimumkan untuk peranti mudah alih.
  • Seperti MS Word, mengedit kandungan teks semudah mengklik kemudian menaip.
  • Seluruh proses penyesuaian laman dilacak dalam waktu nyata, dengan itu memberikan tinjauan langsung semua perubahan reka bentuk.
  • WooCommerce susun atur disertakan dengan halaman dan modul kedai dalam talian utama.

Langkah 1: Daftar dengan Tema Elegan untuk Mendapatkan Akses ke Divi

Mula dengan pergi ke Halaman produk Tema yang elegan bagi Divi Tema WordPress. Halaman ini menawarkan pilihan untuk demo tema dan butang muat turun cepat. Tema Elegant menjual temanya menggunakan struktur pembayaran tahunan atau satu kali yang bagus untuk pembangun yang mempunyai banyak laman web pelanggan atau orang yang menjalankan banyak laman web e-dagang. Anda tidak boleh membeli hanya satu tema, tetapi tema Pelan Peribadi dengan harga $ 67 per tahun adalah serupa dengan yang mungkin anda bayar untuk tema biasa, dan anda boleh menghentikan pembayaran tahunan jika anda tidak memerlukan sokongan lagi. Jangan ragu untuk bermain-main dengan tema sebelum anda membuat pembayaran.

Divi tema WordPress

Langkah 2: Pasang Divi di Laman WordPress Anda

Setelah anda mendaftar, klik butang muat turun untuk tema. Ini meletakkan tema sebagai fail zip di komputer anda. Pergi ke tab Penampilan di bahagian belakang laman WordPress anda, dan klik pada pilihan Tema.

Tema Wordpress baru

Langkah 3: Klik pada butang Tambah Baru

Wordpress menambah tema baru

Klik pada butang Muat Naik Tema. Cari dan muat naik fail zip tema. Lakukan proses untuk mengaktifkan tema sepenuhnya dan kemudian anda seharusnya dapat melihat tema di bahagian depan laman web anda.

Muat naik tema Wordpress

Langkah 4: Siapkan Anda WooCommerce Kedai

Jika anda pergi ke Divi Halaman dokumentasi tema anda akan menjumpai hampir setiap alat dan ciri yang boleh anda gunakan untuk tema tersebut, tetapi kami akan memberi tumpuan terutamanya untuk membuat laman web e-dagang. . Divi tema serasi sepenuhnya dengan WooCommerce supaya anda dapat memaparkan semua produk anda dari itu.

Apa yang mengagumkan adalah permulaannya SiteGround pendaftaran sudah dipasang WooCommerce di laman web WordPress anda, jadi anda tidak perlu risau untuk memasangnya atau menyiapkannya. Semestinya sudah tersedia di papan pemuka anda.

Langkah 5: Tambahkan Produk Pertama Anda ke WooCommerce

Anda secara teknikal sudah mempunyai semua penyediaan laman web e-dagang, tetapi kami sebenarnya ingin menambahkan beberapa produk agar kelihatan seperti laman web e-niaga di bahagian depan. Pergi ke papan pemuka WordPress anda, klik pada tab Produk di bawah WooCommerce dan klik pada item Tambah Produk.

WooCommerce tambah produk baru

Langkah 6

Ini memunculkan halaman produk baru untuk anda isi. Ini kelihatan sangat mirip dengan mana-mana penyunting halaman WordPress, kecuali anda dapat menambahkan nama produk, keterangan dan gambar yang ditampilkan sehingga orang dapat melihat seperti apa produk tersebut di laman web anda.

E-dagang menambah medan produk baru

Langkah 7: Terokai WooCommerce Ciri-ciri

Sekiranya anda menatal ke bawah di bawah kawasan penerangan, anda akan menemui segala kemungkinan WooCommerce ciri untuk bermain-main dengan. Jangan ragu untuk mengubah suai perkara seperti nombor SKU, inventori, harga, penghantaran dan atribut. Ciri-ciri itu terlalu luas untuk saya gariskan semuanya di sini, tetapi anda boleh pergi ke WooCommerce halaman dokumentasi untuk memahami semua yang anda boleh sediakan di laman web e-dagang anda.

WooCommerce ciri-ciri

Langkah 8: Buat Laman Utama

Inti keseluruhannya adalah untuk buat laman utama atau halaman biasa yang menampilkan semua produk anda ketika orang muncul ke laman web anda. Oleh itu, anda harus pergi ke Halaman> Tambah Baru di sebelah kiri papan pemuka WordPress anda.

Halaman baru Wordpress

Langkah 9: Tambahkan Tajuk untuk Anda Divi Page

Buat tajuk untuk halaman anda. Klik butang Use Page Builder di bahagian atas, dan ketuk pada area Insert Modules untuk memasukkan tajuk lebar penuh. Anda tidak perlu memilih tajuk lebar penuh, tetapi kami akan mengikuti tutorial ini.

Wordpress pembangun halaman

Langkah 10

Klik butang Header Lebar Penuh.

Tambahkan pengepala

Langkah 11

Isi butiran untuk Tajuk Laman web anda, teks Subtajuk dan Warna Teks. Anda bahkan boleh menukar Label Pentadbiran, yang terutama untuk rujukan anda sendiri. Tekan butang Simpan apabila selesai.

Penyesuaian tajuk

Langkah 12

Ketuk pada tiga bar di sebelah kiri modul tajuk Lebar Penuh untuk menukar lebih banyak tetapan.

WordPress woocommerce persediaan

Langkah 13

Di sini anda dapat memberikan warna latar yang bagus pada tajuk dan bahkan menyertakan video untuk syarikat anda.

Ketik butang ini di sekitar

Langkah 14

Setelah pengepala selesai, kita boleh memasukkan modul e-dagang dengan mengklik pada kawasan Masukkan Tiang.

Persediaan e-dagang Wordpress

Langkah 15

Pilih berapa banyak lajur yang anda mahukan, kemudian klik pada pilihan Masukkan Modul yang muncul. Pilih butang Shop di bahagian bawah.

Persediaan e-dagang Wordpress

Langkah 16

Jangan ragu untuk mengubah cara anda memaparkan produk anda. Oleh itu, anda mungkin ingin menunjukkan produk terbaru anda, bersama dengan 12 item di halaman, beberapa lajur dan bagaimana anda mahu produk tersebut dipesan. Klik butang Simpan.

Persediaan e-dagang Wordpress

Langkah 17: Pratonton dan Terbitkan

Setelah selesai, anda boleh menekan butang Pratonton atau Terbitkan untuk melihat perubahan di bahagian depan. Seperti yang anda lihat, produk muncul dengan baik, dan anda selalu boleh masuk semula untuk menukar produk atau tetapan etalase di backend WordPress. Tahniah!

Sekiranya anda mempunyai pertanyaan mengenai penyediaan Divi tema WordPress, sila beritahu kami di bahagian komen di bawah.

Kesimpulan

Dan hanya itu yang diperlukan untuk mendapatkan anda Divi WooCommerce kedai dalam talian siap dan beroperasi menggunakan a SiteGround akaun hosting.

Melangkah ke hadapan, anda boleh yakin bahawa SiteGround akan menangani semua perkara teknikal kritikal seperti kemas kini WordPress dan WooCommerce keselamatan. Itulah perbezaan asas antara diurus WooCommerce hosting dan penyelesaian hosting bersama biasa. Oleh itu, ia memberi anda masa dan ruang yang sangat diperlukan untuk fokus pada anda WooCommerce pengurusan stor.

Dan seperti yang telah kita lihat, itu semestinya mudah dengan Divi tema. Anda sentiasa boleh mengakses Divi WooCommerce susun atur dari backend WordPress anda untuk menyesuaikannya lebih jauh. Sekiranya anda mahu, anda bahkan boleh mengubah keseluruhan reka bentuk secara keseluruhan dengan beralih ke susun atur lain yang dapat menangani WooCommerce simpan juga. Pilihan adalah milik anda.

Sekiranya anda mempunyai pertanyaan mengenai penyediaan Divi Tema WordPress, sila beritahu kami di bahagian komen di bawah.

Divi
Rating: 5.0 - Ulasan oleh

Catalin Zorzini

Saya seorang blogger reka bentuk web dan memulakan projek ini setelah menghabiskan beberapa minggu berjuang untuk mengetahui yang mana platform e-dagang terbaik untuk diri saya sendiri. Lihat semasa saya 10 pembangun laman web e-dagang teratas.