Pengaturan WP Typeface

Sebelum anda melakukan pengaturan WP Typeface, pastikan website anda sudah mengaktifkan plugin WooCommerce kemudian buka menu Appearance >> Themes.

install wp typeface

Klik Add New >> Upload Theme >> Choose File

Upload wptypeface.zip kemudian klik Install Now.

Buka WP Typeface >> Activation

activate wp typeface

Masukkan serial number yang ada pada email pembelian WP Typeface kemudian klik Activate.

Jika berhasil maka akan tampil tanggal kadaluarsa dari serial number tersebut.

wp typeface expired date

Expired date adalah waktu dimana anda sudah tidak bisa mendapatkan lagi akses support dan update.

Apabila anda berganti domain/web, anda perlu klik tombol Deactive di web/domain yang lama kemudian melakukan proses aktivasi ulang di domain baru.

Buka WP Typeface >> General Settings

wp typeface general settings

HTML Lang

HTML Lang adalah cara anda menyatakan bahasa apa yang digunakan pada konten situs web kepada mesin pencari.

Secara default, yang digunakan adalah bahasa yang anda pilih saat menginstal wordpress.

Apabila bahasa konten anda berbeda dengan bahasa wordpress yang digunakan, anda perlu mengaturnya dengan memasukkan kode bahasa.

Kunjungi https://www.w3schools.com/tags/ref_language_codes.asp untuk melihat daftar lengkap kode bahasa.

Contoh : Konten situs web anda berbahasa perancis.. kode bahasanya fr, maka masukkan fr di kolom HTML lang kemudian save.

Privacy Policy Page URL

Apabila anda memasukkan link halaman privacy policy, situs web anda akan menampilkan pop up yang memberitahukan kepada pengunjung bahwa dengan melanjutkan kunjungan web, mereka telah menyetujui semua yang ada di halaman privacy policy

Free Image CDN

Apabila opsi ini diaktifkan, semua file gambar akan dibuka melalui server wordpress.

Keuntungannya? Semua file gambar akan diload lebih cepat dan menghemat sumberdaya webhosting.

Kerugiannya? Kita tidak mengetahui sampai kapan wordpress menyediakan fasilitas ini.

Sampai hal itu terjadi, kami menyarankan untuk tetap mengaktifkan opsi ini hingga tiba harinya server wordpress berhenti menampilkan file gambar dari web anda.

Show scroll to top button

Aktifkan opsi ini untuk menampilkan tombol Scroll to Top di sisi kanan situs web anda.

Style

wp typeface style settings

Berikut adalah beberapa pengaturan yang bisa anda lakukan pada menu ini :

  1. Mengatur icon web yg ingin ditampilkan di tab browser.
  2. Mengatur warna latar belakang website.
  3. Mengatur font, ukuran dan warna teks. Line height adalah jarak antar baris.
  4. Custom Font di sini berfungsi untuk memasukkan link font yang tidak tersedia pada pilihan dropdown, anda juga bisa menggunakan font buatan anda sendiri dengan mengunggahnya lewat menu media dan menempel linknya di kolom yang tersedia.
  5. Mengatur warna link.

Agar konsep pengaturan ini lebih mudah dipahami, buka Halaman utama situs web anda di tab browser baru untuk melihat perubahan apa saja yang terjadi saat “bermain” dengan opsi yang tersedia.

Header

wp typeface header settings

Kamus istilah yang ada pada masing masing pengaturan :

  1. Header Style : Untuk mengatur warna latar belakang header dan tipe header. Sticky = Header akan tetap ‘menempel’ di atas meskipun anda scroll ke bawah layar. Butuh header dengan warna gradasi? Kunjungi https://cssgradient.io/ >> generate css code >> copy dan paste ke kolom Background Gradient.
  2. Header Logo : Untuk mengunggah file logo yang ingin ditampilkan di header.
  3. Login Logo : Untuk mengunggah file logo yang ingin ditampilkan di halaman login dashboard WordPress.
  4. Logo Text : Untuk menampilkan text apabila anda belum memiliki gambar logo.
  5. Logo Spacing : Untuk mengatur jarak atas dan bawah logo.
  6. Top Menu Style : Untuk mengatur tampilan menu yang ditampilkan di header.
  7. Top Menu Spacing : Untuk mengatur posisi menu, icon, dan mengatur lebar sub menu.
  8. Search Form Style : Untuk mengatur tampilan form pencarian produk. With filter = form pencarian akan dilengkapi opsi pencarian berdasarkan kategori produk.

Menu yang tampil di header adalah menu wordpress manapun yang menggunakan Top Menu sebagai display location.

wordpress navigation menu settings

Kunjungi Panduan membuat menu WordPress jika anda belum pernah membuat menu navigasi di WordPress.

Social Media

Masukkan tautan profil media sosial anda untuk menampilkan tombol di footer.

wp typeface social media settings

Footer

wp typeface footer settings

Footer Type : Membagi footer situs web anda menjadi beberapa kolom (sesuai yang anda pilih) dengan lebar yang sama.

Setiap kolom berisi beberapa bagian seperti gambar di bawah, tergantung apa yang ingin anda tampilkan di kolom itu.

wp typeface footer columns
Footer Style : Mengatur tampilan judul dan menu yang ada di footer.

Footer Signature : Tulisan yang ingin ditampilkan pada bagian paling bawah website anda.

Menu ID to Show : Display location dari menu navigasi yang ingin anda tampilkan.

CATATAN :

  • Tiap kolom yang berformat text mendukung tag HTML kecuali shortcode
  • Kolom yang tidak diubah isinya (dibiarkan default) akan menjadi kolom kosong.

Mempersiapkan kategori produk

Buka menu Products >> Categories >> isi kolom name dengan nama kategori kemudian klik Add new category.

Link untuk menampilkan semua produk dari semua kategori = https://namadomainanda.com/shop/

Untuk mendapatkan link halaman kategori tertentu, klik kanan tulisan view di bawah nama kategori kemudian klik Copy Link Address.

mengambil link kategori woocommerce

Mempersiapkan pilihan lisensi produk

Buka menu Products >> Attribute.

Isi kolom name (bebas) kemudian klik tombol Add attribute. Anda bisa membuat beberapa attribute untuk jenis produk yang berbeda. Misal anda ingin menjual font dan produk grafis dengan pilihan lisensi yang berbeda, maka anda bisa membuat 2 attribute berjudul lisensi font dan lisensi grafis.

Klik Configure terms pada daftar attribute yang anda buat di sebelah kanan. Pada contoh ini kami membuat attribute dengan nama Font License.

pengaturan attribute woocommerce

Configure terms berfungsi untuk mengisi attribute dengan nama jenis lisensi yang ingin kita jual.

Pada contoh ini kami membuat 3 jenis Font License, yaitu : Desktop License, Extended License dan Corporate License. Anda dapat mengubah urutan terms dengan melakukan drag and drop pada bagian yang dilingkari.

pengaturan terms attribute woocommerce

Posting Produk

Berikut adalah cara posting produk pertama kali, anda tinggal menduplikasi produk pertama dan mengganti detil yang diperlukan pada saat posting produk berikutnya.

Buka menu Products >> Add New.

  1. Tulis nama produk pada kolom Product Name.
  2. Tulis deskripsi produk pada text editor di bawah Product Name.
  3. Centang kategori produk yang sesuai di kolom Product categories.
  4. Unggah gambar cover produk pada kolom Product Image.
  5. Unggah gambar preview produk pada kolom Product gallery.

7. Bila perlu, lengkapi keterangan isi paket zip yang diterima pembeli.

pengaturan paket wptf
8. Unggah file font yang digunakan sebagai preview. Anda bisa menggunakan file font dengan ekstensi OTF/TTF/WOFF, bukan WOFF2 .

unggah file font preview
9. Klik add more font apabila ada lebih dari 1 file yang ingin ditampilkan previewnya. Font name digunakan sebagai penanda varian font. Misal Bold atau Italic.

10. Ubah Product Data menjadi Variable Product.

set variable product

11. Masuk ke bagian Variations, pilih attribute yang sudah kita buat sebelumnya kemudian klik tombol Add.

set variable name

12. Centang pilihan Used for variations kemudian klik tombol select all. Apabila berhasil, kolom value akan menampilkan semua terms yang sudah kita tentukan nama dan urutannya. Klik tombol Save attributes.

set variable term

13. Masuk ke bagian variations. Pilih Create variations from all attributes kemudian klik go.

set variations

14. Gunakan lisensi dengan harga paling rendah sebagai default form values.

set variations default value

15. Centang pilihan enable, downloadable, virtual dan masukkan nominal harga pada masing masing variations.

set variations price

16. Isi description dengan keterangan penggunaan lisensi dalam format list HTML seperti contoh di bawah.

<ul>
<li>List Content #1</li>
<li>List Content #2</li>
<li>List Content #3</li>
</ul>

17. Unggah file zip untuk didownload pembeli. File name adalah tulisan yang tampil pada email dan dashboard pembeli yang dapat diklik untuk melakukan proses download. File URL bisa anda copy paste ke variation yang lain pada produk yang sama.

set variations price

18. Klik tombol Save changes kemudian klik tombol Publish di kanan atas halaman.

Mengatur tampilan produk

Buka menu WP Typeface >> Product

Kamus istilah yang ada pada masing masing pengaturan :

  1. Product Catalog Box Style = pilihan tampilan katalog produk.
  2. Product Catalog Image Style = pilihan tampilan gambar pada katalog produk.
  3. Product Catalog Title Style = mengatur tampilan nama produk pada katalog produk.
  4. Product Catalog Price Style = mengatur tampilan harga pada katalog produk.
  5. Product Catalog Category Style = apabila Catalog Title Style yang dipilih adalah Tipe 4, fitur ini mengatur tampilan kategori pada katalog produk,
  6. License Page URL = apabila anda memasukkan link halaman license, di atas pilihan license akan muncul tulisan What are these yang terhubung dengan halaman license.
  7. Text Before Variation Option = mengatur tulisan di atas pilihan license.
  8. Variation Option Format = mengatur format pilihan license.
  9. Text Before Variation Description = mengatur tulisan di atas deskripsi license.
  10. Button Style = mengatur tampilan tombol Add to cart.
  11. Custom Note Under Button = menampilkan tulisan di bawah tombol Add to cart.
  12. Show Product’s Published Date = menampilkan tanggal posting produk.
  13. Show Sticky Bottom Button = menampilkan tombol Add to cart yang ‘menempel’ di bawah halaman produk.
  14. Show Text Selector Font Preview = menampilkan text selector untuk font preview.
  15. Remove ‘product’ from Product’s Permalink = menghilangkan tulisan product pada link halaman produk.
  16. Hide Tags = menghilangkan daftar tag.
  17. Sell Individual Font Style = mengaktifkan fitur penjualan font per family. Detil teknis kami tuliskan pada halaman terpisah.
Homepage Settings hanya berfungsi jika anda sudah melakukan pengaturan pada general, header footer, and product settings.

Overlay Header

Homepage settings di WP Typeface memungkinkan anda membuat overlay header seperti seperti gambar di bawah (gambar background dari section #1 menyatu dengan header).

wp typeface overlay header

Untuk menggunakan mode overlay header… anda harus mengaktifkan, mengunggah file logo yang baru dan mengatur warna link yang sesuai dengan gambar background.

NOTE : Overlay header hanya akan digunakan di halaman utama.

wp typeface overlay header settings

Gambar di bawah ada opsi umum yang ada pada tiap section settings.

wp typeface section setting

Seperti footer settings, Section Type artinya kita membagi section tersebut menjadi beberapa kolom.

Jika memilih Default dan anda mengosongkan kolom Section Heading serta Description, section tersebut menjadi section kosong. Tipe Default berguna untuk anda yang membutuhkan section yang bersifat temporer.

Sebagai contoh… anda ingin menampilkan banner promo musiman. Pilih tipe One column, unggah banner anda di sana.

Saat promo usai… anda tinggal mengubah tipenya menjadi Default dan klik save, maka banner tadi akan tersembunyi dan bisa anda tampilkan lagi di lain waktu.

Gambar di bawah akan membantu anda memahami apa itu Inner Content, Section Heading dan Section Description.

section content guide

Setiap tipe Section memiliki opsi yang berbeda, anda bisa lebih memahaminya setelah mencobanya sendiri satu per satu.

Aturan umum Homepage settings

Destination URL : Apabila diisi dengan link, element ini menjadi dapat diklik oleh pengunjung dan menuju ke link yang anda masukkan.

Youtube : Apabila diisi dengan Youtube Video ID, akan menampilkan video pada section itu.

Contoh : https://www.youtube.com/watch?v=V4PfRI2f96s , V4PfRI2f96s adalah video IDnya.

Search Box : Apabila Placeholder text diisi dengan “Search…” atau “Search Font…” atau apapun, akan menampilkan search box pada section itu.

BG Gradient = Apabila membutuhkan background dengan warna gradasi, generate css code di https://cssgradient.io/ , copy and paste kodenya di kolom BG Gradient.

Setiap section memiliki tombol save dan delete sendiri, kami sangat menyarankan untuk mengatur tampilan section satu per satu.

Saat anda sudah mendapat pengaturan tampilan sesuai keinginan, anda bisa menyimpannya menjadi 1 file yang dapat direstore lain waktu.

Dengan fitur ini, anda tidak perlu lagi khawatir bereksperimen dengan tampilan website sesering mungkin.

Install plugin WooCommerce PDF Invoices & Packing Slips.

Install WooCommerce PDF Invoices

Buka Woocommerce >> PDF invoices

WooCommerce PDF menu

Klik tab Documents >> Packing Slip >> disable (hapus centang) >> Save Changes.

WooCommerce PDF slip disable

Pindah ke invoice, atur seperti gambar di bawah, kemudian Save Changes.

WooCommerce PDF invoice enable

Klik tab General >> atur seperti gambar di bawah…

WooCommerce PDF invoice settings

Unggah logo, atur tinggi maksimal logo bila perlu, isi Shop name dan address.

Kita bisa menambah catatan di file PDF dengan mengisi kolom Footer.

Apabila catatan berbentuk list, tulis dalam format HTML (seperti product variation).

Sekarang tiap pembeli akan mendapat file PDF yang berisi aturan penggunaan lisensi dan catatan tambahan yang anda atur sebelumnya.

Install plugin Contact Form 7.

Install Contact Form 7

Buka Menu Contact >> Contact Forms.

Contact Form 7 menu

Copy shortcode di catatan terpisah kemudian klik edit.

Contact Form 7 shortcode

Klik tab email.

Contact Form 7 email tab

Isi kolom “To” dengan alamat email yang paling sering anda gunakan.

Buat halaman form kontak dengan Add new di menu Pages.

add new page

Tambahkan judul halaman. Pilih Contact Form 7 pada bagian template di sidebar kanan kemudian klik tombol publish di kanan atas.

publish contact form

Refresh halaman, akan muncul kolom Contact Form 7. Paste shortcode Contact Form 7 yang sudah kita catat sebelumnya.

Contact Form 7 shortcode field

Isi text editor sesuai kebutuhan, kemudian klik update di kanan atas.

Scroll to top