- Back to Home »
- Tutorial Membuat Website E-Commerce Menggunakan Wordpress
Posted by : Andi
Rabu, 09 Januari 2019
TUGAS SOFTSKILL MEMBUAT E-COMMERCE
Nama Kelompok: -Andi Yogaswara
-Dian Pramesti
-Khalidsyah
I. Cara Menginstall Wordpress dengan CPanel
#1 – Login CPanel
Silahkan masuk ke cPanel terlebih dahulu, caranya dengan mengetik link ini pada browser:
- http://pakarfakultas.com/cpanel, atau alternatifnya
- http://npakarfakultas.com:2082
Kemudian masukkan username dan password cPanel Hosting yang telah diberikan oleh penyedia Hosting.
Jika Anda menyewa hosting di Jagoanhosting, maka Anda akan langsung menerima informasi username dan password untuk login ke cPanel sesaat setelah aktivasi.
Detil info login tersebut terdapat pada – “Email Informasi Aktivasi Akun Hosting”.
#2 – Halaman Admin CPanel
Disini, silahkan cari aplikasi Softaculous pada halaman admin cPanel.
Klik dan Anda akan diarahkan pada halaman pilihan aplikasi website, pilih yang WordPress.
Alternatifnya, saat Anda masih berada di halaman depan admin cPanel ini, cari logo WordPress dengan huruf “W”.
Klik dan Anda akan akan langsung diarahkan pada halaman penginstalan WordPress.
#3 – Halaman Instalasi Softaculous
Klik tab INSTALL untuk membuka halaman form penginstalan WordPress.
#4 – Install WordPress
Isi data-data pada form penginstalan WordPress, dan pastikan isi dengan lengkap. Jika tidak, maka proses instalasi akan gagal.
Antara lain:
- Choose protocol, pilih salah satu http:// atau http://www, dan apabila domain Anda mendukung SSL, Anda bisa gunakan yang HTTPS. Namun jika Anda belum paham maksud dari penggunaan protokol ini, lebih baik untuk awal-awal pilih yang HTTP biasa saja.
- Choose domain, pilih domain yang akan diinstal WordPress.
- In directory, kosongkan saja.
- Site name, isi dengan nama atau judul situs Anda.
- Site description, berisi tagline atau penjelasan singkat akan situs Anda.
- Username, nama pengguna yang akan digunakan saat login ke halaman dashboard admin WordPress (tips, hindari penggunaan kata “ADMIN”).
- Password, kata sandi untuk login.
- Email, pastikan gunakan alamat email Anda yang masih aktif, karena nantinya segala notifikasi default yang berasal dari situs, akan dikirimkan ke alamat email ini.
Jika itu semua sudah diisi, klik tombol “INSTALL” yang terletak pada bagian bawah form untuk menjalankan proses instalasi.
PENTING!
Harap diingat, biasanya bagi yang pertama kali melakukan penginstalan, seringkali lupa mengosongkan kolom “IN DIRECTORY”, sehingga begitu proses instalasi selesai, begitu mencoba akses alamat situsnya, baammmm.. situsnya tidak menampilkan apa-apa, hal ini dikarenakan WordPress terinstal di sub directory, alih-alih di situs utama.
Sampai di sini, proses instalasi WordPress menggunakan Softaculous selesai.
II. CARA INSTALL WOOCOMMERCE DI WORDPRESS
LANGKAH 1
Hal pertama yang perlu Anda lakukan adalah menginstal plugin WooCommerce. Anda dapat men-download secara gratis dari library WordPress dan menguploadnya atau ikuti langkah-langkah berikut tentang cara untuk menginstall langsung dari area dashboard Anda.
Silahkan masuk area admin WordPress Anda dan langsung menuju ke menu Plugins » Add New, dan ketikkan kata kunci “WooCommerce” pada kolom pencarian disebelah kanan atas. Setelah muncul plugin WooCommerce dalam daftar silahkan klik tombol “Install Now”. Pastikan bahwa terdapat tulisan “By WooThemes” seperti gambar dibawah ini.
LANGKAH 2
Setelah proses instalasi selesai, silahkan klik “Activate”. Untuk mengaktifkan plugin WooCommerce.
LANGKAH 3
Anda kemudian bertemu dengan panduan untuk untuk pengaturan WooCommerce. Anda dapat melewatkan ini tetapi dalam tutorial ini, saya akan mengklik “Let’s Go“.
LANGKAH 4
Pada langkah “Page Setup” WooCommerce memberitahukan bahwa plugin akan membuat beberapa halaman untuk Anda secara otomatis dan ini penting untuk toko online Anda. Halaman yang akan di buat adalah Shop, cart, checkout, dan My Account. Klik “Continue” untuk membiarkan hal itu membuat ini untuk Anda.
LANGKAH 5
Di langkah pengaturan “Store Locale” WooCommerce membutuhkan informasi tentang dimana lokasi Anda (DKI Jakarta) dan mata uang (Indonesia Rp) yang Anda digunakan. Dan pilih satuan berat (kg) dan ukuran (cm). Kemudian klik “Continue.”
LANGKAH 6
Pada Langkah “Shipping & Tax” ini merupakan bagian pengiriman dan pajak. Anda dapat memilih apakah Anda menjual barang fisik kepada pelanggan atau bukan. Karena WooCommerce juga dapat digunakan untuk menjual produk digital dan download. Pada bagian ini saya akan memilih “Yes, I will be shipping physical goods to customers” dan mengabaikan pilihan tax. Kemudian klik “Continue”.
LANGKAH 7
Pada bagian “Payments” ini terdapat berbagai macam metode pembayaran seperti PayPal, Stripe, Bank Transfer, Check Payment dan COD (Cash on Delivery). Pada bagian ini saya lebih memilih untuk mengaktifkan PayPal, Bank Transfer dan Cash on Delivery, Anda bisa memilih sesuai keinginan Anda. Kemudian klik “Continue”.
LANGKAH 8
Di langkah terakhir dari proses instalasi WooCommerce ini Anda sudah bisa memulai untuk membuat produk pertama Anda. Pada bagian ini sebaiknya Anda klik link di bagian bawah untuk kembali ke dashboard WordPress Anda dan mulai menciptakan produk Anda disana. Klik pada link ”Return to the Dashboard WordPress”.
Dan sekarang Anda sudah berhasil menginstall WooCommerce di WordPress Anda. Toko WooCommerce Anda sekarang sudah siap untuk Anda konfigurasi dan membuat produk pertama Anda.
III. PENGATURAN WOOCOMMERCE
Pada menu WooCommerce ini Anda dapat melihat berbagai pengaturan untuk toko online Anda. Anda dapat melihat menu Order, Coupon, dan Report. Anda juga dapat menyesuaikan setingan dan menambahkan ekstensi baru.
SETTINGS
WooCommerce » Settings
Di bagian Settings inilah Anda dapat melakukan konfigurasi pada setiap aspek untuk toko online WooCommerce Anda, Tapi pada bagian ini Anda hanya perlu sedikit menambahkan konfigurasi karena sebagian besar konfigurasi sudah di lakukan pada saat proses instalasi yang bisa Anda lihat tutorial toko online bagian ke 2. Tapi pada bagian ini saya akan menjelaskan lebih rinci lagi untuk bagian settings.
Tab “General” mengurus informasi dasar toko Anda, termasuk mata uang Anda, dasar & lokasi penjualan, dan opsi tampilan.
Tab “Product” terdapat pengaturan untuk penyortiran kustom, tampilan default, pengukuran, dimensi produk thumbnail, manajemen stock, metode download, dan bahkan Ajax / non-Ajax saat menambah tombol cart disesuaikan di tab Produk.
Tab “Tax” metode perpajakan terdapat dibagian ini, tapi jika Anda ingin, Anda dapat menonaktifkan perpajakan di toko Anda.
Tab “Shipping” untuk mengkonfigurasi pengiriman, mengurus metode pengiriman dan model penentuan harga. Anda juga dapat mengaktifkan / menonaktifkan pengiriman pada zona tertentu, dan mengedit berbagai pilihan tampilan. Membatasi ketersediaan toko Anda hanya untuk negara-negara tertentu.
Tab “Checkout” Untuk mengatur dan menyesuaikan proses checkout: Anda dapat memilih lima sistem gateway pembayaran (pada bagian inilah Anda harus memasukkan rekening bank Anda), mengedit halaman, menambahkan halaman T & C, dan mengubah pelengkap URL.
Tab “Account” menunjukkan halaman untuk akun pelanggan dan pilihan untuk pendaftaran.
Tab “Email”, Anda dapat menyesuaikan semua dukungan yang berkaitan dengan pelanggan. Secara khusus, Anda dapat menyesuaikan semua pilihan pengirim untuk email WooCommerce yang dihasilkan, dan dapat mengatur warna background email.
Dan terakhir di tab “API” Anda dapat mengaktifkan API REST, Keys / Apps, dan Webhooks.
ORDERS
Menu : WooCommerce » Order
Halaman ini menampilkan daftar pembelian di toko online Anda saat ini dan pesanan. Jika Anda menjual produk digital, tidak ada banyak yang harus dilakukan di sini selain melihat produk apa yang dibeli. Tetapi jika Anda menjual dalam bentuk barang fisik, di sinilah Anda dapat mengatur produk apa yang Anda butuhkan untuk mengirim dan mengatur status pesanan sedang diproses (processing) atau ditunda (pending) dan masih banyak lagi.
COUPONS
Menu : WooCommerce » Coupon
WooCommerce memiliki beberapa pilihan yang dapat Anda gunakan untuk memberikan kupon untuk produk yang Anda jual di toko online Anda. Pada bagian pengaturan kupon ini Anda dapat menyesuaikan kupon diskon dan batas kupon diberikan, untuk lebih jelasnya silahkan lihat penjelasan dibawah ini.
Pada menu Tab “General” memungkinkan Anda untuk mengedit informasi dasar kupon: jenis kupon (keranjang diskon, keranjang persentase diskon, diskon produk, dan produk persentase diskon), nilai, pilihan pengiriman gratis, kupon perpajakan, dan tanggal kedaluwarsanya kupon.
Pada menu Tab “Usage Restriction” Anda dapat mengatur berapa minimal atau maximal jumlah uang pembeli harus berbelanja agar mendapatkan kupon. Untuk mengatur batasan penggunaan dari penggunaan bersama dengan kupon lainnya, centang kotak untuk digunakan individu saja (Individual use only). Dan terdapat pilihan untuk membatasi kupon berlaku pada produk dengan kategori tertentu atau untuk item tertentu. Dan yang terakhir, Anda juga dapat melarang alamat email tertentu untuk tidak bisa menggunakan kupon.
Pada menu Tab “Usage Limits” untuk menetapkan batas penggunaan per kupon atau per pelanggan.
REPORTS
WooCommerce » Report
WooCommerce juga mempunyai sistem pelaporan yang canggih. Anda dapat melihat diagram dan grafik penjualan, order, dan biaya pengiriman yang bisa Anda tampilkan dengan lebih dari lima periode waktu yang berbeda. Setiap grafik dapat dibatasi untuk penjualan produk tertentu, kategori produk, atau kupon. Pada tab Pelanggan, Anda dapat melihat akuisisi pelanggan Anda selama lima periode waktu yang sama. Pada tab terakhir, Anda juga dapat melihat berapa stock atau persediaan produk Anda. Semua data laporan ini dapat diekspor dalam file CSV.
SYSTEM STATUS
WooCommerce » Status Sistem
Menunjukkan semua informasi tentang situs Anda.Semua informasi belakang Anda – WooCommerce, server / PHP / MySQL / etc. versi, batas ukuran, dan banyak lagi – yang ditemukan di sini. Pada tab Tools pada halaman yang sama, Anda dapat menghapus cache website Anda untuk beberapa variabel, menginstal pilihan baru, dan reset pengaturan ke default.
ADD-ONS
WooCommerce » Add-ons
Bagian ini berisikan Extension atau plugin tambahan untuk WooCommerce. Dengan menambahkan plugin-plugin baru yang terdapat di bagian Extensions ini toko online WooCommerce Anda akan semakin kuat dengan fitur-fitur lebih. Di Extension para pengembang Plugin memungkinkan Anda untuk membeli ekstensi WooCommerce asli dan pihak ketiga dari toko Ekstensi mereka. Bahkan disitu Anda dapat membeli tema untuk toko online WooCommerce Anda.
IV. MENAMBAHKAN DAN MENGELOLA PRODUK BARU
CATEGORIES
Untuk menambahkan dan mengelola produk Anda di WooCommerce terdapat menu baru di sidebar admin WordPress Anda bernama “Products”. Untuk memulai pengaturan produk toko online Anda, pertama kali adalah membuat kategori untuk produk Anda. silahkan akses menu Products » Categories. Isi “Name” kategori sesuai dengan kategori produk Anda misal “Tshirt”.
PRODUCTS
Buat produk baru dengan klik menu Products » Add New, buat judul dan deskripsi singkat untuk produk Anda.
Data product
Dibawah area editor product terdapat pengaturan produk, Anda dapat memilih apakah jenis produk yang Anda jual, apakah produk “virtual” (mencentang opsi tersebut akan menghilangkan menu tab “Shipping”) dan jika opsi “download” (digital) Anda pilih akan terdapat kolom baru untuk upload file Anda.
Tab “General” untuk memasukkan harga produk, masukkan harga di bagian regular price. Jika Anda sedang mengadakan “Sale” silahkan masukkan harga sale di bagian sale price dan atur jadwal sale mulai sampai akhir.
Jika Anda menjual produk digital, maka Anda juga harus meng-upload file yang akan dibeli, menyesuaikan batas download (biarkan kosong untuk menandainya sebagai unlimited), download kadaluwarsa (biarkan kosong untuk tetap tersedia secara permanen), dan jenis file (standar / aplikasi / musik). Jenis file yang Anda pilih mempengaruhi markup schema.org untuk produk.
Tab “Inventory” Anda dapat menyesuaikan pilihan untuk mengelola stock atau persediaan Anda dengan memasukkan dalam kuantitas produk, status stock (in / out of stock), dan jika Anda ingin memungkinkan backorders. Selain itu, Anda dapat menandai produk yang dijual sebagai individual, yang berarti hanya satu dapat dibeli di satu perintah. Ini juga di mana Anda dapat memasukkan SKU (nomor identifikasi) jika Anda memiliki satu.
Tab “Produk Linked” Anda dapat menambahkan upsells, cross-sell, dan pengelompokan produk.
Tab “Attributes” memungkinkan Anda untuk memasukkan atribut spesifik produk (mis terpercaya, tidak pernah rusak, warna, ukuran dll) yang akan ditampilkan di bawah tab Informasi lain bagian depan halaman produk.
Tab “Advanced” Anda dapat memasukkan catatan pembelian kustom, memberikan produk menu order, dan mengaktifkan / menonaktifkan ulasan.
Product Short Description
Bagian ini Anda dapat menampilkan deskripsi singkat untuk produk Anda, deskripsi singkat ini biasanya akan ditampilkan di sebelah gambar produk dan dibawah judul produk Anda.
Setelah semua hal diatas Anda lakukan, jangan lupa untuk memilih Kategori dan mengisi Tags sesuai dengan produk Anda. Dan tambahkan gambar di bagian “Featured Image”, jika gambar Anda lebih dari satu, silahkan untuk memasukkan gambar dibagian “Product Gallery”.
Untuk melihat daftar produk Anda, Anda bisa melihat di menu “Products”, seluruh produk Anda ditampilkan di bagian ini dan Anda bisa menambah, mengedit, atau menghapus produk melalui bagian ini.
Attributes
Jika Anda menjual produk dengan menyertakan pilihan Warna atau ukuran seperti (M, L, XL) maka Anda dapat mengisinya dibagian Attributes ini. Anda bisa menambahkan berbagai attributes di menu Product » Attributes.
Sekarang produk Anda sudah selesai Anda tambahkan dan saatnya untuk mengatur tema agar tampil dengan baik sesuai dengan demo.
Dan berikut adalah preview product yang baru saja dibuat :
MENYESUAIKAN TEMA
Hal pertama yang harus Anda lakukan agar toko online sesuai dengan yang ditampilkan pada demo, dan kebanyakan ini berlaku pada tema-tema WordPress lain untuk WooCommerce. Silahkan membuat halaman baru bernama “Home” di Pages » Add New. Silahkan ketik judul dengan “Home” dan kosongkan bagian deskripsi, dan yang paling penting bagian “Pages Attributes” pilih “Frontpage” dibagian Template.
Setelah membuat halaman Home selesai, silahkan masuk ke menu Settings » Reading, pada bagian “Front Page Display” pilih “Static Page” dan bagian front page arahkan ke halaman “Home”. Jangan lupa untuk klik Save Changes.
Beralih kebagian pengaturan menu, Silahkan masuk ke Appearance » Menus dan Masukkan Page “Home” ke bagian menu dan centang pilihan “Primary Menu” dan untuk menjadikan kategori produk menjadi menu, Anda harus menampilkan “Products Category” terlebih dahulu dengan mencentang pilihan Product Category dibagian menu “Screen Options” disebelah kanan atas. Setelah selesai klik Save Menu.
“Widgets” WooCommerce membawa beberapa Widget yang bisa Anda tambahkan pada sidebar toko online Anda. Widget WooCommerce diantaranya adalah (WooCommerce Cart, WooCommerce Rating, WooCommerce Product Search, WooCommerce Category Product, WooCommerce Reviews dan masih banyak lagi), Silahkan masukkan beberapa Widget yang ingin Anda tampilkan pada area sidebar yang disediakan.
Untuk mengatur layout tema seperti mengganti background, site identity dll, Anda bisa mengaturnya dibagian Appearance » Customizes.