WooCommerce 店面主题主页定制 [终极指南]

已发表: 2020-09-22

WooCommercer 店面主页定制指南店面主题主页定制是任何使用店面 WooCommerce 主题构建的在线商店的关键。定制是必要的，因为好的设计可以吸引访客到您的商店，建立客户对您的品牌的信心并将他们转化为忠诚的客户。

在本教程中，我将展示一些可以在店面主题主页中实现的简单主页自定义，以使其更具吸引力并改善一般用户体验，这对于改善搜索引擎优化同样有用。

在对 Storefront 主题创建任何自定义之前，建议先创建 Storefront 子主题以避免在更新父主题时丢失更改。如果您还想对 Storefront 主题进行更多自定义，可以查看我在上一篇文章中分享的这份 Storefront Customization guide。

店面主题首页定制

WooCommerce Storefront 主题在 WordPress 社区中拥有超过 200,000 个活跃安装。主题主页有 6 个部分：

页面内容
产品类别部分
特色产品部分
最近的产品部分
最受好评的产品部分
在售产品部分
畅销产品部分

但是，在我们进行定制之前，您需要设置主页。为了在主页上显示主页部分，您必须将主页模板分配给您的页面。

除了默认的 WooCommerce 页面之外，Storefront 主题还会自动创建两个额外的页面模板。它们是主页和全宽。在这里，我们将只讨论如何设置主页模板。

主页模板

主页模板为您提供了一种显示所有产品的好方法，让您可以概览产品和产品类别。

当您进入您的商店时，您商店的访客将首先登陆此页面。主页的外观很重要，因为如果它吸引人，访问者可以转化为买家。

设置它是一件轻而易举的事，因为您只需要：

以管理员身份登录到您站点的管理面板。
创建一个新页面并添加一些要显示的内容。
然后，您必须从“页面属性”元框中的模板下拉列表中选择“主页”，如下所示：
发布此页面后，您可以通过导航到设置然后阅读将其设置为主页。
然后，您将检查“静态页面”，然后从“主页”下拉列表中选择创建的主页。
保存更改后，它们将自动反映在前端。

配置完成后，您的主页应该有多个部分，如下所示：

在首页，展示了推荐商品、粉丝收藏、特价商品、畅销商品等不同的集群。这些元素的显示方式与后端的顺序相同。

设置主页后，我们现在可以进行自定义：

1.从主页中删除产品类别图像

WooCommerce 允许您在主页上显示产品以及产品类别及其图像。但是，如果您希望将类别显示为纯文本，则需要将此行添加到子主题的 functions.php 文件中。只需将其添加到 function.php 文件的末尾即可。

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

结果如下：从主页中删除产品类别图像

2.更改Logo中的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 ”。

3.从商店主页中完全删除类别

您可能希望完全删除主页上的类别。此功能只是删除类别。您需要做的就是将以下行添加到 functions.php 文件中：

 功能 storefront_child_reorder_homepage_contant() {

remove_action('主页', 'storefront_product_categories', 20 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

结果如下：从商店主页中完全删除类别

4.从您的商店主页中删除最近的产品

添加新产品后，它会立即添加到首页的“新产品”部分。这是 Storefront 主题中的默认设置。但是，如果您不断地将产品添加到您的列表中，它们可能会使商店页面变得混乱。此外，您可能还希望在此部分中显示其他信息。

要删除此部分，只需将以下代码添加到子主题的 function.php 文件中。

 功能 storefront_child_reorder_homepage_contant() {

remove_action('主页', 'storefront_recent_products', 30 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

结果如下：从您的商店主页中删除最近的产品

5.从商店首页删除畅销产品

对于一些店主来说，最畅销的产品可能不是一个理想的功能。要删除最畅销的部分，只需将以下代码添加到子主题的 function.php 文件中。

 功能 storefront_child_reorder_homepage_contant() {

remove_action('主页', 'storefront_best_sales_products', 70 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

结果如下：从商店主页删除畅销产品

6.删除特色产品

同样，店主可能希望禁用特色产品部分。这可以通过将以下代码片段添加到子主题的 functions.php 文件来完成：

 功能 storefront_child_reorder_homepage_contant() {

remove_action('主页', 'storefront_featured_products', 40 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

结果如下：删除特色产品

7.如何更改店面首页水平线的颜色

只需将以下代码添加到您的子主题的custom.css 文件中：

 .page-template-template-homepage .hentry .entry-header,

.page-template-template-homepage .hentry,

.page-template-template-homepage .storefront-product-section {

边框颜色：红色；

}

8. 将背景图片添加到特定主页部分的店面

默认的店面主题有六个部分，即产品类别、近期产品、特色产品、热门产品、特价产品和畅销产品。只需将以下代码添加到style.css 文件中：

 .店面特色产品{

背景图片：网址（在此处添加您的网址）；

背景位置：中心中心；

背景重复：不重复；

背景尺寸：封面；

-o-background-size：封面；

}

结果如下：

9. 为店面主页部分添加背景颜色

您可能想要为主页部分添加背景颜色。为此，您需要首先确定要添加颜色的部分。这可以通过将以下代码添加到style.css 文件中轻松完成：

 .店面特色产品{

背景颜色：#FFEB3B;

}

结果如下：为店面主页部分添加背景颜色

10.如何删除或隐藏主页部分标题

为此，您需要首先确定要删除或隐藏的部分。这可以通过将以下代码添加到style.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;}

结果如下：如何删除或隐藏主页部分标题

11.如何更改主页部分标题

为此，您需要首先确定要删除标题的部分。此列表将帮助您识别店面主页部分过滤器：

storefront_product_categories_args
storefront_recent_products_args
storefront_featured_products_args
storefront_popular_products_args
storefront_on_sale_products_args
storefront_best_selling_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;

}

结果如下：如何更改主页部分标题

12.如何增加首页部分产品栏目网格/栏目

只需将以下代码行添加到子主题的 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;

}

结果如下：如何增加主页部分产品列网格/列

13.如何在首页显示更多分类

只需将以下代码行添加到子主题的 function.php 文件中。

 add_filter('storefront_product_categories_shortcode_args','custom_storefront_category_per_page' );




// 分类产品

功能 custom_storefront_category_per_page( $args ) {

$args['number'] = 4;

返回 $args;

}

结果如下：如何在主页上显示更多类别

14.如何在主页部分标题下方添加描述

只需将此代码添加到子主题的 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 }

结果如下：如何在主页部分标题下方添加描述

15.如何从店面主页中删除评价最高的产品部分

有两种方法可以做到这一点。一种是安装插件，可以帮助您删除此部分。您可以查看主页控制插件。我们将通过代码来看看更简单的方法。

但是，您可以使用钩子简单地删除该部分。只需将以下行添加到子主题的function.php 文件即可完成：

remove_action( 'homepage', 'storefront_popular_products', 50 );

此外，您可以通过在style.css 文件或Additional CSS部分中添加以下代码来删除它：

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

结果如下：如何从店面主页中删除评价最高的产品部分

16.如何更改评分最高的产品部分标题

只需将此代码添加到子主题的 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;

}

结果如下：如何更改评分最高的产品部分标题：店面主题主页定制

17.如何在评分最高的部分显示更多产品

Storefront 的默认设置在 Top Rated 部分显示 4 个产品。在此示例中，我们将其增加到 12 个产品。只需将此代码添加到子主题的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;

}

结果如下：

如何在评分最高的部分显示更多产品：店面主题主页定制

18. 如何从店面主页中删除特价商品部分

有两种方法可以做到这一点。一个是安装一个插件，可以帮助您删除此部分。您可以查看主页控制插件。对于这个例子，我将使用一行代码。

您可以使用钩子简单地删除该部分。只需在子主题的 function.php 文件中添加以下行即可完成此操作：

remove_action( 'homepage', 'storefront_on_sale_products', 60 );

结果如下：如何从店面主页店面主题主页自定义中删除特价产品部分

19. Storefront Theme Homepage自定义Action Hooks参考

这些是 Storefront 主题中使用的所有可用 add_action() 函数。它将函数附加到 do_action 定义的钩子上

标题

主页
storefront_homepage – Executed inside <div class="col-full"> of the homepage content section

产品类别

storefront_homepage_before_product_categories – Executed before the <section class="storefront-product-categories"> homepage section
storefront_homepage_after_product_categories_title` – Executed after the <h2 class="section-title"> product categories section title
storefront_homepage_after_product_categories – Executed after the <section class="storefront-product-categories"> homepage section

畅销产品

storefront_homepage_before_best_selling_products – Executed before the <section class="storefront-best-selling-products"> homepage section
storefront_homepage_after_best_selling_products_title – Executed after the <h2 class="section-title"> best-selling products section title
storefront_homepage_after_best_selling_products – Executed after the <section class="storefront-best-selling-products"> homepage section

店面功能

文件：/inc/storefront-functions.php

storefront_header_styles – filter the header styles
storefront_homepage_content_styles – filter the homepage content styles
店面类

结论

在本文中，我重点介绍了 18 种不同的店面主题主页定制创意，您可以为 WooCommerce 店面主题的主页制作这些创意。这些自定义已经过测试，它们的工作原理如屏幕截图所示。

如果您是 WordPress 初学者并且不知道在哪里可以找到 functions.php 文件，只需按照以下简单步骤操作：

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。当主题编辑器页面打开时，查找主题函数文件，我们将在其中添加函数。

它是如此简单。从这篇关于店面主题主页定制的文章中，您可以看到店面主题是如何灵活的，并且您可以使用过滤器和挂钩来进行您想要的定制。对于其他样式，您可以使用 Additional CSS 部分或 style.css 文件，您将在其中输入 CSS 代码。

类似文章

定制店面 WooCommerce 主题的 80 多种技巧：终极店面主题定制指南
如何在 WooCommerce 中隐藏产品或按类别或角色隐藏产品
如何在 WooCommerce 中获取当前产品类别名称
如何在 WooCommerce 中设置特色产品
如何在 WooCommerce 的商店页面中隐藏所有产品
如何计算添加到购物车 WooCommerce 购物车计数代码的项目
如何在 WooCommerce 中隐藏没有价格的产品
如何从搜索结果中隐藏 WooCommerce 产品
如何逐步使用 WooCommerce 产品属性 [完整指南]
如何在不使用插件的情况下在 WordPress 中创建数字分页