定制店面 WooCommerce 主題的 80 多種技巧：終極店面主題定制指南

尋找一種方法來自定義您的 WooCommerce 店面主題？ 本文有 80 多種不同的技巧，您可以使用它們來自定義您的 WooCommerce 店面主題。 閱讀本指南後，WooCommerce Storefront 主題定制應該很容易。

WooCommerce Storefront 是一個簡單而強大的免費主題。 這個主題讓您可以在產品展示和用戶訪問方面對您的商店進行很好的控制。 它是免費的，並通過子主題為您提供過多的自定義選項。

在我們學習自定義 WooCommerce Storefront 主題的所有技巧之前，讓我們先了解一下基礎知識。 此外，還將提供有關如何安裝和配置 WooCommerce 店面主題的詳細指南。

店面 WooCommerce 主題

你有 WooCommerce 項目嗎？ 如果是，那麼 Storefront 是最好的電子商務主題，可以與 WooCommerce 優雅地協同工作。

這個主題是由 WooCommerce Core 開發人員開發的，具有簡潔的設計，可以進行任何類型的定制。

該主題具有響應式設計，可在任何設備上使用。 以下是下載此主題後您將獲得的一些驚人功能：

• • 優雅的設計。
  • 響應式佈局。
  • SEO 友好的標記。
  • 自定義頁面模板。
  • 自由。
  • GPL 許可。
  • 其他語言的翻譯準備就緒。

如何安裝和配置 WooCommerce 店面主題

下載 Storefront 主題就像為您的 WordPress 網站安裝任何其他插件一樣。 首先，您需要轉到Appearance 、 Themes ，最後是 Add New 。 在搜索字段中，輸入“店面”，然後單擊安裝按鈕。

安裝後，您可以使用“激活”按鈕激活主題。

此外，您可以訪問 wordpress.org 下載最新版本的 Storefront。 然後，您可以通過 FTP 將提取的文件夾上傳到服務器上的主題目錄。 之後，您需要通過Appearance 和Themes來激活主題。

頁面模板

除了默認的 WooCommerce 頁面外，店面還會自動創建兩個額外的頁面模板。 它們是主頁和全寬。

主頁模板。

主頁模板為您提供了一種顯示所有產品的好方法，讓您可以概覽產品和產品類別。 當您進入您的商店時，您商店的訪客將首先登陸此頁面。

設置它很容易，因為您只需要創建一個新頁面並添加一些要顯示的內容。 然後，您必須從“頁面屬性”元框中的模板下拉列表中選擇“主頁”。

發布此頁面後，您可以通過導航到設置然後閱讀將其設置為主頁。

然後，您將選中“靜態頁面”，然後從“首頁”下拉列表中選擇創建的主頁。 保存更改後，它們將自動反映在前端。

配置完成後，您的主頁應該有多個部分。

展示了不同的集群，例如推薦產品、粉絲最愛、在售產品和暢銷產品。 這些元素的顯示方式與後端的順序相同。

此外，您可以使用拖放功能進行修改，方法是依次單擊產品、類別。

購物車和結帳時的全寬

Full Width 是另一個跨越整個頁面的模板，沒有側邊欄，這是您的購物車和結帳頁面的推薦選項。 這可以通過轉到購物車和結帳頁面並從“頁面屬性”部分的下拉菜單中選擇“全寬”來完成。

配置菜單

店面具有主要和次要菜單位置的默認組織。 主菜單顯示在站點徽標的正下方。 如果您沒有設置特定的主菜單，WooCommerce 會將您的所有頁面顯示為“主菜單”。

二級菜單就在徽標旁邊，嵌套在搜索框中。 但是，此二級菜單僅在您指定菜單時才會出現。

創建新菜單並添加頁面

這可以通過導航到管理面板中的外觀然後菜單來完成。 在左側，您將看到一個名為“頁面”的標題。 單擊查看全部按鈕以獲取您已發布的所有頁面的列表。

勾選您想要的頁面，然後單擊Add to Menu 。 只需拖放頁面即可輕鬆自定義菜單順序。

放置小部件

店面主題為您提供了三個不同的區域，用於在您的網站上放置小部件。 標題小部件可以放置在內容上方，就在您網站的標題下方。 側邊欄小部件根據您選擇的佈局放置在側面。 此外，您可以根據您選擇的四個可用小部件放置頁腳小部件。

因此，既然您已經了解了安裝和配置 WooCommerce Storefront 主題的基礎知識，那麼讓我們看看您可以執行哪些不同的技巧來自定義這個主題。

1. 創建子主題

在我們深入了解自定義 WooCommerce 店面的複雜技巧之前，讓我們首先為我們的店面主題創建一個子主題。 子主題是依賴於父主題的小主題。 它們覆蓋父主題的樣式表和自定義功能，從而在頁面的不同部分創建更改。

為什麼要創建子主題？ 這是因為 Storefront 的核心不斷更新，這將對您的所有定制工作構成風險。 這意味著您可以安全地升級 Storefront，而不會丟失我們的定制工作。

創建子主題的最佳方法是下載 Child Theme Configurator 插件並激活它。 按照嚮導創建您的第一個子主題。

2. 為您的商店添加徽標

這可以通過使用儀表板上的主題定制器來完成，然後是定制。 選擇“站點標識”選項以通過上傳圖片來添加徽標。 任何 Storefront 主題的推薦尺寸為 470 像素 x 110 像素。 然後，您將通過單擊“發布”來保存更改。

3.自定義標題大小

這裡我們將再次使用主題定制器，但我們將在“附加 CSS”部分編寫一些 CSS 代碼。

添加以下代碼：

 * 標頭 */
#masthead.site-header {
   高度：155px！重要；
   邊距底部：0px
}
/* 標頭廣告的移動 CSS */
@media only screen and (max-width: 320px) {
   #masthead.site-header {
   高度：80px！重要；
   邊距底部：0px；
}
}
/* 標頭菜單 */
.storefront-primary-navigation a, .cart-contents a {
   邊距：0 0 0 0；
}
.main-navigation ul {
   填充：0 0 10px 4px！重要；
}
.main-navigation li {
   高度：38px！重要；}
/* 標頭菜單的移動 CSS */
@media only screen and (max-width: 320px) {
.main-navigation ul {
   背景：#D6DDE4！重要；
}
}
/* 標題區域 */
.site-header {
填充頂部：0.5em；
}
.site-header .custom-logo-link img，.site-header .site-logo-anchor img，.site-header .site-logo-link img {
邊距底部：-45px；
}

結果如下：

4.從主題的標題中刪除搜索欄

將此代碼添加到“附加 CSS”部分。

 .site-header .widget_product_search
顯示：無；
}

結果如下：

5.為移動設備創建一個單獨的下拉菜單

Storefront 被構建為具有高度響應性，可以很好地適應所有屏幕尺寸。 如果您有多個菜單，將訪問者的注意力引導到網站中的特定位置很重要。 使用 WordPress 定制器，您可以添加以下代碼片段來做到這一點。

轉到外觀，然後自定義，然後選擇“菜單”選項，我們可以通過為小屏幕選擇“手持菜單”來創建自定義菜單設計。

6.關閉客戶評論

默認情況下，WooCommerce 和店面具有用於評論的標準功能。 這種非常好的集成讓您知道訪問者對您的產品的看法。

但是，客戶評論可能不適用於所有類型的電子商務商店。 要關閉客戶評論，請導航到 WooCommerce 設置並轉到“產品”選項卡。 在頁面底部，您會找到“評論”部分，您可以在其中根據需要更新評論。

7.從主頁中刪除產品類別圖像

WooCommerce 允許您在主頁上顯示產品以及產品類別及其圖像。 但是，如果您希望類別顯示為純文本，則需要將此行添加到子主題的 functions.php 文件中。 只需將其添加到 function.php 文件的末尾即可。

 remove_action('woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10);

結果如下：

8.更改標題菜單顏色

定制器允許我們使用您想要的顏色自定義標題。 這可以通過導航到自定義然後標題並選擇您想要的顏色來完成。

但是，此選項會為整個標題區域著色，包括搜索欄、登錄部分和徽標。 只需將以下代碼片段添加到附加 CSS面板，即可為標題菜單獲得不同的背景。

 .storefront-primary-navigation,
.main-navigation ul.menu ul.sub-menu{
背景顏色：#f0f0f0；
}

結果如下：

9.隱藏主導航欄

默認情況下，店面主題將所有頁面顯示為菜單。 如果要隱藏主導航欄，僅刪除菜單是不夠的。 只需導航到自定義然後附加 CSS部分並添加以下行：

 .storefront-primary-navigation {
顯示：無；
}

結果如下：

10.在商店頁面隱藏產品標題

要在商店頁面中隱藏產品標題，只需導航到自定義然後附加 CSS部分並添加以下行：

 h2.woocommerce-loop-product__title {
顯示：無！重要；
}

結果如下：

11.去除表頭的空白

只需導航到自定義然後附加 CSS部分並添加以下行：

 .site-branding {
邊距底部：0px；
}

結果如下：

12.增加搜索欄的寬度

如果你想擴展搜索欄的寬度，你會怎麼做？ 使用 Additional CSS 部分，添加以下行：

 .woocommerce-active .site-header .site-search {
寬度：44.739%；
}
#masthead .site-search .widget_product_search 輸入[type="search"] {
寬度：700 像素！重要；
}

結果如下：

13.刪除標題和菜單之間的空間

只需導航到自定義然後附加 CSS部分並添加以下行：

 .site-header {
高度：77px；
}
.col-full {
頂部：-84px；
}
@media only screen and (max-width: 640px) {
.site-header {
高度：自動；
}
.col-full {
頂部：0；
}
}

結果如下：

14.向 WooCommerce 註冊頁面添加額外的文本

在註冊頁面中添加消息很重要，因為我們可能希望添加感謝或為新註冊者提供折扣券。 要歸檔它，只需在子主題的 function.php 文件中添加一個函數。

 add_action（'bp_signup_profile_fields'，函數（）{
// 下面開始編輯。
?>
<p class="notice-check-inbox">
請記住檢查您的電子郵件並確認註冊
<strong>10% 折扣券</strong>！
</p>
<?php
// 結束編輯。
});

15.刪除店面主題中的麵包屑

在大多數網站的頁面頂部，添加了麵包屑以方便導航。 它們位於每個頁面的頂部，顯示頁面或產品所屬的類別。

麵包屑是搜索引擎優化的絕佳工具，但如果您想刪除它們，只需將以下代碼添加到子主題的 functions.php 文件中：

 add_filter('woocommerce_get_breadcrumb', '__return_false');

結果如下：

16.更改標誌中的URL鏈接

一般來說，WordPress 主題會在徽標中鏈接網站主頁。 此功能是大多數網站的標準功能，用戶希望每次點擊徽標時都能返回首頁。

如果主頁位於不同的位置怎麼辦？ 這意味著如果我們需要自定義鏈接，您必須配置 URL。 要改變這一點，我們需要將以下代碼添加到子主題的 functions.php 文件中：

 add_action('storefront_header', 'custom_storefront_header', 1);
功能custom_storefront_header（）{
remove_action('storefront_header', 'storefront_site_branding', 20);
add_action('storefront_header', 'custom_site_branding', 20);
功能 custom_site_branding() {
// 這裡設置你的標誌或網站標題的鏈接
$link = home_url('/my-custom-link/');
?>
<div class="site-branding">
<?php
if (function_exists('the_custom_logo') && has_custom_logo()) {
$custom_logo_id = get_theme_mod('custom_logo');
如果 ( $custom_logo_id ) {
$custom_logo_attr = array('class' => 'custom-logo', 'itemprop' => 'logo' );
$image_alt = get_post_meta($custom_logo_id, '_wp_attachment_image_alt', true );
如果（空（$image_alt））{
$custom_logo_attr['alt'] = get_bloginfo('name', 'display');
}
$logo = sprintf('<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
esc_url($鏈接),
wp_get_attachment_image($custom_logo_id, 'full', false, $custom_logo_attr)
);
}
elseif ( is_customize_preview() ) {
$logo = sprintf('<a href="%1$s" class="custom-logo-link" style="display:none;"><img class="custom-logo"/></a>' , esc_url($link));
}
$html = is_front_page() ？ '<h1 class="logo">' 。 $標誌。 '</h1>' : $logo;
} elseif ( function_exists( 'jetpack_has_site_logo' ) && jetpack_has_site_logo() ) {
$logo = site_logo()->logo;
$logo_id = get_theme_mod('custom_logo');
$logo_id = $logo_id ？ $logo_id : $logo['id'];
$size = site_logo()->theme_size();
$html = sprintf('<a href="%1$s" class="site-logo-link" rel="home" itemprop="url">%2$s</a>',
esc_url($鏈接),
wp_get_attachment_image（$logo_id，$size，假，數組（
'class' => 'site-logo attachment-' 。 $大小,
'數據大小' => $大小，
'itemprop' => '標誌'
) )
);
$html = apply_filters('jetpack_the_site_logo', $html, $logo, $size);
} 別的 {
$tag = is_front_page() ？ 'h1' : 'div';

$html = '<' 。 esc_attr($標籤)。 ' class="beta site-title"><a href="' . esc_url( $link ) . '" rel="home">' . esc_html(get_bloginfo('name'))。 '</a></' 。 esc_attr( $tag ) .'>';

if ( '' !== get_bloginfo( 'description' ) ) {
$html .= '<p class="site-description">' 。 esc_html(get_bloginfo('description', 'display')) 。 '</p>';
}
}
迴聲 $html;
?>
</div>
<?php
}
}

自定義鏈接位於第 7 行 ' ( '/my-custom-link/' ); ' ，您將在其中添加自定義鏈接，將其替換為“my-custom-link”。

17.從商店頁面中完全刪除類別

此功能簡單地刪除了類別。 您需要將以下行添加到 functions.php 文件中：

 功能 storefront_child_reorder_homepage_contant() {
remove_action('主頁', 'storefront_product_categories', 20 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');

結果如下：

18.從購物車和迷你購物車中刪除產品圖片

為此，只需將以下代碼添加到您的子主題的 functions.php 文件中：

 add_filter('woocommerce_cart_item_thumbnail', '__return_false');

結果如下：

19. 來自我們商店頁面的最新產品

當您添加新產品時，它會添加到首頁的“新產品”部分。 這是 Storefront 主題中的默認設置。 但是，如果您不斷地將產品添加到您的列表中，它們可能會使商店頁面變得混亂。 您可能還希望在此部分中顯示其他信息。

要刪除此部分，只需將以下代碼添加到子主題的 function.php 文件中。

 功能 storefront_child_reorder_homepage_contant() {
remove_action('主頁', 'storefront_recent_products', 30 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');

結果如下：

20.從商店頁面中刪除暢銷產品

對某些人來說，這可能不是一個理想的功能。 要刪除最暢銷的部分，只需將以下代碼添加到子主題的 function.php 文件中。

 功能 storefront_child_reorder_homepage_contant() {
remove_action('主頁', 'storefront_best_sales_products', 70 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');

結果如下：

21.刪除特色產品

同樣，您可能希望禁用特色產品部分。 這可以通過將以下代碼片段添加到子主題的 functions.php 文件來完成：

 功能 storefront_child_reorder_homepage_contant() {
remove_action('主頁', 'storefront_featured_products', 40 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');

結果如下：

22.集成一個粘性“添加到購物車”按鈕

提供有關您的產品的重要信息（例如描述、圖片庫和其他信息）非常重要。 最終，這可能會導致頁面過長。

但是，如果您想簡化將產品添加到購物車的過程，而不是強迫客戶向上滾動到頁面頂部以將產品添加到購物車，您可以添加一個粘性“添加到購物車”按鈕屏幕頂部。

這可以通過使用名為Sticky add to cart for WooCommerce 的插件來完成。 只需安裝並激活它，即可在您的所有產品頁面上享受粘滯的“添加到購物車”按鈕。

結果如下：

23.在結賬頁面添加城市下拉列表

當您在結帳頁面添加城市下拉列表時，它將幫助我們的客戶快速填寫他們的個人詳細信息。 這將使您能夠只創建可以運送產品的可用城市。

只需將以下代碼添加到子主題的 functions.php 文件中：

 add_filter('woocommerce_default_address_fields', 'override_checkout_city_fields', 10, 1);
函數 override_checkout_city_fields($fields) {
// 在數組中定義您想要的城市（這裡是城市示例）
$option_cities = 數組（
'' => __('選擇你的城市'),
'a' => 'a',

);

$fields['city']['type'] = 'select';
$fields['city']['options'] = $option_cities;

返回$字段；
}

如果您查看代碼的第五行，您可以定義我們的城市列表。 代碼 'a' => 的第一部分是城市的 ID，不能包含空格或空字符。 只需按照您希望它出現的方式準確地寫下城市的名稱。

結果如下：

24.在產品頁面隱藏產品數量加減按鈕

為了讓您隱藏帶有加號和減號按鈕的文本字段以增加或減少產品數量，您只需在Additional CSS部分添加以下 CSS 代碼：

 。數量 {
顯示：無！重要；
}

結果如下：

25.隱藏產品頁面的“加入購物車”按鈕

為此，只需導航到自定義然後附加 CSS部分並添加以下行：

 .single_add_to_cart_button {
顯示：無！重要；
}

結果如下：

26.從頁腳中刪除店面主題信用

默認情況下，WooCommerce Storefront 主題會在頁腳中添加主題信用。 您可能需要一個帶有個人風格的頁腳。 要刪除主題信用，只需在子主題的 functions.php 文件中添加以下函數：

 add_action('init', 'custom_remove_footer_credit', 10);
功能 custom_remove_footer_credit () {
remove_action('storefront_footer', 'storefront_credit', 20);
add_action('storefront_footer', 'custom_storefront_credit', 20);
}
功能 custom_storefront_credit() {
?>
<div class="網站信息">
＆複製; <?php echo get_bloginfo('name') . ' ' 。 get_the_date('Y'); ?>
</div><!-- .site-info -->
<?php
}

結果如下：

27.更改店面小部件部分顏色和字體大小

使用定制器無法直接更改頁面小部件的字體顏色或大小。 您可以通過添加以下幾行 CSS 代碼輕鬆更改此設置。 為此，只需導航到自定義然後附加 CSS部分並添加以下行：

 .widget 區域 .widget {
顏色：綠色；
字體大小：1em；
}

結果如下：

28. 在產品圖片上顯示店面“銷售”徽章

WooCommerce Storefront 主題的默認版本允許您為特定產品定義銷售或折扣價。 但是，如果您想在產品圖片上添加銷售徽章，只需導航到自定義然後附加 CSS部分並添加以下行：

 ul.products li.product.onsale {
位置：絕對；
頂部：137px；
右：62px；
}

結果如下：

29.更改“銷售”徽章的顏色

要更改銷售徽章的顏色，只需導航到自定義然後附加 CSS部分並添加以下行：

 .onsale {
背景顏色：#FFFFFF；
邊框顏色：綠色；
顏色：綠色；
}

結果如下：

30.更改數量“加減”框顏色

這可以通過更改數量加號和減號按鈕的背景顏色來完成。 為此，只需導航到自定義然後附加 CSS部分並添加以下行：

 .數量.數量{
顏色：#000；
背景顏色：#f5df72；
}

結果如下：

31.如何更改Storefront header的背景顏色

WordPress Customizer 允許我們更改 Storefront 主題標題的背景顏色。 為此，只需導航到自定義然後標題部分：

32. 更改頁眉小車的背景顏色

更改標題的顏色時，迷你車下拉菜單會繼承此顏色。 但是，您可以通過使用以下 CSS 規則來更改此設置以增加可見性。 只需導航到自定義然後附加 CSS部分並添加以下行：

.

 woocommerce.widget_shopping_cart {
背景：白色；
邊框半徑：12px；
}

結果如下：

33. 在店面頁腳中添加圖片，使用 CSS 下面的版權

如果您想在版權文本下方添加您自己的徽標、接受的付款或合作夥伴徽章，只需導航至圖層、自定義，然後單擊頁腳。

單擊自定義以展開面板，然後單擊背景中的選擇圖像。

選擇您想要的圖像並添加它。

選擇No Repeat 和 Bottom ，或根據需要手動定位。

導航回定制器並單擊CSS以展開面板。 但是，您應該確保百分比符合您的規範。 然後添加以下行：

 .site-info：在{之後
內容： '';
background-image: url(添加你自己的 URL);
顯示：塊；
寬度：100px；
高度：100px；
邊距：0 自動；
}

34. 如何去除頁腳的空白

只需導航到自定義然後附加 CSS部分並添加以下行：

 .footer-widgets { padding-top: 0; }

結果如下：

35. 如何去掉標題但保留菜單

只需導航到自定義然後附加 CSS部分並添加以下行：

 #標頭 > .col-full,
#masthead .site-header-cart {
顯示：無；
}

36.如何去除超鏈接的下劃線

默認情況下，Storefront 主題下劃線鏈接，如果你想刪除它們，只需導航到自定義然後附加 CSS部分並添加以下行：

 一個 {
文字裝飾：無！重要；
}

結果如下：

37. 如何刪除 WooCommerce Storefront 主題帖子上的特色圖片

只需將以下行添加到子主題的 function.php 文件中：

 remove_action('storefront_post_content_before', 'storefront_post_thumbnail', 10);

38.如何更改店面首頁橫線的顏色

只需將以下代碼添加到您的子主題的 custom.css 文件中：

 .page-template-template-homepage .hentry .entry-header,
.page-template-template-homepage .hentry,
.page-template-template-homepage .storefront-product-section {
邊框顏色：紅色；
}

39. 如何自定義 Storefront WooCommerce on sale 徽章

只需將以下代碼添加到您的附加 CSS 部分：

 .onsale {
背景顏色：#FFFFFF；
邊框顏色：#FF0000；
顏色：#FF0000；
}

結果如下：

40.如何改變logo、二級導航和搜索欄的大小

要一次更改它們，只需將以下代碼添加到您的附加 CSS 部分：

 @media screen and (min-width: 768px) {
/* 標識 */
.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { 寬度: 30% !important; /* 如果需要，請使用 px 值，例如。 350 像素 */ }

/* 二次導航 */
.site-header .secondary-navigation { 寬度：40% !important; /* 如果需要，請使用 px 值，例如。 350 像素 */ }

/* 搜索欄 */
.site-header .site-search { 寬度：30% !important; /* 如果需要，請使用 px 值，例如。 350 像素 */ }

41. 如何刪除 WooCommerce 產品頁面上的側邊欄以全寬

只需將以下代碼添加到子主題的 functions.php 文件中：

 add_action('get_header', 'remove_storefront_sidebar');
如果 ( is_product() ) {
remove_action('storefront_sidebar', 'storefront_get_sidebar', 10);
}
}
將此行添加到您的附加 CSS 部分：
body.woocommerce #primary { 寬度：100%; }

結果如下：

42. 如何在菜單項中添加圖像或圖標。

為此，只需安裝並激活菜單圖像，圖標變得簡單插件並根據需要添加圖標。 只需將所需的尺寸添加到不同的菜單字段。

這是一個視覺描述：

43. 如何在 Storefront 中添加頂欄

這可以添加一些很酷的東西，比如社交圖標或歡迎信息。 要添加它，只需將以下代碼行添加到子主題的 function.php 文件中：

 /**
* 在店面的標題之前添加一個頂部欄。
*/
功能 storefront_add_topbar() {
?>
<div id="topbar">
<div class="col-full">
<p>歡迎測試 WooStore</p>
</div>
</div>
<?php
}
add_action('storefront_before_header', 'storefront_add_topbar');

然後在定制器的 Additional CSS 部分添加此 CSS：

 #頂欄{
背景顏色：#1F1F20；
高度：40px；
行高：40px；
}

#topbar p {
顏色：#fff;
}

結果如下：

44. 如何在頂部欄添加自定義消息

這是在頂部欄中添加自定義消息的另一種方法。 只需將以下代碼行添加到子主題的 function.php 文件中：

 /**
* 在店面的標題之前添加一個頂部欄。
*/
功能 storefront_add_topbar() {
全球 $current_user;
獲取當前用戶信息（）；

if ( !empty( $current_user->user_firstname ) ) {
$user = $current_user->user_firstname;
} 別的 {
$user = __('guest', 'storefront-child');
}

?>
<div id="topbar">
<div class="col-full">
<p>歡迎<?php echo $user ?>！</p>
</div>
</div>
<?php
}
add_action('storefront_before_header', 'storefront_add_topbar'); 

45. 如何使用 Storefront 使 Meta Slider 全寬

元滑塊在許多 WordPress 網站中非常流行。 添加這段代碼以將滑塊拉伸為全寬。 將其添加到子主題的將滑塊拉伸為全寬：

 add_action('init', 'child_theme_init');
函數 child_theme_init() {
add_action('storefront_before_content', 'woa_add_full_slider', 5);
}
函數 woa_add_full_slider() { ?>
<div id="滑塊">
<?php echo do_shortcode("[metaslider id=388 percentwidth=100]"); ?>
</div>
<?php
}

但是，您可以使用插件來執行此操作，一個很好的例子是WooSlider插件。

46. 如何向店面添加額外的 Google 字體

這非常簡單，您只需下載並激活Easy Google Fonts插件即可。 WordPress 社區中超過 300,000 名用戶信任這個優秀的字體插件。

47.如何從標題中刪除搜索欄

這是從標題中刪除搜索欄的另一種方法，方法是將以下代碼粘貼到子主題的 function.php 文件中：

 add_action('init', 'jk_remove_storefront_header_search');
功能 jk_remove_storefront_header_search() {
remove_action('storefront_header', 'storefront_product_search', 40);
}

結果如下：

48. 如何在店面隱藏頁面標題

如果要隱藏頁面標題，則需要安裝並激活 wordpress.org 社區中提供的 Storefront Theme 插件的 Title Toggle 。 超過 10,000 名用戶信任此插件。

49. 如何刪除店面頁腳中的“由 WooThemes 設計”

正如前面討論的那樣，這是該問題的另一種解決方案。 您需要將此代碼添加到子主題的 function.php 文件中：

 add_action('init', 'custom_remove_footer_credit', 10);
功能 custom_remove_footer_credit () {
remove_action('storefront_footer', 'storefront_credit', 20);
add_action('storefront_footer', 'custom_storefront_credit', 20);
}
功能 custom_storefront_credit() {
?>
<div class="網站信息">
＆複製; <?php echo get_bloginfo('name') . ' ' 。 get_the_date('Y'); ?>
</div><!-- .site-info -->
<?php
}

結果如下：

50. 如何將 Font Awesome 圖標添加到您的店面菜單

這可以通過使用 wordpress.org 社區中提供的Font Awesome 4 Menus插件來完成。 超過 50,000 名用戶信任此插件。

51. 如何在店面的移動視圖中重命名“導航”

為此，只需將此代碼添加到子主題的 function.php 文件中：

 功能店面_primary_navigation（）{
?>
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( '編輯菜單名稱', '店面' ); ?></按鈕>
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>
</nav><!-- #site-navigation -->
<?php
}

結果如下：

52. 如何在店面“我的帳戶”頁面中添加客戶頭像

這可以通過簡單地將以下代碼行添加到子主題的 function.php 文件中來完成：

/**
* 在歡迎信息後打印我的帳戶頁面中的客戶頭像
*/
功能 storefront_myaccount_customer_avatar() {
$current_user = wp_get_current_user();

迴聲'<div class="myaccount_avatar">'。 get_avatar($current_user->user_email, 72, '', $current_user->display_name) 。 '</div>';
}
add_action('woocommerce_before_my_account', 'storefront_myaccount_customer_avatar', 5);
然後在 Additional CSS 部分添加以下 CSS 命令規則：
.myaccount_avatar {
右邊框：1px 實心 rgba(0, 0, 0, 0.1);
向左飄浮;
padding-right: 10px;
寬度：83px；
}

.myaccount_user {
左邊框：3px 實心 #787E87;
浮動：對；
左邊距：10px；
寬度：88%；
}

結果如下：

53. 如何更改 WooCommerce 店面頁腳高度

通過在Additional CSS部分添加以下 CSS 代碼，可以很容易地更改 WooCommerce Storefront 頁腳高度：

 section.footer-widgets {
填充頂部：25px；
}

div.site 信息 {
填充頂部：16px；
底部填充：25px；
}

結果如下：

54.將背景圖像添加到特定主頁部分的店面

默認的店面主題有六個部分，即產品類別、近期產品、特色產品、熱門產品、特價產品和暢銷產品。 只需將以下代碼添加到Additional CSS部分：

 .店面特色產品{
背景圖片：網址（在此處添加您的網址）；
背景位置：中心中心；
背景重複：不重複；
背景尺寸：封面；
-o-background-size：封面；
}

結果如下：

55.為店面主頁部分添加背景顏色

為此，您需要首先確定要添加顏色的部分。 這可以通過將以下代碼添加到Additional CSS部分來輕鬆完成：

 .店面特色產品{
背景顏色：#FFEB3B;
}

結果如下：

56.如何刪除或隱藏主頁部分標題

為此，您需要首先確定要刪除或隱藏的部分。 這可以通過將以下代碼添加到Additional CSS部分來完成：

 .storefront-recent-products .section-title {display:none;}
.storefront-product-categories .section-title {display:none;}
.storefront-featured-products .section-title {display:none;}
.storefront-popular-products .section-title {display:none;}
.storefront-on-sale-products .section-title {display:none;}
.storefront-best-selling-products .section-title {display:none;}

結果如下：

57.如何更改主頁部分標題

為此，您需要首先確定要刪除標題的部分。 此列表將幫助您識別店面主頁部分過濾器：

• storefront_product_categories_args
• storefront_recent_products_args
• storefront_featured_products_args
• storefront_popular_products_args
• storefront_on_sale_products_args
• 店面_best_sales_products_args

在子主題的 function.php 文件中添加以下代碼：

 add_filter('storefront_featured_products_args', 'custom_storefront_product_featured_title');

//首頁特色產品標題
功能 custom_storefront_product_featured_title( $args ) {
$args['title'] = __('New Featured Products Title Here', 'storefront' );
返回 $args;
}

結果如下：

58.如何增加每頁主頁部分產品

只需將以下代碼行添加到子主題的 function.php 文件中。

 add_filter('storefront_featured_products_shortcode_args','custom_storefront_featured_product_per_page' );
// 每頁精選特色產品
功能 custom_storefront_featured_product_per_page( $args ) {
$args['per_page'] = 10;
返回 $args;
}

59.如何增加主頁部分產品列網格或列

只需將以下代碼行添加到子主題的 function.php 文件中。

 add_filter('storefront_featured_products_shortcode_args','custom_storefront_featured_product_per_row' );

// 特色特色產品欄
功能 custom_storefront_featured_product_per_row( $args ) {
$args['columns'] = 2;
返回 $args;
}

結果如下：

60.如何在首頁顯示更多分類

只需將以下代碼行添加到子主題的 function.php 文件中。

 add_filter('storefront_product_categories_shortcode_args','custom_storefront_category_per_page' );

// 分類產品
功能 custom_storefront_category_per_page( $args ) {
$args['number'] = 10;
返回 $args;
}

61.如何在主頁部分標題下方添加描述

只需將此代碼添加到子主題的 function.php 文件中：

 add_action('storefront_homepage_after_featured_products_title', 'custom_storefront_product_featured_description');

功能 custom_storefront_product_featured_description(){ ?>
<p class="element-title--sub">
<?php echo "這裡的部分描述";?>
</p>
<?php }

62.如何從店面主頁中刪除評價最高的產品部分

有兩個是這樣做的。 一種是安裝插件，可以幫助您刪除此部分。 您可以查看主頁控制插件。

但是，您可以使用鉤子簡單地刪除該部分。 只需在子主題的 function.php 文件中添加以下行即可完成此操作：

 remove_action('主頁', 'storefront_popular_products', 50 );

此外，您可以通過在Additional CSS部分添加以下代碼來刪除它：

 .storefront-popular-products .section-title {display:none;}

63.如何更改評分最高的產品部分標題

只需將此代碼添加到子主題的 function.php 文件中：

 add_filter('storefront_popular_products_args', 'custom_storefront_product_popular_title');
//首頁特色產品標題
功能 custom_storefront_product_popular_title( $args ) {
$args['title'] = __('Top Products', 'storefront');
返回 $args;
}

64.如何在評分最高的部分顯示更多產品

Storefront 的默認設置在評分最高的部分中顯示 4 個產品。 在此示例中，我們將其增加到 15 個產品。 只需將此代碼添加到子主題的 function.php 文件中：

 add_filter('storefront_popular_products_shortcode_args','custom_storefront_top_product_per_page');

// 每頁精選特色產品
功能 custom_storefront_top_product_per_page( $args ) {
$args['per_page'] = 12;
返回 $args;
}

65.如何從店面主頁中刪除特價產品部分

有兩個是這樣做的。 一種是安裝插件，可以幫助您刪除此部分。 您可以查看主頁控制插件。

但是，您可以使用鉤子簡單地刪除該部分。 只需在子主題的 function.php 文件中添加以下行即可完成此操作：

 remove_action('主頁', 'storefront_on_sale_products', 60);

66.如何更改特價商品的背景顏色

這可以通過將以下代碼添加到Additional CSS部分來完成：

 .storefront-on-sale-products{
背景顏色：#FFEB3B;
}

67.如何自定義按鈕

可以使用Customizer修改按鈕。 導航到外觀，然後自定義。 單擊按鈕，然後根據您的規格對其進行樣式設置。

這是一個例子：

68.如何添加店面自定義頁腳鍊接

使用此代碼，您將能夠添加自定義頁腳鍊接，並且可以根據需要設置它們的樣式。 只需將這些代碼行添加到子主題的 function.php 文件中：

 add_filter('storefront_credit_links_output'，函數($default_links){
$輸出 = [
衝刺f(
'<a href="%s">%s</a>', get_home_url(), '在此處添加自定義鏈接'

),

$default_links
];
返回內爆（
' <span role="separator" aria-hidden="true"></span> ', $output
);
});

結果如下：

69. 店面秀博客摘錄檔案

如果您在 WooCommerce Storefront 主題上運行博客，則此代碼將能夠顯示博客摘錄，而不是博客帖子存檔中的全部內容。 只需將這些代碼行添加到子主題的 function.php 文件中：

 add_action（'初始化'，函數（）{
remove_action('storefront_loop_post', 'storefront_post_content', 30);
add_action('storefront_loop_post', function() {
echo '<div class="entry-content" itemprop="articleBody">';
如果（有_post_thumbnail（））{
the_post_thumbnail('大', ['itemprop' => 'image']);
}
the_excerpt();
迴聲'</div>';
}, 30);
});

70. 如何添加自定義 Metaviewport 標籤

只需將這些代碼行添加到子主題的 function.php 文件中：

 add_filter（'wpex_meta_viewport'，函數（）{
return '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />';
});

71.如何刪除推薦插件通知

插件通知可能對某些人來說很麻煩，並且很容易將其刪除。 只需將這些代碼行添加到子主題的 function.php 文件中：

 // 刪除某些插件
功能 my_recommended_plugins( $plugins ) {
// 刪除安裝 WooCommerce 的通知
未設置（$plugins['woocommerce']）；
// 返回插件
返回$插件；
}
add_filter('wpex_recommended_plugins', 'my_recommended_plugins');
// 刪除所有插件
// 如果您正在使用某些插件，則不建議這樣做，因為通知也用於讓您知道更新
add_filter('wpex_recommended_plugins', '__return_empty_array');

72. 如何有條件地顯示或隱藏頁腳標註

只需將這些代碼行添加到子主題的 function.php 文件中：

 功能 my_callout_visibility( $bool ) {
// 隱藏在首頁
如果 ( is_front_page() ) {
$布爾=假；
}
// 返回布爾值
返回$布爾；
}
add_filter('wpex_callout_enabled', 'my_callout_visibility', 20);

73.如何刪除主題元生成器

這用於支持，以便通知您正在使用的主題版本。 它在那裡沒有問題，但如果你想在這裡刪除它是如何。

只需將這些代碼行添加到子主題的 function.php 文件中：

 add_action（'初始化'，函數（）{
remove_action（'wp_head'，'wpex_theme_meta_generator'，1）；
}, 10)

74.如何為沒有標題的頁面在頁眉下自動添加空格

每當您禁用任何頁面的主頁面標題時，標題下方都沒有剩餘空間。 此代碼段將幫助您添加間距，以便您可以插入與頂部齊平的滑塊、圖像或其他內容。 只需將以下代碼添加到Additional CSS部分：

 body.page-header-disabled #main {
填充頂部：30px；
}

75. 如何在移動設備上隱藏滾動到頂部按鈕

只需將以下代碼添加到Additional CSS部分：

 @media only screen and (max-width: 959px) {
#site-scroll-top { 顯示：無！重要； }
}

76. 如何將頁眉和頁腳移出“盒裝”佈局

只需將這些代碼行添加到子主題的 function.php 文件中：

 功能 myprefix_move_header_footer_out_of_boxed_layout() {
// 刪除頁眉/頁腳
remove_action('wpex_hook_wrap_top', 'wpex_header');
remove_action('wpex_hook_wrap_bottom', 'wpex_footer');
// 重新添加頁眉/頁腳
add_action('wpex_outer_wrap_before', 'wpex_header', 9999);
add_action('wpex_outer_wrap_after', 'wpex_footer');
}
add_action('init', 'myprefix_move_header_footer_out_of_boxed_layout');

77.如何向網格模塊添加更多列選擇

只需將這些代碼行添加到子主題的 function.php 文件中：

 // 此函數將添加列選擇，然後您必須添加自定義 CSS
// 對於實際的列。 示例 '.span_1_of_8{ 寬度：12.5%; }'
功能 myprefix_grid_columns( $columns ) {
$columns['8'] = '8';
$columns['9'] = '9';
$columns['10'] = '10'; // 添加任意數量
返回$列；
}
add_filter('wpex_grid_columns', 'myprefix_grid_columns');

78.如何在標題下添加二級自定義菜單

只需將這些代碼行添加到子主題的 function.php 文件中：

 功能 add_custom_menu_above_main_content() { ?>
<div class="my-nav-wrapper clr">
<div class="container clr"> <!-- .center 導航欄內容 -->
<?php
// 解決方案 1 添加導航欄簡碼
echo do_shortcode('[vcex_navbar menu="60"]'); //更改菜單ID
// 使用 WP 菜單的解決方案 2 參見
// @ https://codex.wordpress.org/Function_Reference/wp_nav_menu for args
$args = 數組（）；
wp_nav_menu($args);
// 方案3使用uberMenu等菜單插件
do_shortcode('[menu_shortcode_here]'); ?>
</div>
</div>
<?php }
add_action('wpex_hook_header_after', 'add_custom_menu_above_main_content');

79.如何從頁面標題中刪除標題並僅保留麵包屑

只需將這些代碼行添加到子主題的 function.php 文件中：

 // 刪除頁眉區域的標題
add_action（'初始化'，函數（）{
remove_action('wpex_hook_page_header_inner', 'wpex_page_header_title');
remove_action('wpex_hook_page_header_content', 'wpex_page_header_title'); // 總計 v5+
});

80. 動作參考

這些是 Storefront 主題中使用的所有可用 add_action() 函數。 它將函數附加到 do_action 定義的鉤子上

一般的

以下是一些通用的 Action 函數：

storefront_before_site – Executed after opening <body> tag

 storefront_before_content – 在打開 <div id="content"> 標籤之前執行
storefront_content_top – 打開 <div id="content"> 標籤後執行

標題

storefront_before_header – 在 <div id="page"> 標記之後執行
storefront_header – 在 <header id="masthead"> 標記的 <div class="col-full"> 內執行
主頁
storefront_homepage – 在主頁內容部分的 <div class="col-full"> 內執行

產品類別

storefront_homepage_before_product_categories – 在 <section class="storefront-product-categories"> 主頁部分 storefront_homepage_after_product_categories_title` 之前執行 – 在 <h2 class="section-title"> 產品類別部分標題之後執行 storefront_homepage_after_product_categories – 在 <section class="storefront 之後執行-product-categories">主頁部分

最近的產品

storefront_homepage_before_recent_products – 在 <section class="storefront-recent-products"> 主頁部分之前執行 storefront_homepage_after_recent_products_title – 在 <h2 class="section-title"> 最近產品部分標題之後執行 storefront_homepage_after_recent_products – 在 <section class="storefront-最近的產品">主頁部分

特色產品

storefront_homepage_before_featured_products – 在 <section class="storefront-featured-products"> 之前執行
主頁部分 storefront_homepage_after_featured_products_title – 在 <h2 class="section-title"> 之後執行
特色產品部分標題 storefront_homepage_after_featured_products – 在 <section class="storefront-featured-products"> 主頁部分之後執行

熱門產品

storefront_homepage_before_popular_products – 在 <section class="storefront-popular-products"> 主頁部分之前執行 storefront_homepage_after_popular_products_title – 在 <h2 class="section-title"> 熱門產品部分標題之後執行 storefront_homepage_after_popular_products – 在 <section class="storefront- 之後執行流行產品">主頁部分

在售產品

storefront_homepage_before_on_sale_products – 在 <section class="storefront-on-sale-products"> 主頁部分之前執行 storefront_homepage_after_on_sale_products_title – 在 <h2 class="section-title"> 特價商品部分標題之後執行 storefront_homepage_after_on_sale_products – 在 <section 類之後執行="storefront-on-sale-products"> 主頁部分

暢銷產品

storefront_homepage_before_best_sales_products – 在 <section class="storefront-best-sales-products"> 主頁部分之前執行
storefront_homepage_after_best_ sell_products_title – 在 <h2 class="section-title"> 暢銷產品部分標題之後執行
storefront_homepage_after_best_sales_products – 在 <section class="storefront-best-sales-products"> 主頁部分之後執行

博客存檔頁面

storefront_loop_before – 在博客存檔的所有帖子之前執行
storefront_loop_post – 在博客存檔的每個帖子之前執行
storefront_post_content_before – 在博客存檔中每個帖子的內容之前執行
storefront_post_content_after – 在博客存檔中每篇文章的內容之後執行

一般頁面

storefront_page_before – 在單個頁面上的 `<main id=”main”>` 標記之後執行
storefront_page – 在單個頁面上的開始 `<div id=”post-...”>` 標記之後執行
storefront_page_after – 在單個頁面上的 `<div id=”post-...”>` 標記末尾執行

單個帖子

storefront_single_post_before – 在單個博客文章的開始 <main id="main"> 標記之後執行
storefront_single_post_top – 在單個帖子上打開 <div id="post-..."> 標記之後執行
storefront_single_post – 在 storefront_single_post_top 鉤子之後立即執行以顯示帖子內容
storefront_single_post_bottom – 在單個帖子的結束 <div id="post-..."> 標記之前執行
storefront_single_post_after – 在單個博客文章的結束 <main id="main"> 標記之前執行

側邊欄

storefront_sidebar – 在包含側邊欄的所有頁面上執行，前提是存在小部件

頁腳

storefront_before_footer – 在 <footer id="colophon"> 標記之前執行
storefront_footer – 在關閉 <footer id="colophon"> 標記之前執行
storefront_after_footer – 關閉 <footer id="colophon"> 標籤後執行

過濾器參考指南

本部分列出了 Storefront 主題中可用的一些最常用的過濾器。

評論

文件：comments.php

storefront_comment_form_args – 過濾評論回复標題 HTML 前後

店面模板功能

文件：/inc/storefront-template-functions.php

導航菜單

storefront_menu_toggle_text – 過濾響應式菜單切換文本

主頁

產品類別

storefront_product_categories_args – 過濾主頁產品類別參數
storefront_product_categories_shortcode_args – 過濾主頁產品類別短代碼參數

最近的產品

storefront_recent_products_args – 過濾主頁最近的產品參數
storefront_recent_products_shortcode_args – 過濾主頁最近的產品短代碼參數

特色產品

storefront_featured_products_args – 過濾主頁特色產品參數。
storefront_featured_products_shortcode_args – 過濾主頁特色產品短代碼參數。

熱門產品

storefront_popular_products_args – 過濾主頁熱門產品參數。
storefront_popular_products_shortcode_args – 過濾主頁熱門產品短代碼參數。

在售產品

storefront_on_sale_products_args – 過濾主頁銷售產品參數。
storefront_on_sale_products_shortcode_args – 過濾主頁特價商品短代碼參數

暢銷產品

storefront_best_sales_products_args – 過濾主頁最暢銷產品參數
storefront_best_sales_products_shortcode_args – 過濾主頁暢銷產品短代碼參數

單個帖子

storefront_single_post_posted_on_html – 過濾單張發布的詳細信息

頁腳

storefront_footer_widget_rows – 過濾頁腳小部件行數（默認值：1）
storefront_footer_widget_columns - 過濾頁腳小部件列的數量（默認值：4）
storefront_copyright_text – 過濾頁腳版權文本
storefront_credit_link – 過濾頁腳信用鏈接

店面功能

文件：/inc/storefront-functions.php

 storefront_header_styles – 過濾標題樣式
storefront_homepage_content_styles – 過濾主頁內容樣式

店麵類

文件：/inc/class-storefront.php

 storefront_custom_background_args – 過濾默認背景參數
storefront_default_background_color – 過濾默認站點背景顏色
storefront_sidebar_args – 過濾默認的側邊欄參數
storefront_google_font_families – 過濾默認的 Google 字體系列
storefront_navigation_markup_template – 過濾導航的輸出標記。

WooCommerce 模板功能

文件：/woocommerce/storefront-woocommerce-template-functions.php

 storefront_upsells_columns – 過濾追加銷售列（默認值：3）
storefront_loop_columns – 過濾默認產品循環顯示（默認值：3）
storefront_handheld_footer_bar_links – 過濾手持頁腳欄鏈接

WooCommerce 課程

文件：/woocommerce/class-storefront-woocommerce.php

 storefront_related_products_args – 過濾相關產品參數
storefront_product_thumbnail_columns – 過濾產品縮略圖列（默認值：4）
storefront_products_per_page – 在產品類別中按頁面過濾產品。

結論

如果您想自定義店面主題，在這個全面的店面自定義指南中分享的這些技巧應該是最好的起點。 這還為您提供了代碼片段，您可以快速添加 Storefront 子主題並立即獲得結果。 我希望您發現此 Storefront 自定義指南很有用。

類似文章

1. 如何使用 4 個簡單選項刪除使用 Storefront 和 Woocommerce 頁腳鍊接構建
2. 如何使用插件刪除店面頁腳文本和鏈接
3. 單獨設置 WordPress 菜單項的樣式 WordPress 菜單 CSS 類
4. 如何使 Divi 移動菜單可滾動快速修復解決方案
5. 如何在不使用插件的情況下在 WordPress 中創建數字分頁