如何更改字體大小 WooCommerce 店面主題

您想更改 WooCommerce 商店中的字體大小並且您正在使用 Storefront 主題嗎？ 在這篇簡短的文章中，您將學習如何在您的在線商店中更改字體大小。 您可能想要增加整個頁面內容的字體大小或增大一行或一個段落。 最終，您不僅將學習如何更改 WordPress 帖子中的字體大小，還將學習如何在您的網站上進行更改。

WooCommerce 店面更改字體大小

店面主題的開發具有清晰的產品展示。 但是，主題中的字體大小會根據觀眾的喜好設置為默認值。 就像您可以在 WooCommerce 中輕鬆更改產品圖像大小一樣，如果您商店中的訪問者對更大尺寸的字體感興趣，您也可以更改字體大小。

以下是包含的字體大小：

• 在 Storefront 主題中更改段落字體大小。
• 增加側邊欄標題字體大小。
• Storefront 中菜單的字體大小。

a) 在 Storefront 主題中增加段落字體大小的步驟

以下是您需要遵循的步驟：

1. 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
2. 從儀表板菜單中，單擊外觀菜單 > 自定義。
3. 側邊欄將出現在左側。 向下滾動並單擊附加 CSS。
4. 添加以下代碼以增加 Storefront 主題中段落的字體大小。

 p {

 字體大小：18px；

}

但是，您可能希望有一個段落甚至整個帖子的字體更大。 這可以使用默認的 WordPress 塊編輯器輕鬆完成。

您只需單擊任何段落塊即可。 之後，在右側的“文本設置”下選擇字體大小。

單擊預設尺寸時，您可以從下拉列表中進行選擇，其中包括小、正常、中、大和超大。 如果您不喜歡更改，只需單擊“重置”按鈕即可將段落設置回默認文本。

此外，還有一個“自定義”選項，您可以在其中簡單地​​輸入您想要的像素大小。 此外，您還可以設置一個較大的首字下沉出現在段落的開頭。 但是，這些選項在 WordPress 的舊版經典編輯器中不可用。

b) 在店面主題中更改側邊欄標題大小的步驟

在 Storefront 主題的最近更新中，小部件標題具有正常字體。 這意味著用戶需要將它們放大，才能在 Storefront 側邊欄上看到可見的標題。

他們在 CSS 代碼中編寫了正確的樣式，但它不起作用，因為小部件標題必須包含!important標誌以覆蓋默認樣式。

以下是您需要遵循的簡單步驟：

1. 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
2. 從儀表板菜單中，單擊外觀菜單 > 自定義。
3. 側邊欄將出現在左側。 向下滾動並單擊附加 CSS。
4. 添加以下代碼以增加側邊欄標題的字體大小：

 .widget-title{

字體大小：50px！重要；

}

5. 這將是結果：

但是，如果它是特定帖子的標題怎麼辦？ 您可以在內容中使用標題來吸引用戶的注意力。 這是因為只需幾秒鐘即可決定他們是要留下還是離開您的網站。

標題允許您使用不同的子標題將帖子和頁面分解為多個部分。 它們非常適合 SEO，因此您需要提供比普通段落文本更重要的正確標題。

您只需添加“標題”塊即可使用默認塊編輯器。 您可以在 WordPress 塊編輯器的“通用塊”部分找到它。

默認值為標題 2，但您可以根據自己喜歡的大小進行更改。

c) 增加店面主題中菜單鏈接大小的步驟

根據許多用戶的喜好，菜單略小。 但是，他們需要升級 Storefront 主題中菜單鏈接的字體大小。 以下是您需要遵循的步驟：

1. 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
2. 從儀表板菜單中，單擊外觀菜單 > 自定義。
3. 側邊欄將出現在左側。 向下滾動並單擊附加 CSS。
4. 添加以下代碼以增加側邊欄標題的字體大小：

 .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {

字體大小：28px；

}

5. 這將是結果：

結論

在本文中，我向您展示了可用於輕鬆更改在線商店字體大小的不同方法。 我使用了 Storefront 主題，因為它是大多數 WooCommerce 網站中最常用的主題。

首先，我向您展示瞭如何更改帖子中段落的字體大小。 在這裡，我使用了 CSS 樣式，並向您展示瞭如何使用默認的 WordPress 塊編輯器來更改字體大小。

此外，我分享了一個 CSS 代碼，您可以添加它來更改側邊欄的標題。 對於帖子中的標題，您可以使用默認的 WordPress 塊編輯器使用 WordPress 塊編輯器的“通用塊”部分中的“標題”塊更改標題字體。 標題允許您將帖子和頁面分成幾個部分，這是吸引用戶注意力的好方法。 它們也有利於 SEO。

最後，我強調了一些簡單的步驟，您可以按照這些步驟使用自定義 CSS 代碼更改 Storefront 主題中菜單鏈接的字體大小。 但是，如果您不習慣使用默認的 WordPress 塊編輯器或 CSS 樣式，您可以使用TinyMCE 高級插件，這將使您的工作更輕鬆。

類似文章

1. 如何在 WooCommerce 結帳表單中添加額外字段
2. 如何隱藏 WooCommerce 優惠券代碼字段
3. 從 WooCommerce 產品頁面隱藏或刪除數量字段
4. 如何在 WooCommerce 中添加自定義運輸方式
5. 如何在 WooCommerce 中自動批准訂單
6. 如何禁用特定類別的付款方式
7. 如何隱藏 WooCommerce 中的缺貨變化
8. 如何逐步使用 WooCommerce 產品屬性 [完整指南]
9. 如何禁用運送到另一個地址選項
10. 如何將 WooCommerce 購物車和結帳放在一頁上
11. 如何禁用評論 WooCommerce 店面主題
12. 如何在 WooCommerce 中重命名訂單狀態消息
13. 如何按類別顯示 WooCommerce 產品
14. 如何添加產品圖片 WooCommerce 結帳頁面
15. 如何向 WooCommerce 產品添加類別
16. 如何在 WooCommerce 中添加自定義訂單狀態
17. 如何在 WooCommerce 商店頁面中更改添加到購物車按鈕文本
18. 如何在 WooCommerce 中隱藏添加到購物車按鈕