用Woocommerce建立一个网上商店 [05] WooCommerce模板Part 2
[05] WooCommerce模板Part 2
文章来源 https://wpeyes.com/elementor/academy/
在本课的第 1 部分中，我们了解了构成 WooCommerce 商店的模板。现在我们将探索如何创建我们的存档和搜索模板。
我们的商店将使用两个产品存档模板。
第一个将在有人访问我们的“商店”页面时显示，该页面将显示我们之前设置的各种类别。
选择其中一个类别后，我们的网站访问者将被带到我们的第二个存档模板，该模板以网格布局显示产品本身。
现在让我们回到主题构建器并添加一个新的“产品存档模板”。
我们要做的第一件事是添加我们之前保存为模板的标题部分。它包含我们的页面标题、简短描述，并将提供我们所有模板文件的一致性。
现在，添加一个新部分并给它一些填充。
在小部件面板中，找到并放入“产品类别”小部件。此小部件将自动显示我们为商店设置的任何类别。
已经应用了几个默认配置。让我们进行一些更改，以便准确显示我们想要的方式。
将列设置为“3”。
类别计数为“3”。
现在切换到“查询”选项卡。
默认情况下，此小部件设置为显示所有类别，但您可以修改它以按父类别或当前子类别显示手动选择。
我们将选择“手动”，然后选择我们希望在商店页面上显示的类别。
请注意每个类别如何有自己的图像。这是因为我们在创建类别时更早地设置了它们。
如果有任何类别是空的，我们可以选择将它们隐藏在这里。
最后，我们可以按名称、slug、描述或计数修改顺序，也可以是降序或升序。
现在切换到样式选项卡。
您可以首先修改列和行间距……
然后对齐…
添加边框类型…
宽度…
颜色…
半径…
和间距，如果需要的话。
然后为标题和计数设置颜色和排版样式。
在我们发布这个模板之前，让我们重命名它，就像我们对我们的单一产品模板所做的那样。
现在让我们发布我们的模板并设置显示条件。
选择“发布”…
然后“添加条件”……
现在在下拉菜单中选择“商店页面”以确保每次有人访问您网站上的主要商店页面时都会显示此模板。
最后选择“保存并关闭”，现在让我们访问该网站以确保其正常工作。
现在让我们创建当有人在我们的商店页面上选择一个类别时显示的模板。
同样，回到主题构建器中添加另一个“产品档案”模板。
就像之前我们要在此模板文件中添加一个先前制作的部分一样，但是这个部分使用动态内容，因此它始终显示正确的标题和描述。
选择标题，您可以看到我们在动态字段和“产品类别”中选择了“产品条款”。
与标题类似，我们将其设置为动态提取存档描述。
所有这些值都是在我们创建类别时设置的。
现在添加一个新部分……
应用一些填充…
然后放入“产品”小部件。
首先设置你的列……
和行…
启用分页会打开一些额外的选项……
允许订单将添加一个下拉字段…
“显示结果计数”将结果数添加到小部件。
现在切换到查询选项卡，我们可以指定此小部件中显示的内容。
因为我们要使用此模板来显示特定类别的产品，所以我们需要选择“当前查询”以获得所需的结果。
这个小部件可以在其他地方使用但是你会注意到我们也可以将它设置为显示……
最新产品、促销产品、特色产品以及手动选择。
现在切换到样式选项卡，让我们探索一下我们有哪些选项。
首先，我们可以为产品本身设置样式……
设置你的间隙距离……
和对齐…
如果需要，现在添加边框……
和间距…
现在向下滚动并设置标题的样式和间距……
价格…
和正常价格…
现在让我们应用我们的“正常”和“悬停”样式，以便我们的“添加到购物车”按钮与我们网站的其余部分相匹配……
最后是“查看购物车”样式……
现在打开盒子标签…
默认设置非常适合我们，但如果需要，您可以添加边框……
边界半径…
填充…
以及正常和悬停状态的阴影、背景颜色和边框颜色。
最后我们可以为我们的销售快闪设置样式……
在我们重命名和发布此模板之前，让我们添加我们之前创建的推荐块模板来填充页面。
现在重命名模板…
选择发布…
添加条件…
选择“产品类别”……并将其保留为“全部”以确保此布局出现在所有产品类别中。
好的，不错。现在让我们访问该网站并测试我们目前制作的所有模板。
我们将从主页开始，然后选择“商店”……
现在选择其中一个类别……
最后选择其中一款产品……
如您所见，所有模板在实时网站上都运行良好。让我们转到用于搜索结果的最终模板。
首先在主题构建器中添加一个新的“搜索”模板……
同样，我们有一个预制的英雄部分要添加到这里，所以让我们把它放进去……
标题设置为使用动态内容，会自动显示用户输入的搜索词。
要添加您自己的搜索词，请选择齿轮图标…
预览设置…
输入您的搜索词并单击“应用和预览”。
现在添加一个新部分…
并添加一些填充……
放入“存档帖子”小部件，我们可以立即看到搜索结果出现。
现在让我们做一些调整，让它看起来像我们想要的那样……
如果需要，您还可以修改分页配置和“未找到”消息。
现在让我们设计搜索结果的样式……
设置您的列……和行间隙距离……
然后是你的定位。
如果需要，添加边界半径……
和间距…
您还可以将 CSS 过滤器应用于正常和悬停状态。
在内容下，我们可以为标题和摘录设置颜色、排版和间距。
最后将您的样式应用于分页……
和“未找到消息”。
内容和样式选项到此结束，现在让我们重命名我们的模板……
并发布……
添加条件…
从下拉列表中选择“搜索结果”……
并保存。
我们终于得到它了。
当有人在我们的网站上执行搜索时，他们将被定向到看起来很棒的搜索模板。
使用 Elementor 的主题构建器可以轻松创建和管理与您的网站关联的模板文件。
充分利用这一惊人的功能，并通过完全品牌化的内容让您的网站访问者惊叹不已，从而使他们参与您的网站。
在我们的下一课中，我们将查看与运行 WooCommerce 商店相关的页面。