WooCommerce 设计师指南

已发表: 2020-01-20

如果您正在设计 Shopify 之类的 WooCommerce 商店或开发现有的 WooCommerce 主题，这篇文章 WooCommerce 设计师指南适合您。 此组合提供了有关样式、更改设计以及涵盖相关 WooCommerce 页面的其他信息的更多信息。

这个插件是一个用户友好的工具，非常灵活； 但是，并非所有网站都受支持。 通过使用 WooCommerce 支持的功能和方法，您可以加快设计和开发过程。

它允许用户自定义修改，但需要额外付费。 查看有哪些功能的最快方法是访问 WooCommerce 中的 Storefront 演示。 如果您需要一些方法来学习如何使用 Woocommerce，请查看圆顶指南以帮助您入门。 WooCommerce 创建以下新页面。 您需要为某些类型的页面进行设计。

第一个是产品页面。 这些页面有两种，即：产品存档页面和产品单页。

产品存档页面显示可用产品类别的缩略图。 当您单击类别缩略图时，它们会显示另一个产品存档页面。 然后，当您单击产品缩略图时，它会显示单个产品。

另一种是产品单页。 在这里，这些显示单个产品并结合产品图像、产品标题信息、产品详细信息以及相关产品、交叉销售和追加销售。

它还有特殊页面，包括购物车和结帐。 购物车通常以精简的形式显示为侧边栏小部件，有时在购物车页面上以扩展的形式与交付信息一起显示。 另一方面，结帐是客户结帐时，它需要地址信息。

不同类型的产品

这个工具有不同类型的产品；

首先是分为五个部分的产品标题。 这些是：

  1. 产品名称 - 这些显示在摘要/存档页面和单个页面上
  2. 产品功能 - 您将在摘要/存档页面和单曲页面上看到
  3. 图片 - 特色图片显示在摘要上，附加图片显示在单个产品页面上
  4. 详细描述 – 这显示在单个产品页面底部的产品描述区域
  5. 简短描述 – 这显示在单个产品页面的顶部

该工具还将允许用户使用该产品。

每个类别都需要提供的类别图像和描述，它还可以有子类别。 例如，Shoe 是一个品类，而鞋子的品牌是一个子品类。 产品类别档案自动生成以下部分：标题或类别名称、类别描述、当前类别的每个子类别的一个类别缩略图，可选的产品缩略图包括标题、价格和添加到购物车中的每个产品当前类别。 单击一个类别可打开一个新类别，单击产品缩略图可打开该产品。

此外，在产品页面下，这些页面会自动生成以下内容：

产品图片——这些是产品的特色图片和补充图片。 产品标题、产品价格、产品简短描述、添加到购物车的数量（带有 + 和控件）、添加到购物车按钮、产品 SKU（库存单位）类别和标签。

产品选项卡包括产品详细描述，包括可选的图片库、附加信息（如显示在产品页面上的产品属性票证）以及可选的产品评论。 单击一个类别可打开一个新类别，单击产品缩略图可打开该产品。

追加销售 - 这些是“你可能也喜欢”的东西，然后是追加销售的拇指/标题。

交叉销售——这些是相关产品，后面是缩略图。

产品展示，选项有标准展示和可选展示。 该标准在产品页面的顶部显示特色图像，下方的补充图像缩略图以 3 列缩略图显示。 相比之下，可选演示文稿显示的特色图像下方没有缩略图，并在“描述”选项卡中显示所有图像。

该工具的另一部分是产品搜索小部件，可放置在侧边栏小部件或页脚小部件中。 如果您想搜索任何网站，它具有站点范围搜索选项。 在其下方是产品搜索框，可让您搜索产品名称、简短描述和详细描述。 宽搜索选项的另一个部分称为类别向下钻取。 它是一个下拉字段，允许选择任何类别或子类别。 Proud tag cloud kit 有一个下拉菜单，可以让您选择价格标签。

产品类别搜索选项搜索小部件仅在显示自动生成的产品类别档案时才会出现。 首先是分层导航。 这允许用户根据属性优化产品，并有效地帮助用户找到他们正在寻找的东西。 产品价格过滤器——这显示了一个允许将产品过滤到价格范围的滑动比例。 畅销产品——显示自动选择的畅销产品列表的标题/拇指/价格。 特色产品显示标记为特色产品的产品的标题/拇指/价格。 特价：显示除价格外还输入了销售价格的产品。

如果用户想要为他们的 WooCommerce 设计样式，我们可以使用产品拇指等选项。 当产品显示为产品缩略图时，会显示 4 个元素，包括缩略图、标题、价格、添加到购物车。 可用于产品背景、产品边框、填充和边距的 CSS 样式。 接下来是缩略图。 这些包括边框、填充和边距。 标题包括字体、粗细、颜色和大小，与价格相同。 在添加到购物车下包括按钮颜色、标签颜色、边框和半径。

该工具上还显示了销售贴纸，“销售”一词出现在销售的产品拇指上——可以使用 CSS 样式：背景颜色、字体颜色、边框颜色。 边框宽度，实线/虚线边框，边框半径。

产品变体允许客户设置具有不同颜色或不同设计的服装产品。 使用产品变体时，产品存档页面将显示“选择选项”按钮，而不是“添加到购物车”按钮。

总之，我们已经列出了您在设计 WooCommerce 商店时需要考虑的主要元素。 我们已经解释了不同类型的页面、产品信息以及搜索和样式选项。 玩得开心建立您的 WooCommerce 商店。

在此处阅读有关 Woocommerce WordPress 主题的更多信息。