如何以編程方式編輯 WooCommerce 商店頁面（CSS 和 PHP）

已發表: 2020-08-27

尋找自定義商店頁面的方法？ 在本教程中，我們將向您展示如何使用 PHP 和 CSS 以編程方式編輯 WooCommerce 商店頁面。

在任何在線商店中，編輯和優化商店頁面以提高轉化率至關重要。 商店頁面是您展示產品的地方，它可以成就或破壞您的業務。 如果您經營的是 WooCommerce 商店，我們強烈建議您自定義商店頁面並充分利用它。 在本指南中，我們將向您展示如何以編程方式編輯 WooCommerce 商店頁面。

為什麼在 WooCommerce 中編輯商店頁面很重要？

商店頁面是 WooCommerce 中最重要的頁面之一。 這是您向訪問者展示產品的地方，因此它可以對您商店的業績產生巨大影響。 一個好的商店頁面可以改善用戶體驗，提高轉化率，並幫助您產生用戶參與度。 另一方面，糟糕的商店頁面會適得其反，扼殺您的業務。

這就是為什麼您必須優化它以最大化您的銷售額。 您可以使用插件和頁面構建器來做到這一點，但如果您有編碼技能，那麼創建自己的解決方案是可行的方法。

如何以編程方式編輯 WooCommerce 商店頁面

我們之前已經看到了自定義商店頁面的不同方法。 但是，在本教程中，我們將重點介紹如何使用一些 CSS 和 PHP 代碼以編程方式編輯 WooCommerce 商店頁面。 值得注意的是，在本指南中，我們將處理子主題，我們還將編輯 WooCommerce 默認商店模板。 我們將重點放在 WooCommerce 模板文件和對子主題的functions.php文件的一些引用上。

在本教程中，您將學習如何以編程方式編輯 WooCommerce 商店頁面：

  1. 禁用默認的 WooCommerce 商店頁面模板
  2. 自定義標題和內容
    1. 最受歡迎的產品
    2. 暢銷產品
    3. 評分最高的
    4. 按分類顯示產品
    5. 在functions.php中自定義 WooCommerce 商店頁面
  3. 編輯產品循環的佈局並應用 CSS 樣式表
    1. 編輯每行的默認列數
    2. 將 CSS 樣式應用到商店頁面
  4. 編輯 WooCommerce 商店頁面的循環文件
    1. 替換動畫 gif 的默認“銷售”文本
    2. 刪除排序選項和分頁

在你開始之前

請注意，以下指南涉及高級編碼，因此如果您沒有技術技能，我們建議您改為遵循此其他教程。

在開始之前，我們還建議您安裝一個子主題。 您可以查看我們的指南，了解如何創建子主題或使用插件單擊幾下即可完成。 最重要的是，由於您將更改核心文件，因此最好對您的站點進行完整備份。

那麼現在，讓我們看看如何使用編碼自定義 WooCommerce 中的商店頁面。

1. 禁用默認的 WooCommerce 商店頁面模板

要自定義商店頁面，有兩種可能的方法：

  1. 您可以覆蓋負責打印商店頁面的 WooCommerce 文件
  2. 使用 WC 掛鉤將自定義腳本添加到您的子主題的functions.php文件

您可以像子主題的functions.php文件一樣編輯 WooCommerce HTML 模板，覆蓋核心文件以防止在有更新時被刪除。 但是，如果 WooCommerce 決定更新這些文件，則與functions.php文件中的內容不完全一樣，您的自定義可能不再有效。

但這沒什麼好擔心的。 WooCommerce 意識到了這一點，因此他們很少以可能破壞您的腳本的方式更新模板文件。 使用functions.php文件的問題是，在添加鉤子後，默認的 WooCommerce 商店頁面仍會顯示。

因此，首先，您需要禁用默認的 WooCommerce 模板商店頁面才能從頭開始創建模板。

archive-product.php 文件

在 WooCommerce 中，負責商店頁面輸出的文件稱為archive-product.php ，您可以在 WooCommerce 模板文件夾中找到它（ WooCommerce > Templates > archive-product.php ）。 以編程方式編輯 WooCommerce 商店頁面 - 禁用商店頁面模板

要覆蓋此文件，您需要將其複制並粘貼到子主題的 WooCommerce 文件夾中，如下所示：

現在，讓我們看一下archive-product.php文件，以便您了解 WooCommerce 如何顯示商店頁面。 為此，請打開您最喜歡的集成開發環境 (IDE)，轉到 WooCommerce 插件的模板文件夾，然後打開文件。 您可以對其進行編輯和使用，就像您可以自定義任何其他 WC 模板文件一樣。

在您這樣做之前，請確保您有原始文件的備份，以便在必要時撤消任何更改。

在archive-product.php文件中，您將看到幾個do_action()函數。 這些函數用於為商店頁面創建當前可用的 WooCommerce 掛鉤。 要完全禁用 WooCommerce 商店頁面，只需刪除負責打印產品的循環：

 if (wc_get_loop_prop('total')) {
    而（有_posts（））{
        the_post();
        do_action('woocommerce_shop_loop');
        wc_get_template_part('內容', '產品');
    }
}

您可以在此處進行更多更改，但為了簡化它，我們只會刪除循環並保留其他所有內容。 如果您決定進行更多更改，請記住，如果您刪除一些do_action()函數，則相應的短代碼將不再在網站的任何頁面上工作。

刪除打印產品的循環後， archive-product.php文件將如下所示：

 定義（'ABSPATH'）|| 出口;
get_header('商店');
do_action('woocommerce_before_main_content');
如果（woocommerce_product_loop（））{
    do_action('woocommerce_before_shop_loop');
    // 這裡我們刪除了循環
    do_action('woocommerce_after_shop_loop');
} 別的 {
    do_action('woocommerce_no_products_found');
}
do_action('woocommerce_after_main_content');
do_action('woocommerce_sidebar');
get_footer('商店');

而已！ 您已禁用默認商店頁面模板並以編程方式編輯了 WooCommerce 商店頁面！ 現在你有一個空的商店頁面，所以你可以開始設計你自己的。

2. 以編程方式自定義 WooCommerce 商店頁面的標題和內容

內容和標題可以是任何 HTML 標記，包括圖像、表格或鏈接。 甚至是運行外部 JavaScript 文件的空容器之類的東西。 為此，您將需要 WooCommerce 短代碼的基本知識，因為您將使用它們在商店頁面上顯示產品。 如果您不熟悉 WC 短代碼，請查看本指南。

現在，讓我們編輯 WC 商店頁面並按最受歡迎、最暢銷、評分最高和分類法顯示產品。 此外，我們將向您展示如何在循環之外添加一些標題和內容。

2.1 展示最受歡迎的產品

要顯示最受歡迎的產品，您需要編輯子主題的archive-product.php文件。 首先，使用以下簡碼

[ products orderby="popularity" ]

就在你刪除它之前循環所在的位置。 # 顯示最受歡迎的產品：2 列中的 2 個產品

do_action('woocommerce_before_shop_loop');
echo '<h1>最受歡迎！！</h1>';
do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); do_action('woocommerce_after_shop_loop');

在短代碼中，您將添加一個名為m-popular的類，您可以稍後在應用樣式時使用它。 在上面的示例中，我們將其設置為在單個 2 列行中顯示 2 個產品(columns=”2″ limit=”2″) 。 請注意，您不能像在帖子或頁面中使用短代碼一樣在此處使用短代碼。

您必須使用do_shortcode()函數才能使簡碼起作用。 如果一切順利，現在您應該在商店頁面上看到： 自定義商店頁面

2.2 暢銷產品

以編程方式自定義 WooCommerce 商店的另一種方法是按暢銷書對產品進行分類。 為此，除了回顯短代碼外，您還將使用簡單的 HTML 標記 ( <h1> ) 添加一些內容。 在這裡，您可以添加與適當的 HTML 格式匹配的任何其他類型的內容。

讓我們以 2 行 3 列的佈局展示最暢銷的產品。 為此，只需將其粘貼到您在上一步 2.1 中插入的echo do_shortcode()行之後：

 echo '<h1>暢銷書</h1>';
do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

你得到的是這樣的： 自定義商店頁面 如果您只想添加暢銷商品而不是最受歡迎的產品，只需將 2.1 中的echo線替換為 2.2 中的迴聲線即可。

2.3 評分最高的產品

現在，讓我們更多地使用短代碼並展示頂級產品。 這一次，我們將使用一個沒有比類更多屬性的簡碼。

 echo '<h1>評分最高</h1>';
do_shortcode('[ top_rated_products class="t-rated" ]');

讓我們看看這之後會發生什麼： 自定義商店頁面 如您所見，WooCommerce 默認佈局有 4 列。 讓我們暫時就這樣吧，我們稍後再談。

2.4 在商店頁面按分類顯示產品

除了顯示最暢銷或評價最高的產品外，您還可以按分類顯示它們。 例如，以下代碼將使用您之前使用的相同屬性打印海報和服裝類別的產品，但將列數更改為 5。

 echo '<h1>服裝分類：</h1>';
do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>海報分類：</h1>'; echo '<h2>把最好的海報貼在牆上</h2>'; do_shortcode('[ products category="Posters" limit="4" class="t-posters" ]');

這就是您的archive-product.php現在的樣子：

 <header class="woocommerce-products-header">
       <h1 class="woocommerce-products-header__title page-title"></h1>	
</標題>
<?php
如果（woocommerce_product_loop（））{
	do_action('woocommerce_before_shop_loop');		
	
	echo '<h1>最受歡迎！！</h1>';
        do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); echo '<h1>暢銷書</h1>'; do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]'); echo '<h1>評分最高</h1>'; do_shortcode('[ top_rated_products class="t-rated" ]'); echo '<h1>服裝分類：</h1>'; do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>海報分類：</h1>; echo '<h2>把最好的海報貼在牆上</h2>'; do_shortcode('[ products category="Posters" columns="2" limit="4" class="t-posters" ]'); do_action('woocommerce_after_shop_loop'); } else { do_action('woocommerce_no_products_found'); } do_action('woocommerce_after_main_content'); do_action('woocommerce_sidebar'); get_footer('商店');

此時，您應該能夠了解如何使用所有 WooCommerce 短代碼及其屬性來構建可以滿足任何設計要求的自定義商店頁面。

2.5 在functions.php中自定義WC商店頁面

如果您想以編程方式自定義 WooCommerce 商店頁面，您還可以編輯functions.php文件。 對於 products 循環之外的內容，您可以使用archive-product.php文件中的一些鉤子，從子主題的functions.php文件中運行它們。 這樣，即使 WC 決定更新其模板文件，您也可以確保您的腳本仍然可以工作。

對於此示例，讓我們添加一個帶有標題、副標題、描述和橫幅的自定義標題。 將此腳本粘貼到子主題的functions.php文件中：

 add_action('woocommerce_before_shop_loop','shop_main_heading');
功能 shop_main_heading(){
	$內容 = '';
	$content.='<h1>歡迎來到我的精彩商店頁面！</h1>'; 
	$content.='<h2>自己用愛打造</h2>';
	$content.='<p>感謝路過訪問我的網站商店頁面，請瀏覽您最喜歡的產品並全部購買</p>';
	$content.='<img src="https://www.carpetright.co.uk/globalassets/static-pages/useful-links/samples/sample-banner.jpg"/>';
	迴聲$內容；
}

這是您的商店頁面的外觀： 自定義商店頁面 同樣，您可以使用woocommerce_after_shop_loop鉤子在商店頁面的末尾顯示一些內容。

3. 編輯每行的產品數量並將 CSS 樣式表應用到 WC 商店頁面

到目前為止，您應該能夠使用 WooCommerce 短代碼顯示產品，按特色、分類法、暢銷書和任何其他您想要的方式對它們進行排序。 最重要的是，您應該能夠在商店頁面上的任何位置插入任何類型的內容。 但是，如果您可以走得更遠，將您的商店頁面提升到一個新的水平呢？ 您可以編輯模板佈局並添加一些 CSS 樣式以編程方式自定義您的 WooCommerce 商店頁面。

3.1 編輯每行的默認列數

如果您指定 WC 簡碼的 column 屬性，您可以設置每行將顯示的產品數量。 此外，您可以使用 limit 屬性設置短代碼的產品總數：

 [ product orderby=”popularity” columns=”3” limit=”3” ]

但是，如果您沒有定義 columns 屬性，您可以在子主題的functions.php文件中使用此腳本為每行設置要打印的產品數量。

 add_filter('loop_shop_columns', 'loop_columns', 999);
if (!function_exists('loop_columns')) {
    函數循環列（）{
        return 4 ;//每行 4 個產品
    }
}

僅當 WooCommerce 短代碼中沒有列屬性時，這才會更改每行顯示的默認產品數量。

3.2 應用一些 CSS 樣式到商店頁面

要將一些 CSS 應用到 WooCommerce 商店頁面，您只需將腳本添加到模板文件中，如下所示：

 <風格>
* {
    背景顏色：#a2bcff;
}
</style>

這對於小部分 CSS 是可以的，但不是推薦的做法。 要以 WordPress 的方式應用 CSS 樣式，您需要使用wp_enqueue_scripts掛鉤從不同的文件加載腳本。

在這個例子中，我們將把這個文件命名為shop_style.css並將它存儲在我們的子主題主文件夾中，與默認的style.css文件處於相同的層次結構級別。 創建此文件後，將以下腳本粘貼到您的functions.php文件中：

 add_action（'wp_enqueue_scripts'，'quadlayers_enqueue_css'）；
函數 quadlayers_enqueue_css(){    
    如果（is_shop（））：
    wp_enqueue_style('checkout_style',
        get_stylesheet_directory_uri() 。 '/shop_style.css'
    );
    萬一;
}

如您所見， if(is_shop()):條件必須為真才能將shop_style.css文件排入隊列。 在此文件中，您將擁有僅希望應用於商店頁面的所有樣式腳本。 這與將腳本應用到整個網站前端的子主題中的style.css文件不同。 對於本指南，我們將使用以下shop_style.css文件，但您可以隨意使用您的 CSS 腳本或更改這個：

 div.storefront-sorting:nth-child(2){
	文本對齊：居中；
} 
#main div.storefront-排序 h1{
	字體樣式：正常；
}
#main h1,#main h2{
	字體粗細：加粗；
	字體樣式：傾斜；
	文本對齊：居中；
}
#main > .m-popular,#main > .b-sellers,#main > .t-rated,#main > .t-clothing,#main > .t-posters{	
	邊框：實心#b8b8b8 1px；
	邊框半徑：25px；
	邊距底部：25px；
	填充頂部：35px；	
	填充左：20px；
	padding-right: 20px;	
} 
#main > .m-流行{
	背景顏色：#dbad97;	
}
#main > .b-賣家{
	背景顏色：#b4e6a3;
}
#main > .t 級 {
	背景顏色：#f0f695;	
}
#main > .t-服裝{
	背景顏色：#95b4f6;	
}
#main > .t-海報{
	背景顏色：#c88fe5;	
}

在 CSS 文件中，您會發現一些包含自定義類的選擇器。 我們在創建簡碼之前創建了它們。 例如，我們在短代碼中添加了“b-sellers”類，如下所示：

 do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

因此，在將 CSS 樣式添加到 WooCommerce 商店頁面後，您將得到如下內容（單擊圖像以查看全尺寸）： 點擊圖片以全尺寸查看

單擊圖像以全尺寸查看。

此外，請記住，我們啟用了 StoreFront 主題，並且您可能知道，每個網站上的 CSS 選擇器可能會有所不同，即使它們具有相同的主題。 因此，要使此文件正常工作，您可能需要編輯特定站點的選擇器。

獎勵：如何更改每頁的產品數量

現在，假設您想更改商店頁面上每頁顯示的產品數量。 例如，如果您想每頁顯示 10 個產品，只需將以下代碼添加到functions.php文件中：

 add_filter('loop_shop_per_page', 'new_loop_shop_per_page', 20);

功能 new_loop_shop_per_page( $cols ) {
  $cols = 10;
  返回 $cols;
}

其中$cols包含每頁的產品數量，它從Options -> Reading中獲取值並返回要在每頁上顯示的產品數量。

4. 編輯 WooCommerce 商店頁面的循環文件

到目前為止，我們已經了解瞭如何編輯archive-product.php模板文件以編程方式自定義 WooCommerce 商店頁面。 此文件是 WC 循環運行以顯示頁面的所有產品的位置。 現在，在插件編輯器或 IDE 中打開 WooCommerce 插件文件夾，然後打開循環文件夾。 您會發現它與archive-product.php文件處於同一級別。

在循環文件夾中，您會發現一些文件，您還可以編輯這些文件以進一步自定義商店頁面。 要覆蓋此文件，您需要在子主題中創建一個克隆文件夾和文件。 在您之前創建的 WooCommerce 文件夾下創建一個名為loop的新文件夾。

在此之後，從插件模板中復制原始的sale-flash.php文件並將其粘貼到您的子主題的此循環文件夾中。 我們將使用sale-flash.php文件為所有正在銷售的產品添加動畫 gif。 如果您查看該文件，您會看到這是負責在產品打折時顯示“SALE”消息的腳本。

4.1 替換動畫 gif 的默認“銷售”文本

在本節中，我們將向您展示如何禁用默認的促銷信息並將其替換為動畫 gif。 您需要編輯子主題的flash-sale.php文件，使其如下所示：

 定義（'ABSPATH'）|| 出口;
全球 $post, $product;
if ( $product->is_on_sale() ) { 
   $an_gif = '<img src="https://i1.wp.com/tamingchaos.net/wp-content/uploads/2020/04/Sale-Gif.gif" width="100px" height="60px"/ >';
   迴聲$an_gif；
}

在那裡，您可以將 gif 文件替換為您喜歡的任何其他 gif。

4.2 移除排序選項和分頁

現在，讓我們看看如何禁用 WooCommerce 商店頁面上的“排序依據”選擇器和分頁功能。 與您對sale-flash.php文件所做的類似，您只需保存一個具有相同名稱的空文件即可實現此目的。

在循環文件夾中創建這兩個文件並將它們命名為orderby.php和pagination.php 。 要完全禁用這兩個文件，您應該只將此腳本放在每個文件中：

 定義（'ABSPATH'）|| 出口;

完成此操作後，您的商店頁面上的頁眉和頁腳將更加清晰。 最重要的是，分頁可能不是很有用，因為您要展示大量產品。 以編程方式編輯 WooCommerce 商店頁面 - 排序和分頁 請注意，在sale-flash.php文件中，我們刪除了默認的 WooCommerce 行為並添加了我們自己的顯示動畫 gif。 這是一項非常基本的任務，但這項技術為高級開發人員提供了廣泛的可能性。

最後說明

  • 如果 WooCommerce 決定發布模板更新，則子主題的 WC 模板文件不會阻止覆蓋。 然而，這種情況很少發生。
  • 這些是示例腳本，不得用於生產，它們僅用於教學目的。

獎勵：在 WooCommerce 商店頁面上顯示類別

最後，讓我們看看如何使用一些代碼將類別添加到 WooCommerce 商店頁面。 建議具有編碼技能的用戶使用此方法。 除了 PHP，建議您也了解一點 CSS 才能對代碼進行樣式設置。

注意：在開始之前，請確保備份您的站點並創建一個子主題（如果您還沒有）。

將類別添加到商店頁面

在您的儀表板中，轉到外觀 > 主題編輯器並打開子主題functions.php文件。 單擊右側主題文件側邊欄上的functions.php文件並粘貼以下腳本以添加您的自定義函數。

以下功能將在加載商店頁面的其他元素之前添加您的產品類別。 這意味著購物者將在產品目錄之前看到您的所有產品類別。

 功能產品子類別（$args = 數組（））{
$parentid = get_queried_object_id();

$args = 數組（
'父' => $parentid
);

$terms = get_terms('product_cat', $args);

如果（$條款）{
迴聲'<ul class="product-cats">';

foreach ( $terms 作為 $term ) {
迴聲'<li class="category">'; 
woocommerce_subcategory_thumbnail( $term );
迴聲'<h2>';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
迴聲$術語->名稱；
迴聲'</a>';
迴聲'</h2>';
迴聲'</li>';
}

迴聲'</ul>';
}

}

add_action('woocommerce_before_shop_loop', 'product_subcategories', 50);

此功能會將您的類別添加到 WooCommerce 商店頁面。 但是，請記住，它們可能看起來並不完全符合您的要求，因此您必須使用一些 CSS 來設置新類別部分的樣式。 有關這方面的更多信息，請查看我們關於如何在商店頁面上顯示和样式類別的帖子。

結論

總而言之，商店頁面非常重要，可以成就或破壞您的商店。 這就是為什麼如果您具有編碼技能，我們建議您以編程方式編輯 WooCommerce 商店頁面並對其進行優化以提高轉化率。

在本指南中，我們向您展示瞭如何添加、刪除和自定義商店的不同方面。 但是，這些只是一些示例和想法，可能會幫助您找到一些靈感並將您的商店提升到一個新的水平。 現在是時候讓您玩轉並開發您的自定義設置了。

有關自定義 WooCommerce 商店的更多指南，我們建議您查看：

  • WooCommerce AJAX 添加到購物車
  • 如何將自定義字段添加到結帳頁面？
  • WooCommerce 以編程方式添加到購物車功能

最後，如果你想將 Facebook Shop 與 WooCommerce 連接起來，你應該看看這個完整的指南。 您是否定制了您的在線商店？ 你有什麼改變？ 如果您有任何問題，請在下方發表評論，我們會盡力為您提供幫助！ 你也可以在 Github 中查看完整的代碼。