如何以编程方式编辑 WooCommerce 商店页面（CSS 和 PHP）

寻找自定义商店页面的方法？ 在本教程中，我们将向您展示如何使用 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 文件夹中，如下所示：

现在，让我们看一下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'）|| 出口;

完成此操作后，您的商店页面上的页眉和页脚将更加清晰。 最重要的是，分页可能不是很有用，因为您要展示大量产品。 请注意，在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 中查看完整的代码。