如何在 WooCommerce 中隐藏小部件
已发表: 2022-02-15您是否正在寻找在 WooCommerce 中隐藏小部件的方法？ 如果是这样，那么你已经降落在正确的地方。 我们将在本教程中向您展示隐藏或删除在线商店小部件的所有可能方法。
WordPress 中的小部件是什么？
小部件是可以添加到网站的侧边栏、页脚和其他区域的各种类型的内容或元素。 它允许您设置特定的功能，如日历、时钟、天气报告等。 根据小部件的不同，它们甚至有助于增加网站的功能。
大多数主题都提供了一系列标准小部件。 例如，“文本”小部件可用于输出简单文本（包括 HTML）。 同样，还有用于图像、音频、菜单、类别、RSS、最近评论等的小部件。
根据您的业务性质，我们可能并不总是需要主题提供的所有小部件。 所以最好的办法就是隐藏它们。 但在您在 WooCommerce 中隐藏小部件之前，您必须了解为什么您可能还需要禁用甚至删除小部件。
为什么要在 WooCommerce 中隐藏小部件？
无论您是想增加客户体验还是让您的 WooCommerce 网站更强大，小部件在您的网站开发中都占有重要地位。 大多数小部件都带有 WordPress 核心，并且从一开始就可以在每次安装中使用。 但根据您的客户，您的商店可能不需要某些小部件。
假设您有一个 WooCommerce 网站，您想在其中添加操作视频。 然后，您可能需要很多视频小部件。 但与此同时，如果您有音频小部件，那么这没有任何意义，而且似乎没有必要。
同样，您的网站可能有最近的帖子/评论、新闻订阅块或天气预报等小部件。 如果是这样，那么在您网站的每个页面上都显示它们是非常不合适的。 对于结帐页面或购物车页面等 WooCommerce 页面，不需要这些小部件。 您可以禁用 WordPress 中的评论，但此解决方案并不适用于所有小部件。
此外，在您的 WooCommerce 网站的前端添加一个额外的元素会降低您的网站速度，从而直接影响用户体验。 这就是为什么最好在 WooCommerce 中隐藏不会为用户增加太多价值并提高整个网站可用性的小部件。
如何隐藏 WooCommerce 小部件？
您可以使用两种不同的方法来隐藏 WooCommerce 中的小部件。
- 带插件
- 以编程方式
在开始本教程之前，请确保您已正确设置 WooCommerce ，并且不会遗漏任何步骤。
1. 使用插件在 WooCommerce 中隐藏小部件
在小部件方面，默认的 WooCommerce 功能提供的功能很少。 它不允许您在 WooCommerce 中隐藏小部件。 因此，如果您想隐藏或禁用特定页面或帖子上的小部件，您应该使用专用插件。
在隐藏小部件方面有几种免费和高级工具。 这些是您可以用来隐藏对您的 WooCommerce 网站不重要的工具的一些最佳工具。
小部件选项
Widget Options是一个 WordPress 插件，可让您完全控制您的小部件。 它拥有超过 100,000 次安装，是 WordPress 中最受欢迎的小部件管理解决方案插件之一。 因此，您可以使用此插件轻松隐藏或删除您网站上的小部件。
它具有用户友好的界面并与 WooCommerce 无缝集成，可轻松用于您的小部件自定义。 您还可以借助其实时小部件搜索过滤器找到要编辑的特定小部件。
主要特点
- 隐藏小部件标题
- 导入或导出小部件
- 实时小部件搜索
- 在特定设备上显示或隐藏小部件
- 小部件逻辑 - 有条件地隐藏和显示小部件
价格
小部件选项带有免费和高级版本。 您可以从每年 19 美元起扩展功能。
小部件禁用
Widget Disable是一个免费插件，您可以使用它以非常简单的方式隐藏侧边栏小部件。 该插件显示您网站上的所有小部件，并让您选择要隐藏的小部件。 不仅如此，您甚至可以禁用仪表板小部件，以使您的仪表板区域不那么混乱。
该插件也是轻量级的，不会超载或影响您的网页速度。 此外，它也是一个对开发人员友好的插件，甚至提供过滤器以排除侧边栏或仪表板上的小部件。
主要特点
- 适合初学者和开发者
- 简单易用的界面
- 禁用侧边栏和仪表板小部件
- 提供过滤器来修改核心部分的文件
价格
Widget Disable 是一个免费插件。 您可以从官方 WordPress 插件存储库下载它。
使用小部件禁用插件在 WooCommerce 中隐藏小部件
现在我们已经了解了插件，让我们看看如何使用它们。 所以对于这个演示，我们将使用Widget Disable插件隐藏 WooCommerce 中的小部件。 它是一个免费插件，非常易于使用，界面简单，可以完美完成工作。
但是，如果您更喜欢使用任何其他插件，您也可以这样做。 无论您使用什么插件，该过程都是相似的。 但是您需要在开始使用它之前安装并激活它。
1.1。 安装并激活插件
要安装插件，请从 WordPress 仪表板转到插件>添加新插件，然后在右侧的搜索栏中搜索Widget Disable插件。 然后，单击立即安装并在安装完成后激活它。
如果您使用 WordPress 插件存储库中未包含的高级插件或任何其他免费插件，则需要手动下载并安装它。 请阅读我们关于如何手动安装 WordPress 插件的指南以获取更多信息。
1.2. 使用插件隐藏小部件
Widgets Disable 插件最好的一点是您不需要配置或更改任何设置。
激活插件后，您将能够在 WordPress 仪表板的外观中看到禁用小部件选项。 只需选择该选项，您就会被重定向到列出所有侧边栏小部件和仪表板小部件的页面。
您可以从这些选项卡中选择要隐藏的小部件。 如果要隐藏任何侧边栏小部件，请单击侧边栏小部件并检查要隐藏的小部件。
如果您也想隐藏其中的任何一个，对仪表板小部件执行相同操作。 一旦选择了要从侧边栏和仪表板隐藏的小部件，请确保保存更改。
如您所见，在 WooCommerce 中隐藏小部件只需要几个步骤和很少的时间。
同样，如果要显示已禁用的任何小部件，只需取消选中该框即可启用它。 您隐藏的小部件将毫无错误地出现在网站上。
它有效吗？ 做得好！ 您现在可以使用专用插件隐藏 WooCommerce 商店中的小部件。
2. 以编程方式隐藏 WooCommerce 中的小部件
假设您不想使用插件来禁用 WooCommerce 中的小部件。 插件为您的网站增加了重量，您可能更喜欢高效且轻便的框架。 如果您有任何其他类似的原因避免使用插件，您还可以使用编程方法隐藏小部件。
但是为了进一步，我们强烈建议您备份您的网站并使用子主题，因为我们将修改您主题的核心部分。 您可以使用代码创建子主题，也可以使用子主题插件。 不用担心，这些插件对您的网站至关重要，不会对您的轻量级框架产生太大影响。
现在，从您的子主题转到外观 > 主题文件编辑器并打开functions.php文件。
您需要做的就是复制以下代码并将其粘贴到functions.php文件的底部。
add_filter('sidebars_widgets', 'quadlayers_woocommerce_conditionally_hide_widget');
功能 quadlayers_woocommerce_conditionally_hide_widget（$sidebars_widgets）{
如果（！is_admin（））{
如果 ( is_cart() ) {
foreach ( $sidebars_widgets as $sidebar_id => $sidebar ) {
$key = array_search('estore_woocommerce_product_grid-1', $sidebars_widgets['tg-column-4 collection-block']);
如果（$键）{
未设置（$sidebars_widgets['tg-column-4 集合块'][$key]）；
}}
}
}
返回 $sidebars_widgets;
}在此演示中，我们隐藏了左侧边栏中的促销小部件。 所以首先，我们需要找到Widget ID和Sidebar ID才能让代码片段正常工作。
要获取小部件 ID，请左键单击所选小部件并单击Inspect 。 在这种情况下，小部件 ID 在section id=标签中提供。
同样，要查找侧边栏 ID，您可以将光标移动到检查元素中的其他元素。 如果在您选择特定的类或 ID 时突出显示小部件，那么这更有可能是您的侧边栏 ID。 这是在检查元素的帮助下查找侧边栏 ID 的最简单方法之一。
找到小部件 ID 和边栏 ID 后，现在可以从主题编辑器转到functions.php文件并粘贴我们上面提供的代码。
如果您查看上面的屏幕截图，我们的小部件 ID 是“ estore_woocommerce_product_grid-1 ”。 当您复制并粘贴代码段时，将“ estore_woocommerce_product_grid-1 ”替换为您自己的小部件 ID。 侧边栏 ID 也是如此。 根据我们的主题，我们的侧边栏ID是' tg-column-4 collection-block '，你必须用你自己的侧边栏ID替换它，否则代码将不起作用。
结果，您可以看到，促销小部件部分未显示在 WooCommerce 网站的前端。
就是这样！ 您已使用代码片段成功禁用了要在 WooCommerce 中隐藏的小部件。 您可以根据需要修改代码以隐藏更多小部件。
奖励：如何创建自定义标题小部件
您已经知道为什么以及如何在 WooCommerce 中隐藏小部件。 同样，您可能希望为您的网站创建一个自定义标题小部件。
大多数 WordPress 主题不允许您在内容上方或标题中添加小部件区域。 但是，如果您添加自定义标题小部件，您的网站可以从竞争对手中脱颖而出，并增加一些功能。 例如，您可以显示广告、最近的文章或任何类似的元素。
借助代码片段，创建客户标题小部件非常容易。 您所要做的就是将脚本添加到主题的functions.php的核心部分。 但是为了添加自定义标题小部件，我们需要先创建一个新的小部件区域。
1.创建一个新的小部件区域
要为您的自定义标题小部件创建一个新的小部件区域，您需要将代码片段添加到您的主题文件中。
但在此之前，让我们看一下您的主题提供的可用小部件区域。 因此，从您的 WordPress 仪表板转到外观 > 小部件。
主题的所有活动小部件区域都可以在这里看到。 这也是我们将添加新的小部件区域的地方。
现在让我们继续创建一个新的小部件区域。 我们需要调整子主题的functions.php文件，类似于以编程方式隐藏小部件。 如果您不方便直接编辑文件，也可以使用 Code Snippets 之类的插件。
我们将在本教程中使用 Code Snippets 插件。 首先，安装插件并激活它。
激活后，我们可以在 WordPress 仪表板的Snippets > All Snippets下找到插件的设置。 现在单击Add New以创建一个新片段。
我们将其命名为“自定义标题小部件”，但您可以为其命名。 现在将以下代码复制并粘贴到代码部分中。
函数 quadlayers_widgets_init() {
register_sidebar（数组（
'名称' => '自定义标题小部件',
'id' => '自定义标题小部件',
'before_widget' => '<div class="ql-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="ql-title">',
'after_title' => '</h2>',
));
}
add_action('widgets_init', 'quadlayers_widgets_init'); 
粘贴代码并保存后，新小部件将在您的 WordPress 站点中创建为自定义标题小部件。
2. 将 Widget 添加到 Header
要将小部件添加到标题中，我们需要编辑 header.php 文件。 您可以通过 WordPress 仪表板中的外观>主题文件编辑器导航来在主题编辑器中找到头文件。 现在，从主题文件列表中打开主题头文件 (header.php)并在此处粘贴以下代码。
<?php
如果（is_active_sidebar（'quadlayers-header-widget'））：？>
<div class="ql-widget-area widget-area" role="complementary">
<?php dynamic_sidebar('quadlayers-header-widget'); ?>
</div>
<?php endif; ?>像往常一样，在添加代码后更新文件。
现在，让我们将一个小部件添加到新的小部件区域。 在这里，我们添加了一个段落块来测试小部件。
结果，您应该能够在网站的前端看到标题。
但是，您可能已经注意到，您需要对标头的外观进行润色以使其看起来更吸引人。 您可以按照本指南进一步自定义它并控制标题小部件的可见性。
结论
这就结束了我们关于如何在 WooCommerce 中隐藏小部件的指南。 如果您不想在网站中显示不必要的元素，从而导致网站运行缓慢且杂乱无章，那么隐藏特定的小部件会非常有用。 然而，仅显示您实际需要的小部件可以提高 WooCommerce 商店的整体可用性。
总而言之，我们为您提供了两种在您的网站中隐藏小部件的不同方法：
- 使用插件
- 以编程方式
隐藏小部件的最简单方法是使用插件。 但是，我们今天使用的代码片段也很简单，易于定制。 您可以通过查找小部件 ID 并对其进行重命名来自定义它，以使代码适用于您的网站。
此外，我们还包括一个创建自定义标题的部分，以创建一些额外的小部件空间而不妨碍主菜单。 它们有助于以有组织的方式显示您的最新优惠、折扣和广告。 同样，如果您想添加更多自定义小部件，我们也有使用 Instagram Feed Gallery 为 Instagram Feed 添加自定义小部件的指南。
最后，您可能需要查看更多文章，以进一步改善您的 WooCommerce 商店和客户体验：
- 如何在 WordPress 中编辑标题
- 自定义 WooCommer 产品页面的最佳插件
- 如何自定义 WooCommerce 模板
您现在可以隐藏电子商务网站中的小部件吗？ 你以前做过吗？ 我们很高兴在下面的评论中了解它。