Cara Mengubah Ukuran Font Tema Etalase WooCommerce

Diterbitkan: 2020-10-02

Cara Mengubah Ukuran Font Tema Etalase WooCommerce Apakah Anda ingin mengubah ukuran font di toko WooCommerce Anda dan Anda menggunakan tema Storefront? Dalam artikel singkat ini, Anda akan mempelajari cara mengubah ukuran font di toko online Anda. Anda mungkin ingin meningkatkan ukuran font seluruh konten halaman Anda atau membuat baris atau paragraf lebih besar. Pada akhirnya, Anda tidak hanya akan belajar bagaimana mengubah ukuran font di posting WordPress Anda, tetapi juga bagaimana melakukannya di situs web Anda.

Ubah Ukuran Font Toko WooCommerce

Tema Storefront dikembangkan dengan tampilan produk yang jelas. Namun, ukuran font dalam tema diatur ke default sesuai dengan preferensi pemirsa. Sama seperti bagaimana Anda dapat dengan mudah mengubah ukuran gambar produk di WooCommerce, Anda juga dapat mengubah ukuran font jika pengunjung di toko Anda tertarik dengan font ukuran yang lebih besar.

Berikut adalah ukuran font yang disertakan:

  • Mengubah ukuran font Paragraph di tema Storefront.
  • Tingkatkan ukuran font judul bilah sisi.
  • Ukuran font menu di Storefront.

a) Langkah-langkah untuk Meningkatkan Ukuran Font Paragraf di tema Storefront

Berikut adalah langkah-langkah yang perlu Anda ikuti:

  1. Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
  2. Dari menu Dashboard, klik pada Appearance Menu > Customize .
  3. Bilah sisi akan muncul di sisi kiri. Gulir ke bawah dan klik CSS Tambahan.
  4. Tambahkan kode berikut untuk memperbesar ukuran font paragraf di tema etalase.
 P {

 ukuran font:18px;

}

Namun, Anda mungkin ingin memiliki paragraf atau bahkan seluruh posting Anda dalam font yang lebih besar. Ini dapat dilakukan dengan mudah menggunakan editor blok WordPress default.

Yang perlu Anda lakukan hanyalah mengeklik blok paragraf mana pun. Setelah itu, pilih ukuran font di bawah 'Pengaturan Teks' di sisi kanan. Pengaturan Teks

Saat Anda mengklik ukuran Preset, Anda dapat memilih dari drop-down, yang mencakup Small, Normal, Medium, Large, dan Huge. Jika Anda tidak menyukai perubahan, Anda cukup mengklik tombol 'Reset' untuk mengatur paragraf Anda kembali ke teks default.

Selain itu, ada opsi 'Kustom' di mana Anda cukup mengetikkan ukuran piksel yang Anda inginkan. Selain itu, Anda juga dapat mengatur Drop Cap besar untuk muncul di awal paragraf Anda. Namun, opsi ini tidak tersedia di editor klasik lama untuk WordPress.

b) Langkah-langkah untuk Mengubah Ukuran Heading Sidebar di Tema Storefront

Dalam pembaruan terbaru dari tema Storefront, judul widget memiliki font normal. Ini berarti bahwa pengguna harus membuatnya lebih besar untuk memiliki heading yang terlihat dari sidebar Storefront.

Mereka menulis gaya yang benar dalam kode CSS, tetapi tidak berhasil karena judul widget harus menyertakan tanda !important untuk mengganti gaya default.

Berikut adalah langkah-langkah sederhana yang perlu Anda ikuti:

  1. Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
  2. Dari menu Dashboard, klik pada Appearance Menu > Customize .
  3. Bilah sisi akan muncul di sisi kiri. Gulir ke bawah dan klik CSS Tambahan. Sebelum menambahkan CSS
  4. Tambahkan kode berikut untuk memperbesar ukuran font heading sidebar:
 .widget-judul{

font-size:50px !penting;

}
  1. Ini akan menjadi Hasil: Setelah menambahkan CSS

Namun, bagaimana jika itu adalah judul untuk posting tertentu? Anda dapat menggunakan judul dalam konten Anda untuk menarik perhatian pengguna. Ini karena hanya perlu beberapa detik untuk memutuskan apakah mereka ingin tetap tinggal atau meninggalkan situs web Anda.

Judul memungkinkan Anda untuk memecah posting dan halaman menjadi beberapa bagian menggunakan subjudul yang berbeda. Mereka bagus untuk SEO, jadi Anda perlu memberikan judul yang tepat dengan bobot lebih dari teks paragraf normal.

Anda dapat menggunakan editor blok default hanya dengan menambahkan blok 'Heading'. Anda dapat menemukannya di bagian 'Blok Umum' di editor blok WordPress. Blok umum

Standarnya adalah Judul 2, tetapi Anda dapat mengubahnya tergantung pada ukuran pilihan Anda. default H2

c) Langkah-langkah untuk Meningkatkan Ukuran Tautan Menu di Tema Storefront

Menu sedikit lebih kecil, sesuai dengan preferensi banyak pengguna. Namun, mereka perlu meningkatkan ukuran font tautan menu di tema Storefront. Berikut adalah langkah-langkah yang perlu Anda ikuti:

  1. Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
  2. Dari menu Dashboard, klik pada Appearance Menu > Customize .
  3. Bilah sisi akan muncul di sisi kiri. Gulir ke bawah dan klik CSS Tambahan. Sebelum menambahkan CSS ke menu
  4. Tambahkan kode berikut untuk memperbesar ukuran font heading sidebar:
 .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {

ukuran font:28px;

}
  1. Ini akan menjadi Hasil: Setelah menambahkan CSS ke menu

Kesimpulan

Dalam artikel ini, saya telah menunjukkan kepada Anda berbagai cara yang dapat Anda gunakan untuk mengubah ukuran font dengan mudah di toko online Anda. Saya telah menggunakan tema Storefront, karena ini adalah tema yang paling umum digunakan di sebagian besar situs WooCommerce.

Pertama, saya menunjukkan kepada Anda bagaimana Anda dapat mengubah ukuran font paragraf dalam sebuah posting. Di sini saya menggunakan gaya CSS dan saya menunjukkan kepada Anda bagaimana Anda dapat menggunakan editor blok WordPress default untuk mengubah ukuran font.

Selain itu, saya membagikan kode CSS yang dapat Anda tambahkan untuk mengubah judul bilah sisi. Untuk heading dalam posting, Anda dapat menggunakan editor blok WordPress default untuk mengubah font heading menggunakan blok 'Heading', yang terdapat di bagian 'Common Blocks' di editor blok WordPress. Judul memungkinkan Anda untuk memecah posting dan halaman Anda menjadi beberapa bagian dan ini adalah cara yang bagus untuk menarik perhatian pengguna. Mereka juga bagus untuk SEO.

Terakhir, saya menyoroti beberapa langkah sederhana yang dapat Anda ikuti untuk mengubah ukuran font tautan menu di tema Storefront menggunakan kode CSS khusus. Namun, jika Anda tidak nyaman menggunakan editor blok WordPress default atau gaya CSS, Anda dapat menggunakan Plugin Lanjutan TinyMCE, yang akan membuat pekerjaan Anda lebih mudah.

Artikel Serupa

  1. Cara Menambahkan Bidang Ekstra di Formulir Pembayaran WooCommerce
  2. Cara Menyembunyikan Bidang Kode Kupon WooCommerce
  3. Sembunyikan atau Hapus Bidang Kuantitas dari Halaman Produk WooCommerce
  4. Cara Menambahkan Metode Pengiriman Kustom di WooCommerce
  5. Cara Menyetujui Pesanan Secara Otomatis di WooCommerce
  6. Cara Menonaktifkan Metode Pembayaran untuk Kategori Tertentu
  7. Cara Menyembunyikan Variasi Stok yang Habis di WooCommerce
  8. Cara Menggunakan Atribut Produk WooCommerce Langkah demi Langkah [Panduan Lengkap]
  9. Cara Menonaktifkan Opsi Pengiriman ke Alamat Lain
  10. Cara Menempatkan Keranjang WooCommerce dan Checkout di Satu Halaman
  11. Cara Menonaktifkan Ulasan WooCommerce Storefront Theme
  12. Cara Mengganti Nama Pesan Status Pesanan di WooCommerce
  13. Cara Menampilkan Produk WooCommerce Berdasarkan Kategori
  14. Cara Menambahkan Gambar Produk Halaman Checkout WooCommerce
  15. Cara Menambahkan Kategori ke Produk WooCommerce
  16. Cara Menambahkan Status Pesanan Kustom di WooCommerce
  17. Cara Mengubah Teks Tombol Tambahkan ke Keranjang Di Halaman Toko WooCommerce
  18. Cara Menyembunyikan Tombol Tambahkan ke Keranjang di WooCommerce