*{box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px;}。
人们建立一个电子商务商店，希望能尽可能多地销售他们的产品。这需要你做大量的工作--从选择合适的平台到推广你的商店。简单地创建一个商店不会自动带来销售。你将不得不积极努力优化你的内容和购买漏斗。
幸运的是，如果你使用WooCommerce在WordPress上创建你的电子商务商店，事情会变得相对容易。这个插件有一个很大的辅助插件生态系统，可以完成各种任务。在本教程中，我们将学习如何为我们的商店免费添加一个WooCommerce产品表。
产品表的优势
假设你有一个大型的电子商务商店，销售大量的产品。其中一些产品可能会用于做同样的任务，但有不同的规格，比如有人要找一台笔记本电脑来做一些日常的休闲使用。在这种情况下，创建一个产品表将为你以及你的用户提供很多好处。
易于比较
在比较类似的产品时，你的用户只想看看它们关键规格的差异。一个列出所有这些差异和相似之处的产品表将节省他们在多个标签之间切换的大量时间。
减少客户的疑虑
产品表的另一个好处是，它们有可能增加你的销售额。这基本上可以归结为给用户更多的选择，如果他们对购买产品有疑虑。有几次，我对购买一个产品没有十足的把握，因为感觉缺少了什么。然而，最后的产品表格显示了具有我所需要的确切功能的相关产品，帮助我立即做出了购买决定。
我相信你自己在购物时也遇到过产品表。现在是时候为你自己的商店添加一个了
添加产品表的选择
产品表有一个重要的目的，很多人都在使用。因此，有很多免费和付费的产品表插件，你可以在你的网站上安装。如果你不需要一大套功能，并且可以自己做基本的故障排除，免费插件通常就足够了。然而，高级插件会给你更多的功能，也更有可能给予更好的支持和定期更新。你可以看看CodeCanyon上最畅销的WooCommerce产品表插件的一些例子。
由于这篇文章是关于免费插件，我们将使用WordPress插件目录中的WooCommerce Product Table Lite插件。它是完全免费的，评级最高的，并带有一套体面的功能。
开始吧。安装并激活该插件。你会在WordPress管理仪表板上看到一个标有产品表的菜单项。
创建一个WooCommerce产品表
你可以从管理仪表板菜单中导航到产品表>添加新表，以便创建一个新的产品表。该插件有两个预设模板，可以快速创建一个表，还有一个空白选项，可以从头开始创建一切。
悬停在常规表部分，你会看到一个使用按钮。点击它来创建一个新的产品表。这将向你展示一个部分，说你的产品表已经被创建。你还会得到一个类似于[product_table id="111"] 的短码，你可以用它来在你网站的任何地方显示产品表。这将显示一个类似于下图的产品表。
记住，上面的图片只是基于默认值。你可以通过简单地配置一些选项来改变这些表格中的很多东西。还要注意的是，在右上角有一个下拉菜单，供你选择表格中显示的产品应该如何进行排序。默认情况下，项目是根据价格（从低到高）进行排序的。
这个产品列表来自我们以前的一个教程，我们在那里学习了如何免费定制一个WooCommerce产品页面。你可以看到，它们大多是玩具，但在列表的底部有一件连帽衫。我们现在要对我们的表格做几个改动。
定制产品表
你可以从仪表板导航菜单中进入产品表>产品表，以便看到我们已经创建的所有表的列表。我们只从常规表的预设中创建了一个表。因此，我们将看到只有一个名为Regular Table的表。点击这个名字来编辑这个表。现在，将该表重命名为Toy Table。
这个插件让你可以选择使用快捷键以及它自己的界面来指定表格中应该包括什么以及它的行为方式。
我们将首先对 "查询"选项卡做一些修改。我们的表格将只显示玩具，不显示服装项目，所以将类别设置为只有玩具是合理的。这是主要的父类别，但如果你有很多产品或想更具体地显示产品类型，你也可以选择其中的一个子类别。
我们还将把产品的最大数量设置为5个，并启用分页功能，同时隐藏缺货的商品。排序保持为其默认值**：价格：从低到高**。
添加和删除列
我们现在将前往列标签。它为我们提供了选项，以指定在不同的屏幕宽度上显示哪些列或哪些信息。这里有一个很长的选项清单。
你会看到顶部的 "笔记本列"。这里有六个不同的列，将在大屏幕上显示。默认情况下，该插件显示一个产品图片，它的名称，描述，价格，数量和一个添加到购物车按钮。你可以删除任何现有的列或添加你自己的额外列。我们将通过点击交叉按钮来摆脱描述栏。你也可以通过点击其中一个按钮来改变列的位置或重复它们。
点击 "+添加列"按钮，为产品评级添加一个新的列。笔记本电脑图标旁边的第一个评级文本是作为你的一个标识符。在标题标签下指定的第二个评级文本将显示给你的浏览者。它也可以是一些其他的自定义HTML，而不是纯文本。例如，你可以在标题中显示一个图标和一些文字。
设计"选项卡允许你设置一堆造型选项，如文本颜色、背景颜色、填充或文本对齐。作为一个例子，我已经将标题的字体颜色以及实际的评级设置为rgb(19, 138, 98) 。
单元格模板标签决定了在不同产品行中向用户显示的内容。不是所有的产品都会有用户提供的评分。在这种情况下，我们将字段值设置为无评级。我们还将我们自己的wc-pdt-rating 类附加到评级上，这样我们就可以应用自定义CSS规则。列也被重新排序，所以产品的评级现在是在它们的名字旁边。
为产品表添加过滤器
默认的产品表在右上角有一个下拉菜单，让用户可以选择根据一些标准对不同的产品进行排序，如名称、价格和用户评价。
现在我们将为该表添加一堆其他的过滤器，这样用户就可以选择只看到特定子类别的产品或特定价格范围内的产品。你可以在标题行或左侧边栏中添加这些过滤器。在我的案例中，我决定把它们放在我们表格的第二行。
点击第二个标题行中的**+添加元素按钮，然后选择类别过滤器**。在这种情况下，所有的默认选项都很好，但你可以玩一玩，给元素添加一个自定义的CSS类或样式。如果你愿意，你也可以启用选项，只让用户选择一个单一的类别。
现在再次点击**+添加元素来添加一个价格过滤器**。改变过滤器的选项，以反映更能代表你所显示的产品的价格范围。在这种情况下，我把价格范围分成三个部分：7美元以下，7至15美元，以及15美元以上。完成后，点击保存设置按钮。
这时你的定价表应该看起来像下面的图片。
添加自己的风格
虽然该插件本身为不同的项目提供了很多内置的样式选项，但它们可能不一定能满足你的所有需求。在这种情况下，你可以切换到风格选项卡，自己添加一堆CSS规则。
WC产品表并没有直接向我们展示所有的元素选择器，但它确实为我们提供了针对这些元素的占位符。例如，你可以通过使用[heading_row] 作为你的选择器来对标题行进行样式设计。你也可以使用你自己的选择器。下面是我应用于我们的产品表格的CSS。
[heading_row] {
text-transform: uppercase;
color: #333;
border-top: 1px solid black;
}
[heading_cell] {
background: #ddd;
}
body .wcpt-table a.wcpt-button, body .wcpt-table a.wcpt-link_button {
font-weight: bold;
border-radius: 0;
}
body .wcpt-table a.wcpt-button:hover, body .wcpt-table a.wcpt-link_button:hover {
background: yellowgreen;
}
该表现在看起来像下面的图片。将鼠标悬停在购物车按钮上，它们将从橙色变成绿色。
最后的思考
在本教程中，我们看了使用WooCommerce产品表的优势，在网站上添加产品表的一些不同选择，以及如何创建和定制它们。我在本教程中使用的WooCommerce产品表插件带有一套体面的功能，可以满足你所有的基本要求，但对于更高级的功能和用户界面，请看一下CodeCanyon上最畅销的WooCommerce产品表插件的一些例子。
