Membuat E Commerce Menggunakan WordPress

1
Membuat Toko Online

Menggunakan Wordpress
Mentari Diyah Utami S.Pd
PKKWU
SMK Perguruan Cikini
Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

2
Langkah 1
Download dan Install XAMPP versi 2.4.3 dan wordpress.org versi 5.4.2
Langkah 2
Buka wordpress yang sudah didownload (pastikan dalam bentuk winrar). Kalau belum ada winrar,
silahkan download dan install terlebih dahulu
Klik Ekstrac To pada folder wordpress
Simpan di dalam folder htdocs (Cek hasil download XAMPP ada dimana). Pada modul ini ada di folder C >
xampp > htdocs. Kemudian klik ok

3
Ubah nama wordpress yang tadi sudah di extract menjadi nama toko online kalian. Modul ini
menggunakan nama tokotamidu
Langkah 3
Kemudian buka XAMPP di folder C>xampp>xampp-control dan klik start pada Apache dan MySQL sampai
berwarna hijau
Langkah 4
Kemudian buka browser dan masukan localhost/tokotamidu (tama folder di htdocs) lalu klik Let’s go!

4
Langkah 5
Buka localhost/phpMyAdmin
Klik New > Tulis Database name > Klik Create (Saya memberi Database name nya tamidutoko)
Hasilnya seperti gambar berikut. Setelah itu balik lagi ke tampilan wordpress nya

5
Langkah 6
Isikan Database Name sesuai dengan nama database yang sebelumnya kita buat. Masukan ussername >
root. Kosongkan password. Database Host dan Table Prefix tidak usah diganti. Kemudian klik Submit
Klik Run installation
Isi kotak Site Tittle, Ussername, Password, Your Email dan kemudian Klik Install WodPress

6
Setelah muncul Success! Klik Log in
Masukan Username dan password untuk login ke Dashboard
Setelah login, akan muncul tampilan Dashboard

7
Langkah 7. Mengatur Nama Alamat

Klik Settings > Permalinks > Post name > Save Changes (Tujuanya agar nama alamat yang muncul lebih
ringkas dan relevan dengan tampilan yang sedang dibuka)
Kita coba buka halaman web kita di localhost/tamidutoko kemudian klik artikel contoh yang ada. Bisa
dilihat url yang ada lebih ringkas dibandingkan dengan sebelumnya.
Langkah 8. Merubah Nama, Password, Warna, Foto Profile dan Email

Kalian bisa merubah warna dari dashboar dengan klik Users > Your Profle >Admin Color Scheme

8
Kalian juga dapat merubah nama dengan menuliskan di First Name dan Last Name dan akan muncul di
Display name publicity as untuk memilih
Silhkan ganti foto dengan klik Profile Picture. Kemudian akan diarahkan untuk merubah di Gravatar
Kalau kalian lupa password, bisa dirubah dengan klik New Password > Klik Update Profile kalau semuanya
sudah selesai

9
Langkah 9. Menambahkan Halaman

Klik Dashboard > Pages > Add New
Akan muncul tampilan seperti dibawah
Tuliskan Home kemudian klik Publish

10
Menu yang sudah berhasil ditambahkan akan tertulis “Home is now live”. Kalau kalian ingin melihat
tampilanya, bisa klik View Page
Selanjutnya lakukan hal yang sama untuk membuat laman Blog, Akun, About, FAQ, Kontak, Lacak
Pesanan dan Shop dengan klik View Pages > Add New
Hapus menu Privacy Policy dan Sample Page dengan mencentang kemudian klik Move to Trash > Apply

11
Kemudian masuk localhost/tamidutoko, menu yang seharusnya muncul seperti tampilan yang ada dalam
kotak hitam
Langkah 9. Merubah Posisi Menu

Klik Appearance > Menus
Tulis Nama Menu kemudian centang Desktop Horizontal Menu dan Mobile Menu dan centang semua
menu di Most Recent > Klik Add to Menu

12
Drag Posisi Menu yang diinginkan, kemudian klik Save Menu
Buka localhost/tamidutoko > Menu akan berubah sesuai posisi yang diinginkan
Langkah 10. Optimalisasi Agar Tidak Lemot Saat Instal Plugin

Buka XAMPP dengan kondisi tidak dinyalakan. Kemudian klik Explorer

13
Klik folder htdocs > tamidutoko > wp.config.php (buka di notepad)
Hapus localhost pada hostname
Kemudian ganti menjadi 127.0.0.1

14
Kemudian start kembali XAMPP nya
Langkah 11. Merubah Tema Wordpress

Klik Appearance > Themes
Hapus tema yang tidak digunakan untuk memperingan penyimpanan data

15
Tampilan dengan tema yang sudah dihapuskan, tampil seperti gambar dibawah. Kemudian klik Add New
Pilih tema yang diinginkan. Disini menggunakan oceanwp kemudian Install
Tunggu sampai muncul tulisan Installed kemudian klik Activate

16
Tampilan sesudah diaktifkan seperti gambar dibawah
Tampilan halaman setelah dirubah seperti gambar dibawah
Klik Begin installing plugins

17
Centang bagian Elementor dan Ocean Extra > install > Apply
Tunggu sampai hasilnya seperti ini
Hapus Plugin yang tidak diperlukan

18
Menambahkan plugin WooCommerce, cari di web browser woocommerce
Kemudian unduh woocommerce
Buka xampp > htdocs > tamidutoko > wp-content > plugins > masukan plugin woocommerce dan extract

19
Setelah di extract, klik Plugin > klik Activate pada WooCommerce
Setelah berhasil di aktifasi, maka tampilanya seperti gambar dibawah
Langkah 12. Memindahkan Menu

Tanda woocommerce sudah terpasang, ditandai dengan munculnya keranjang pembelian. Untuk
memindahkan menu, klik Customize

20
Klik Menus
Klik Create New Menu
Tuliskan Nama Menu nya (Bebas), Klik Top Bar > Next

21
Klik Add Items > Pilih FAQ, Kontak dan About (Bebas) > Klik sembarang
Akan muncul menu diatas seperti gambar dibawah
Back dan hapus ketiga menu tersebut dari menu utama

22
Setelah tiga menu tersebut dihapus, maka tinggal menu berikut
Selanjutnya balik ke Menu Top Bar untuk memindahkan posisi menu ke sebelah kanan
Dibagian style diubah menjadi Left Social & Right Content. Posisi menu akan berubah ke sebelah kanan
dan bisa merubah warna background dan tulisan seperti gambar dibawah

23
Back ke bagian Content dan Social untuk menghapus tulisan dan kotak “Place your content here”
Hapus tulisan
Unceklis Unable Social dan klik Publish, tampilanya akan berubah seperti pada gambar

24
Langkah 13. Menambahkan Icon E-Commerce

Buka Customize
Pilih Site Identity
Ubah Tagline dan Masukan Gambar untuk icon website. Ukuran gambar 512 x 512 px dan max 2MB (Edit
gambar jika tidak memenuhi)

25
Upload file dengan menselect files > Klik Select
Hasilnya akan seperti gambar di bawah ini
Langkah 14. Menambahkan Logo E-Commerce

Buka Header > Logo

26
Select Logo
Tambahkan Alt Text (Untuk optimalisasi pencarian di search engine)
Skip Cropping agar logo tidak terpotong

27
Atur ukuran logo agar sesuai dengan tampilan E-Commerce
Refresh halaman web dan tampilan yang muncul akan seperti pada gambar di bawah ini
Langkah 15. Membuat Halaman Homepage

Buka Pages > All Pages > Home > Edit

28
Untuk membuat judul tulisan hilang pada Home, disable Title Klik Update
Maka tampilanya akan berubah seperti dibawah (Tulisan Menjual Perangkat Keteknikanya Hilang)
Atur Content Layoutnya menjadi Full Width (Bebas)

29
Disable Breadcrumbs > Update > Klik Edit with Elementor untuk mengatur Homepage
Klik tanda Add New Section untuk memilih tampilan Homepage
Kemudian pilih yang dua kolom

30
Klik Heading di left bar > Ubah sesuai yang diinginkan seperti gambar di bawah
Klik Style dan ubah sesuai kebutuhan
Klik icon kotak-kotak kecil di side left atas > drag Heading > Masukan tulisan deskripsi toko > atur
tampilan

31
Klik Style untuk mengatur warna, lebar dan jarak antar huruf
Klik icon kotak-kotak kecil di side left atas > drag Icon > atur tampilan (Bebas)
Ubah warna sesuai yang diinginkan

32
Klik kanan pada icon pencil > klik Duplicate
Tampilan setelah di duplicate akan seperti gambardi bawah ini
Hapus icon cart

33
Atur tampilan style seperti yang diinginkan
Atur Advanced pada icon Belanja menjadi Inline
Atur Advanced pada icon Lihat Lainya menjadi Inline

34
Selanjutnya mengatur jarak antar icon dengan klik icon Belanja > Advanced > Margin (Atur sesuai
keinginan)
Drag Image > Pindahkan ke kotak kedua

35
Untuk membuat gambar berada di tengah, klik Edit section > vertical align > middle
Setelah selesai mengedit, klik UPDATE > Preview Changes (Gambar Mata). Hasilnya seperti berikut
Langkah 16. Membuat Manu Pilihan

Klik Edit with Elementor untuk menambahkan elemen baru

36
Klik add new section > pilih yang satu bar
Drag heading kedalam kotak baru
Ubah tulisan seperti gambar dibawah ini

37
Ubah warna tulisan sesuai dengan warna font yang lainnya
Balik kebagian elements > drag Divider ke dalam kotak Kategori Produk
Ubah garis menjadi seperti berikut

38
Ubah style divider seperti berikut
Buat garis mendekati tulisan
Klik edit section untuk mengatur jarak tulisan dengan header atasnya

39
Atur Advanced seperti berikut untuk memberi jarak > klik UPDATE
Balik ke elements > drag Inner Section kebawah tulisan Kategori Produk
Klik Edit Coloumn untuk menambahkan satu kolom lagi dengan klik kanan > Add New Coloumn

40
Drag heading pada Element dan ubah seperti gambar dibawah ini
Ubah warna dan ukuran sesuai dengan yang diinginkan
Masukan heading kembali, atur dan rubah tulisan menjadi seperti gambar dibawah

41
Ubah warna font sesuai teks yang lainnya
Buat jarak antar tulisan “Mouse Terbaik” dengan “Aksesoris” lebih dekat dekat cara klik Advanced dan
atur Top Margin nya
Tambahkan button > icon cart dan atur seperti gambar berikut

42
Ubah warna background > klik UPDATE > klik Preview Changes
Siapkan gambar produk dalam format png kemudian klik Edit Coloumn > Style > Classic > Masukan
Gambar
Kemudian atur seperti gambar berikut

43
Sesuaikan Padding pada tulisan “Mouse Terbaik” sehingga tampil seperti gambar dibawah
Atur dibagian border seperti gambar berikut
Atur Padding pada Advanced untuk mengatur ukuran kotak Aksesoris

44
Klik kanan kemudian copy dan paste ke kotak sebelahnya
Copy, paste dan delete bagian yang tidak diperlukan. Hasilnya seperti gambar berikut
Ubah jarak antar kotak dengan merubah Margin di Advanced

45
Copy dibagian kotak pertama kemudian paste style dikotak berikutnya dan akan muncul tampilan seperti
pada gambar
Ubah kolom yang lain menggunakan nama dan gambar yang berbeda dengan klik bagian edit pada ujung
kiri atas kotak > Style > Image
Atur gambar dengan mengubah size menjadi custom. Hasil akhir seperti pada gambar dibawah ini

46
Langkah selanjutnya klik Add New Section di Elementor dan pilih yang satu kolom
Copy tulisan Kaegori Produk dan garis bawah dengan klik kanan Edit Editing > copy
Setelah di paste, ganti tulisan dengan “Produk Terbaru”

47
Tambahkn spacer untuk membuat jarak antar section
Buat section lainyadan tambahkan spacer diatas dan dibawah setiap section sehingga muncul seperti
tampilan berikut
Selanjutnya adalah membuat section gratis pengiriman dengan cara Add New Section tiga kolom dan
menambahkan spacer diatas dan dibawah setiap section

48
Setelahnya tambahkan icon > ubah sesuai gambar berikut
Tambahkan heading dan tulisan dibawah icon nya
Tambahkan deskrips dari tulisan diatasnya (bebas)

49
Ubah warna background dan icon seperti berikut
Nyalakan Strech Section di Edit Section
Atur warna background pada Style

50
Ubah warna background pada style seperti gambar berikut
Ubah juga border radius untuk membuat tepian kotak lebih menarik
Ubah Margin pada Advanced sehingga membuat icon berada setengah diatasnya

51
Buat typography weight nya menjadi normal
Atur Padding untuk memperbesar kotak
Atur Margin pada icon untuk menyesuaikan letaknya

52
Perbanyak kotak menjadi tiga dengan duplicat kotak sebelumnya
Atur margin untuk setiap kotak
Selanjutnya ubah warna tulisan, icon seperti sebelumnya

53
Langkah 17. Menambahkan Plugin Elementor

Masuk Dashboard > Plugin > Add New > Cari Elementor di kotak Search > Pilih Essential Addons for
Elementor > Install Now (Kalau terjadi kesulitan dalam proses instal, download cara manual dan masukan
ke htdocs seperti penjelasan sebelumnya (xampp/htdocs/tamidutoko/wp-content/plugins)> Klik Activate.
Setelah berhasil akan muncul seperti gambar berikut
Buat section baru dan ubah seperti gambar berikut (tambahkan spacer diatas dan bawahnya)
Masukan Post Grid dari Essential Addons kedalam BLOG & BERITA

54
Masuk kedalam Dashboard > Posts > All Posts > Edit pada Hello World! untuk menambahkan gambar
Masukan gambar yang diinginkan
Setelah selesai menambahkan gambar, klik UPDATE

55
Lihat ditampilan Home sudah berubah seperti gambar dibawah ini
Langkah 18. Menambahkan Footer

Masuk Dashboard > Theme Panel > skip
Pilih My Library > Add New

56
Tuliskan Footer > Klik Edit Elementor
Buat section baru dan klik Yes Strech Section
Ubah warnanya menjadi seperti gambar

57
Tambahkan empat kolom didalamnya
Drag basic image ke kolom pertama
Tambahkan slogan dibawah logo dan ubah warna tulisan

58
Ubah tulisan Home seperti berikut. Ubah warna font menjadi warna putih
Copy dan Paste tulisan Blog
Atur margin seperti berikut

59
Buat tampilan seperti gambar dibawah ini
Klik Edit Section untuk merubah padding
Setelah padding dirubah, footer akan seperti pada gambar

60
Ubah Coloumn Width pada kotak menjadi 30:30:20:20 (total ukuran satu section 100) dan tampilanya
menjadi seperti berikut
Buka dashboard > Appearance > Customize
Klik Footer Widgets

61
Ubah Select Template menjadi footer dan sesuikan warna background color setelah itu klik Publish
Karena template ini gratis, jadi copyright sengaja tidak dihilangkan untuk menghargai pembuatnya. Tapi
setelahnya hanya ditambahkan nama tokonya dan tampilanya seperti gambar di bawah ini
Langkah 19. Menambahkan Homepage Menjadi Halaman Utama Saat Web Diakses
Klik dashboard > Settings > Reading

62
Pilih menjadi static page > Homepage (Home) > Post page (Blog) > Save Changes
Kemudia visit site untuk melihat tampilanya
Tampilan home sudah berubah mejadi tampilan awal ketika membuka website Tamidu Toko

63
Langkah 20. Membuat Halaman Shop

Masuk ke Dashboard > klik WooCommerce > Settings > General > Kemudian isi kotak-
kotak yang kosong sesuai identitas took > Save Changes

64
Selanjutnya klik sub menu Products dan isi kotak isian (Sesuaikan dengan barang yang
dijual) kemudian Save changes
Sesuaikan bagian inventory dengan mengisi/merubah kolom

65
Langkah 21. Menambahkan Produk

Masuk ke Products > Categories > Tambahkan Kategori sesuai tampilan Home yang
sudah dibuat sebelumnya > klik Add new category
Muncul tiga kategori seperti berikut
Masuk ke Products > Create Product

66
Tambahkan judul barang yang akan dijual, tambahkan deskripsi, masukan ke dalam
kategori yang sesuai dan tambahkan tag
Dibagian bawah masukan harga dan sesuaikan semua pengaturan. Masukan gambar
utama dan gambar selanjutnya

67
Masukan deskripsi singkat terkait dengan produk yang akan ditampilkan. Kemudian klik
Publish

68
Atur Woo Commerce dengan klik run the setup wizard
Klik Yes please
Klik Continue

69
Pilih jenis produk yang kalian jual > Continue
Klik bagian Physical product kalua barang yang kalian memiliki bentuk fisik. Kalau untuk penjualan ebook
digital misalnya, bisa pilih yang downloads
Pilih berapa banyak barang yang akan ditampilkan di web kalian dan pilih dimana saja kalian menjual
produk dagangan tersebut > Continue

70
Pilih Menu OceanWP yang sedang digunakan
Klik Yes please untuk mengakhiri
Akan tampil, tampilan seperti dibawah kemudian isi semua setup sampai tercentang. Sesuaikan pilihan
dengan produk yang kalian jual

71

72
Kemudian cek dibagian Dashboard > Pages > My account > Edit
Tampilanya akan seperti gambar dibawah
Klik Menu Akun > Customize untuk mengubah agar Ketika menu akun di klik akan tampil seperti gambar
sebelumnya

73
Klik Menus
Pilih Menu Atas
KlikAdd items > Pilih My account

74
Boleh kalian ubah Namanya
Setelah di atur tampilan dari menu Akun akan seperti gambar di bawah
Gambar dibawah adalah tampilan ketika kita mengklik “PROCEED TO CHECKOUT”

75
22. Mengatur Widget

Klik Appearance > Widgets
Klik Customize
Pilih Widgets

76
Pilih WooCommerce Sidebar
Klik Add Widget > Product Search
Klik Add Widget > Filter Products by Price

77
Klik Add Widget > Products Categories
Centang sesuai dengan yang ingin ditampilkan pada sidebar
23. Menghapus Title di Beberapa Menu dan Side Bar

Klik Edit category

78
Untuk mengubah tampilan menjadi full klik Main pada Ocean WP Settings > Pilih Full Width
Pada bagian Title > Display Page Title > Klik Enable dan Pada bagian Display Heading > Disable
Klik Update > View Product

79
Maka tampilanya akan seperti gambar dibawah
Klik Menu Akun > Klik Edit Page
Klik Main pada OceanWP Settings > Pilih Full Width pada Content Layout > Update

80
Kemudian hasilnya seperti gambar dibawah
Klik bagian cart > view cart > klik Edit Page

81
Lakukan hal yang sama seperti perintah sebelumnya
Hasilnya seperti gambar dibawah
Lakukan hal yang sama untuk menghilangkan sidebar pada checkout sampai menghasilkan tampilan
seperti gambar dibawah ini

82
24. Membuat halaman “Lacak Pesanan”

Buka browser > ketikan woocommerce shortcode
Copy tulisan woocommerce_order_tracking
Pilih menu Lacak Pesanan > Edit Page

83
Klik tanda + > cari short code > klik
Paste didalam kotak shortcode kemudian klik sembarang
Atur juga tampilan content layout menjadi Full Width > Update

84
Setelah di preview, maka hasilnya seperti gambar dibawah ini terdapat Order ID dan Billing email
25. Merubah Halaman About

Klik Menu About > Edit Page >Ubah Main seperti gambar berikut untuk menghilangkan sidebar
Klik bagian title > kemudian disable Display Page Title. Kemudian klik “Edit with Elementor”

85
Tambahkan section > masukan heading kedalam section. Ubah tulisan menjadi XL dan H1
Buat section Full Width
Ubah warna tulisan menjadi hitam di Style

86
Tambahkan spacer diatas dan dibawah tulisan About
Tambahkan section dua kolom > drag image kedalam salah satu section

87
Untuk menambahkan cover gambar bisa ditambahkan di Image Overlay. Lightbox bisa diaktifkan jika kita
menginginkan video Ketika di klik akan membuat pop up
Selanjutnya menambahkan tulisan deskripsi took dengan “Text Editor” dan menambahkan “Spacer”untuk
memberi jarak antar video dengan tulisan

88
26. Merubah Halaman Kontak

Klik Menu Kontak > Edit Page >Ubah Main seperti gambar berikut untuk menghilangkan sidebar dan
disable kan title
Masuk kedalam Elementor Kontak > Pilih section satu coloumn > Drag heading > Atur sesuai keinginan

89
Tambahkan spacer dibawah tulisan Kontak
Klik tanda + kemudian pilih section tiga kolom kemudian pada kolom pertama tambahkan Icon Box dan
atur seperti gambar dibawah atau menyesuaikan dengan kebutuhan toko masing-masing

90
Ubah warna dan ukuran pada style
Sehingga tampilanya menjadi seperti pada gambar dibawah ini
Dikolom kedua, tambahkan email dan ubah sama dengan sebelumnya

91
Dikolom ketiga tambahkan alamat dan samakan seperti sebelumnya
Tambahkan section kemudian drag Gmaps > Tuliskan alamat took yang sesuai kemudian tambahkan
spacer diatas maps
27. Merubah Halaman FAQ

Klik Menu FAQ > Edit Page >Ubah Main seperti gambar berikut untuk menghilangkan sidebar dan disable
kan title

92
Tambahkan section kemudian drag heading dan ubah
Ubah warna tulisan sesuai dengan kebutuhan toko anda
Tambahkan section baru kemudian drag Accordion

93
Tuliskan pertanyaan dan jawaban sesuai dengan kebutuhan toko kalian
28. Menambahkan Produk Lainnya

Masuk dashboard > products > add new > isikan seperti sebelumnya
Masukan tag, harga dan gambar

94
Tentukan berat produk yang kalian punya dan masukan gambar tambahan yang kalian
punya
Masukan produk tertaut atau produk yang mirip
29. Menambahkan Produk Terbaru Untuk Tampilan Home

Buka browser > ketikan woocommerce shortcode > pilih webnya

95
Scroll down dan pilih Newest Products > Copy link
Drag shortcode kebagian produk terbaru
Paste kode yang tadi sudah di copy. Maka tampilanya akan berubah seperti gambar dibawah

96
Copy Kembali code di bagian FeaturedProducts
Drag shortcode kedalam Produk Favorit
Pastekan code, kalau gambar belum muncul memang karena belum ada produk yang kita favoritkan

97
Copy lagi untuk bagian Best Selling Products
Drag shortcode kedalam Produk Terlaris
Paste code dan akan muncul tampilan seperti berikut

98
30. Membuat Produk Menjadi Favorit

Buka dashboard > Products > All Product > Klik tanda bintang di produk yang diinginkan. Cara ini
dilakukan sebagai bentuk simulasi karena belum ada produk yang dipilih pembeli menjadi produk favorit
Tampilan yang akan muncul seperti gambar dibawah ini
31. Setup Produk Pilihan pada Halaman Home

Buka elementor > klik bagian kolom pertama produk pilihan > copy link dari menu shop > paste di kotak
link yang ada di elementor > klik update > preview > lakukan yang sama untuk semua kategori

99
Lakukan hal yang sama untuk button belanja
Menambahkan achor diatas tulisan Kategori Produk untuk memanggil id di Lihat Lainnya
Buat id untuk dipanggil di button Lihat Lainnya

100
Masukan tulisan yang sebelumnya sudah dibuat di kotak link
32. Menambahkan Wishlist

Buka dashboard > Add New > cari it wishlist > klik install now pada IT WooCommerce Wishlist > klik
Activate
Klik Let’s Go

101

102
Tambahkan wishlist-button > ceklis product listing > save

103
Tambahkan CSS seperti gambar untuk membuat tampilan tulisan wishlist semakin menarik
Hasilnya seperti gambar dibawah ini
Ketika sudah di klik pada produk, maka wishlist akan berada di bawah tulisan Add To Cart sesuai dengan
pengaturan yang kita atur di wishlist

104
33. Menambahkan Menu Wishlist Pada Website Kita

Klik Customize > Menus > Add Item > Pilih Wishlist > Publish
34. Menambahkan Fitur Whatsapp

Masuk dashboard > Plugins > Add New > Install Click to Chat > Activate
Klik Click to Chat > Isikan semua isian > Save Changes

105
Tambahkan plugin baru dengan search plugin dan pilih seperti gambar > install > activate

106
Pilih Sales Notification > WooCommerce > Next
Klik bagian yang tercentang pada gambar (bebas tentukan yang mana) > Next

107
Kemudian klik Launch
35. Membuat Pendaftaran Toko Online

Masuk dashboard > Settings > General > Sesuaikan isian > Save Changes
Ketika akun di logout maka akan muncul tampilan login seperti gambar dibawah

108
Untuk menampilkan cara pendaftaran atau registrasi maka atur di dashboard > WooCommerce >
Settings > Centang seperti gambar > Kemudian save changes
Hasil yang muncul adalah seperti gambar di bawah (kondisi sudah di logout)
36. Membuat Tampilan Responsive

Masuk elementor > klik tablet

109
Klik Edit Coloumn pada gambar > klik Advanced
Pilih Responsive > nyalakan Hide On Tablet dan Hide On Mobile
Dibagian layout ubah menjadi 100

110
Pilih Vertical Align menjadi Middle dan Horizontal Align menjadi Center
Buat posisi tulisan “Selamat Datang di Tamidu Toko” menjadi ke tengah
Buat posisi tulisan “Lorem Ipsum” menjadi ke tengah

111
Atur Padding top dan bottom menjadi 50
Buat button Belanja menjadi full width
Buat button Lihat Lainnya menjadi full width

112
Buat button Belanja menjadi justify
Buat button Lihat Lainnya menjadi justify
Atur margin button “Belanja” agar berjarak dengan button “Lihat Lainnya”

113
37. Tampilan Akhir Sebelum Upload Hosting

Menu Home

114
Menu Blog

115
Menu Shop
Menu Akun

116
Menu Lacak Pesanan
Menu About
Menu Wishlist

117
Menu Kontak
Menu FAQ

118
Tampilan Cart
Tampilan Checkout

119
38. Cara Membeli Hosting + Domain

Silahkan buka penyedia hosting dan domain yang kalian inginkan. Dibawah ini hanya sebagai
contoh salah satu penyedia hosting dan domain. Saran untuk pembelian hosting, beli yang sudah
memiliki domain dan bisa digunakan untuk banyak website (domain unlimited atau bisa dipakai
lebih dari satu kali)

120
Kalau belum memiliki akun, silahkan mendaftar dan kemudian tuntaskan pembayaran. Setelah melakukan
pembayaran aka nada email yang masuk. Silahkan diikuti tahapan selanjutnya sesuai arahan yang ada di
dalam email. Untuk mengecek aktivasi, login kedalam website penyedia hosting

121
39. Upload Hosting

Untuk pembelajaran kali ini kita upload kedalam hosting free yaitu di 000webhost. Silahkan
buka laman web nya kemudian daftar
Verifikasi email di alamat yang didaftarkan diawal
Setelah berhasil diverifikasi kemudian lanjutkan klik Get Started

122
Klik bagian tamidutoko

123
Install WordPress

124
Download Plugin All-in-One WP Migration di dalam dashboard wordpress yang sudah kita buat tampilan
tokonya. Setelah selesai install klik activate
Klik bagian All-in-One WP Migration > Export To > File
Tunggu sampai proses selesai

125
Klik Download Localhost
Import kedalam wordpress yang berasal dari 000webhost
Kalau ukuran file terlalu besar, klik get unlimited untuk menginstal plugin tambahan

126
Download plugin
Masukan secara manual dibagian plugin > add new > upload plugin > install now
Aktifkan plugin

127
Kemudian import dari All-in-One WP Migration dan tunggu sampai selesai
Kemudian klik Proceed
Setelah selesai maka website dengan nama tokokalian.000webhost.com sudah bisa diakses online. Nama
toko tergantung penamaan masing-masing. Cara eksport dan import seperti diatas juga berlaku Ketika
menggunakan hosting berbayar.

Membuat E Commerce Menggunakan WordPress

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat E Commerce Menggunakan WordPress

Diunggah oleh

Hak Cipta:

Format Tersedia

1

Membuat Toko Online

Mentari Diyah Utami S.Pd

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Klik Ekstrac To pada folder wordpress

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Klik Run installation

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Setelah muncul Success! Klik Log in

Masukan Username dan password untuk login ke Dashboard

Setelah login, akan muncul tampilan Dashboard

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Langkah 7. Mengatur Nama Alamat

Langkah 8. Merubah Nama, Password, Warna, Foto Profile dan Email

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Langkah 9. Menambahkan Halaman

Akan muncul tampilan seperti dibawah

Tuliskan Home kemudian klik Publish

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Langkah 9. Merubah Posisi Menu

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Drag Posisi Menu yang diinginkan, kemudian klik Save Menu

Langkah 10. Optimalisasi Agar Tidak Lemot Saat Instal Plugin

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Klik folder htdocs > tamidutoko > wp.config.php (buka di notepad)

Hapus localhost pada hostname

Kemudian ganti menjadi 127.0.0.1

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Kemudian start kembali XAMPP nya

Langkah 11. Merubah Tema Wordpress

Hapus tema yang tidak digunakan untuk memperingan penyimpanan data

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Pilih tema yang diinginkan. Disini menggunakan oceanwp kemudian Install

Tunggu sampai muncul tulisan Installed kemudian klik Activate

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Tampilan sesudah diaktifkan seperti gambar dibawah

Tampilan halaman setelah dirubah seperti gambar dibawah

Klik Begin installing plugins

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Tunggu sampai hasilnya seperti ini

Hapus Plugin yang tidak diperlukan

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Menambahkan plugin WooCommerce, cari di web browser woocommerce

Kemudian unduh woocommerce

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Setelah di extract, klik Plugin > klik Activate pada WooCommerce

Setelah berhasil di aktifasi, maka tampilanya seperti gambar dibawah

Langkah 12. Memindahkan Menu

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Klik Create New Menu

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Akan muncul menu diatas seperti gambar dibawah

Back dan hapus ketiga menu tersebut dari menu utama

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Setelah tiga menu tersebut dihapus, maka tinggal menu berikut

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress

Langkah 13. Menambahkan Icon E-Commerce

Pilih Site Identity

Tamidu | Mentari Diyah Utami | Membuat Toko Online Menggunakan Wordpress