Cara Membuat Kedai Dalam Talian yang Hebat dengan WooCommerce, Divi dan SiteGround (Jul 2020)

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 pengarang: Catatan ini pada mulanya diterbitkan pada 15 Januari 2015 dan telah diperbaharui dan dikemas kini sepenuhnya 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. Ini dapat digunakan untuk laman web perniagaan standard, tetapi juga termasuk integrasi untuk penjualan e-commerce dan proses penjualan cepat. Mari belajar bagaimana membuat kedai dalam talian dengan tema Divi 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 saya secara peribadi berpendapat SiteGround adalah salah satu pilihan yang paling selamat dan boleh dipercayai. (Untuk keterangan lebih lanjut, periksa lengkap kami Kajian SiteGround).

Apa yang sangat menarik ialah SiteGround menawarkan yang khusus dikendalikan hosting WooCommerce 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 kedai WooCommerce yang mapan.

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

Walaupun begitu, perkhidmatan hosting lain yang sangat kami sarankan untuk kedai Divi WooCommerce adalah BlueHost. Walaupun ciri-ciri di sini tidak sepadan dengan SiteGround, anda masih mendapat hosting yang fokus WooCommerce melalui pakej e-commerce WordPressnya. Rancangannya dapat mengendalikan kedai Divi WooCommerce dengan selesa, tetapi sayangnya, anda tidak akan mendapat perkhidmatan terurus.

???? Sekarang, demi kejelasan, mari kita lanjutkan dengan SiteGround…

Bagaimana Anda Bermula?

Pergi ke Hosting WooCommerce Terurus SiteGround halaman, pilih rancangan yang sesuai, dan klik Dapatkan Rancangan.

Pada pendapat saya, yang Pelan GoGeek nampaknya merupakan pilihan yang paling sesuai kerana menyokong laman web WooCommerce tanpa had dengan kemampuan e-commerce 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 peniaga WooCommerce. Tetapi, syukurlah, ternyata mereka dapat menerima pembayaran PayPal, walaupun secara tidak langsung.

Sekiranya ini adalah mod pilihan anda, maka kosongkan bidang dan hubungi ejen jualan SiteGround 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 pelayan Siteground dan pelawat laman WooCommerce anda, 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 membuat akaun Siteground.

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 bukan tema WooCommerce biasa. Sebenarnya, ini adalah salah satu tema WordPress yang paling popular di Tema Elegant. Dan yang menarik, Divi adalah Tema Elegantproduk unggulan.

Jadi, apa yang istimewa dengan tema ini? Dan adakah yang luar biasa mengenai WooCommerce Divi?

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

apa itu divi

Jangan salah faham. Walaupun sokongan WooCommerce Divi adalah fokus utama di sini, temanya mampu lebih daripada itu. Pada dasarnya, 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 hadir dengan plugin pembangun halaman WordPress sendiri yang intuitif. Anda boleh menggunakannya untuk menyesuaikan kedai Divi WooCommerce secara bebas tanpa pengekodan sama sekali.

Sebenarnya, Divi dikembangkan untuk pemula. Oleh itu, anda boleh menjumpai panel kawalan yang rapi dengan hampir tidak ada keluk pembelajaran. Hanya memerlukan beberapa minit untuk mendapatkan keseluruhan ekosistem Divi, menyiapkannya, dan menyesuaikan susun atur WooCommerce Divi.

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

  • Susun atur susun atur untuk sebarang jenis laman web WordPress, termasuk kedai dalam talian WooCommerce.
  • 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 dan menyesuaikan kedai Divi WooCommerce yang berfungsi sepenuhnya dengan selesa.
  • Integrasi WordPress secara langsung. Divi adalah salah satu daripada beberapa tema WordPress luaran yang dapat dipasang dengan lancar tanpa tweak yang rumit.
  • Templat WooCommerce yang dioptimumkan e-dagang.

Pembangun Halaman Seret dan Lepas Divi

Seperti yang telah kami katakan, Divi hadir dalam dua rasa yang berbeza-beza. Apabila anda membayar keahlian pada Tema yang elegan, anda akan menemui Tema Divi standard di papan pemuka, disertakan dengan pemalam Divi WordPress Page Builder.

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

Yang mengatakan, Pembangun Halaman WordPress Divi adalah penyeret dan lepas 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 Divi WooCommerce pemula berharap dapat.

tetapan divi

Tetapi, jangan salah. Walaupun Divi Page Builder mensasarkan pemula, itu adalah editor yang juga memudahkan pembangun yang berpengalaman. Mereka dapat menggabungkan ciri visualnya secara sistematik dengan kawalan CSS untuk mendorong laman web Divi WooCommerce mereka ke tahap seterusnya.

Namun, fikirkanlah, anda tidak memerlukan pembangun untuk merancang semua elemen di kedai Divi WooCommerce anda. 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 penyederhanaan keseluruhan proses penyesuaian susun atur Divi. Sekiranya anda ingin memperkenalkan bahagian baru, satu klik harus dilakukan. Kemudian menduplikasi, membuang, dan memasukkan modul untuk kedai Divi WooCommerce anda hanya akan membawa anda beberapa klik butang.

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

Susun atur Laman Web Divi WooCommerce yang telah dirancang sebelumnya

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

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

susun atur laman web divi

Sekarang untuk mencari yang terbaik untuk kedai dalam talian WooCommerce anda, cukup tatal pelbagai kategori laman web di Tema Divi. 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 mengintegrasikannya dengan WooCommerce, dan anda akan terus membina laman web e-dagang WordPress yang menarik.

Melangkah terus, satu perkara yang sangat luar biasa yang anda perhatikan ialah Divi tidak menumpukan perhatian pada penampilan sahaja. Susun atur WooCommerce yang disertakan dengan Tema Divi juga telah dibina dengan mempertimbangkan fungsi.

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

Adakah Divi Sesuai Untuk WooCommerce?

Semua perkara yang dipertimbangkan, Divi semakin popular kerana pada asasnya merupakan penyelesaian tema WordPress semua-dalam-satu.

Digabungkan, Pembina Halaman Divi dan Tema Divi menawarkan menyediakan hampir semua yang anda perlukan untuk menyiapkan sebarang jenis laman WordPress. Dan itu termasuk kedai WooCommerce yang berfungsi penuh dengan semua keupayaan e-commerce utama.

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

  • Anda boleh menyesuaikan laman web WooCommerce anda 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 kedai WooCommerce anda dengan pelbagai lajur, baris, dan elemen kandungan.
  • Semua susun atur WooCommerce 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.
  • Susun atur WooCommerce dilengkapi 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 untuk tema Divi 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.

Tema Divi 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: Sediakan Kedai WooCommerce Anda

Jika anda pergi ke Halaman dokumentasi Tema Divi 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. Tema Divi sepenuhnya serasi dengan WooCommerce supaya anda dapat memaparkan semua produk anda dari itu.

Apa yang mengagumkan ialah pendaftaran SiteGround awal sudah memasang 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-niaga, 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 menambah 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 Ciri-ciri WooCommerce

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

Ciri WooCommerce

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 Halaman Divi Anda

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.

Persediaan woocommerce WordPress

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 Tema Divi WordPress, sila beritahu kami di bahagian komen di bawah.

Kesimpulan

Dan hanya itu yang diperlukan untuk mendapatkan anda Divi Kedai dalam talian WooCommerce terus berjalan menggunakan akaun hosting SiteGround.

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 hosting WooCommerce yang dikendalikan dan penyelesaian hosting bersama biasa. Oleh itu, ia memberi anda masa dan ruang yang sangat diperlukan untuk fokus pada pengurusan kedai WooCommerce anda.

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

Sekiranya anda mempunyai pertanyaan mengenai menyiapkan tema Divi 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.