用Woocommerce建立一个网上商店 [04] WooCommerce模板Part 1
[04] WooCommerce模板Part 1
文章来源 https://wpeyes.com/elementor/academy/
好的，现在我们已经添加了所有产品，是时候开始做生意了，开始设计我们的商店模板！
我们将使用 Elementor 的 Theme Builder 来创建、设计和保存我们的商店模板。
从仪表板导航到模板 > 主题生成器 > 立即试用。
Theme Builder 提供了一个易于使用的界面来管理与您的网站关联的模板。
如您所见，我们已经为我们的网站创建了几个模板，包括页眉、页脚、404 页面和博客模板。
如果您不确定如何设置这些模板，请查看我们在频道上的专门教程。
乍一看，您将获得一个带有构成站点的站点部件模板缩略图的鸟瞰图。只需单击任何部分进行向下钻取，您就会看到更多信息，以及该模板的管理和编辑选项。
对于我们的商店，我们将创建几个与 WooCommerce 连接的模板。其中包括单一产品模板、产品存档模板和搜索模板。
请注意，单一产品和产品存档模板选项只会在您安装 WooCommerce 插件后显示。
我们将从单一产品模板开始。
在我们开始创建它之前，让我们快速浏览一下完成的产品页面，以便更好地了解我们将要构建的内容。
产品页面由几个元素组成。左边是产品图片缩略图
在右侧，顶部是 WooCommerce 面包屑。我们所说的面包屑是指到此特定页面的导航路径，它可以帮助访问者了解他们在目录中的位置，并允许他们直接单击返回到另一个部分。
下面是产品标题、星级、产品简短描述、产品价格、数量字段和添加到购物车按钮。
如果我们向下滚动一点，我们将看到完整的描述，以及留下的任何评论。
最后，我们有一个展示相关产品的部分。
让我们回到 Theme Builder，并添加一个新的单一产品模板。
这将我们直接带入 Elementor 库，您将在其中找到使用 Elementor 块或页面模板的选项，以及插入您自己保存的模板的能力。
我们将从头开始创建我们的单一产品页面，所以继续并关闭图书馆。
您会注意到的第一件事是网站页眉和页脚已经被拉入模板，这正是我们所需要的。这是因为页眉和页脚模板已设置为自动显示在网站的所有页面上。
单击加号图标添加一个部分，然后选择第一个两列布局。
让我们首先添加本节所需的所有小部件。
这将使我们对基本结构有一个很好的了解，然后我们可以为它们一一添加内容和样式。
在小部件面板中，选择 Product Images 小部件并将其拖到第一列中。
对于第二列，在面包屑小部件中拖动…
产品标题小部件…
然后是 Product Rating 小部件……注意这个小部件当前是如何变灰的。这是因为编辑器中显示的当前产品还没有任何评级。我们会尽快解决这个问题，这样我们就可以预览这个小部件了……
接下来，简短描述小部件……
之后，产品价格小部件……
最后但并非最不重要的是添加到购物车小部件。
如果您想更改编辑器中此处显示的产品，您可以通过单击齿轮图标和预览设置来进行更改。
开始输入您要预览的产品名称……
选择它…
然后选择“应用和预览”……
您现在看到“产品评级”小部件正确显示，因为该产品有几条评论……
好的，太好了，第一部分已经初具规模。现在让我们浏览每个小部件并使用正确的内容和样式更新它们。
选择产品图片小部件。
这里的第一个选项是设置我们是否希望出现销售快讯。要显示我们的产品，必须输入促销价。让我们快速添加一个到我们的“法式长棍面包”，以便我们可以在编辑器中看到它。
在新选项卡中打开“所有产品”屏幕并向下滚动到“法式长棍面包”。我们之前向您展示了如何在产品页面中添加销售价格，但实际上我们也可以从此屏幕修改有关我们产品的许多详细信息。
选择“快速编辑”，您将看到包括价格字段在内的大量产品选项。
让我们在“销售字段”中添加 £3.00，然后更新我们的产品。
现在回到编辑器中，将模板保存为草稿并刷新页面。
如您所见，样式徽章现在正在显示。
通过单击边框类型下拉列表添加边框。有几种不同的边框类型可供选择。选择边框类型后，您可以更改宽度……颜色……和边框半径。
通过拖动空格滑块在顶部和底部图像之间添加空间……或输入一个值。
接下来的设置集中在缩略图图像上。同样，您可以从多个边框选项中进行选择，还可以设置缩略图之间的间距。
继续为缩略图添加一些间距。
太好了，接下来让我们继续面包屑。
选择文字颜色…
然后选择链接颜色…
接下来，设置排版……
最后一个选项用于对齐。
我们将其保留在默认的左对齐上。
现在选择产品标题。
此小部件会自动设置为动态提取产品名称。
让我们保留其他默认内容设置，并移至“样式”选项卡。
设置您的文字颜色…
和排版……
如果需要，您还可以应用文本阴影和混合模式。
接下来我们将设计“产品评级小部件”的样式。
我们可以将样式应用于明星……
空星…
关联…
以及修改排版……
更改星星大小…
星星和文字之间的空间……
以及整个小部件的对齐方式。
接下来选择“简短描述”小部件。
设置对齐…
文字颜色…
和排版。
现在让我们设置我们的标准和销售价格样式。
我们将调整路线……
颜色…
排版…
现在的销售风格……
“堆叠”允许您控制销售价格是显示在主价格下方还是在主价格的旁边……
最后，我们将在两个值之间添加一些空间。
此直接部分中的最后一个小部件是添加到购物车按钮和数量字段。
首先让我们设置按钮的样式
让我们将对齐方式设置为左侧……
使用我们的全局样式的排版……
边框类型为实心，四面都是 2px …
我们将看到边界半径为 0px 以获得漂亮整洁的角落……
然后我们的填充……
现在让我们为正常和悬停状态设置颜色。
这就是我们完成按钮的样式，接下来让我们切换到数量选项卡……
我们可以先在数量字段和按钮之间添加间距……
然后排版……
设置边框以匹配我们的按钮……
然后是我们的正常颜色和焦点颜色……
最后一组样式用于变体。这个特定的产品没有任何变化，所以让我们切换产品预览，以便我们可以看到我们的变化。
（……搜索甜甜圈……）
我们可以修改这部分的宽度……
变体和按钮之间的间距……
为标签设置颜色和排版……
然后选择字段相同……
在我们进入下一个小部件之前，让我们将一些样式应用于此部分以适应我们网站的其余部分。
选择部分…
然后在样式选项卡中设置背景图像…
在顶部和底部添加一些边距……
还有一些填充……
现在选择包含产品数据的列并添加一些填充……
好的，看起来不错。
现在让我们添加产品数据选项卡……
添加一个新部分…
然后放入产品数据选项卡小部件……
我们可以首先设置选项卡的颜色……
我们将保留商店的默认颜色，但请注意如何根据需要修改正常和活动选项卡的颜色。
接下来我们将设置排版……
如果需要，您可以修改边界半径……
现在切换到“面板”选项卡…
在这里，我们可以修改选项卡内容的样式……
为内容本身设置颜色和排版……
然后标题…
最后，如果需要，您可以设置边框宽度、半径和框阴影。
我们要添加到产品模板的最后一个小部件是“相关产品”小部件。
这个小部件非常好用，因为它会向您的网站用户显示与他们当前正在查看的内容相关的其他产品。
创建另一个部分……并添加一些填充……
并放入“相关产品”小部件……
我们可以首先通过设置…来修改内容
每页产品…
列…
他们是如何订购的……
以及我们希望它们上升还是下降……
现在切换到样式选项卡，您可以在其中看到我们提供了大量可用的样式选项。
我们将首先设置列和行间距……
然后对齐…
如果需要，我们可以为图像添加边框……
并修改图片和标题之间的间距……
接下来的几节将使我们能够控制……的颜色、排版和间距。
标题…
评分…。
价格…
& 正常价格…
然后我们可以设置按钮的样式。让我们对其进行修改，使其与我们其余的按钮相匹配……
这里的最后一个选项是设置“查看购物车”链接的样式。要预览，请选择“添加到购物车”，然后进行修改。
现在切换到标题选项卡…
您可以选择是显示还是隐藏此元素……
设置颜色…
字体…
结盟…
和间距。
接下来是包含所有先前元素的框的样式选项。
如果我添加边框，您可以准确地理解我的意思……
在这里我们可以添加一个边框半径..
修改填充…
并为正常和悬停状态设置样式……
这里的最后一个选项是修改“Sale Flash”。
您当然可以打开或关闭此选项。
设置文本和背景颜色…
以及排版……
然后我们可以改变边界半径……宽度和高度。
最后我们可以选择在框的右侧或左侧显示销售徽章以及距离。
在我们保存和预览我们的新模板之前，让我们首先通过选择齿轮图标来重命名它。将标题更改为可以让您轻松识别此模板以供将来参考的内容。
我们将调用我们的“单一产品模板”。
在我们发布模板之前，我们还有最后一步。
在“发布”按钮的右侧，您会看到一个小箭头。选择此项将允许您导航到“显示设置”。
在这里我们可以设置我们希望模板显示的位置。
选择“添加条件”…
您可以看到 Elementor 在自动选择“产品”作为我们选择的位置方面做得很好。
通过选择下拉箭头，您可以看到我们能够设置关于我们希望在何处显示此模板的具体说明。
例如，我们可能只希望此模板显示在我们的“食谱”类别中的产品。
如果需要，我们也可以在这里添加多个规则，也可以设置这些规则来排除特定的产品和类别。
在我们的商店中，我们只需要一个适用于所有产品的模板，因此我们将在此处选择它。
现在继续发布您的模板。
好的，太棒了！如您所见，我们的单一产品模板现已完成并且看起来很棒。