轻松打造单品网站：WordPress页面中如何完美调用完整产品页！

今天继续为大家带来WordPress建站的实用教程。在之前的一个WooCommerce商城开发项目中，我们面临一个需求，要求在首页或其他页面展示单个产品的完整详情。需要特别指出的是，这并非简单的产品列表，而是一个能够直接操作的产品页面，用户可以方便地添加商品到购物车或进行购买。

展示效果如上图所示（这是一个Shopify模板的展示效果）。要实现这样的功能，主要有两种途径：一种是利用WooCommerce自带的短代码，另一种则是借助Elementor等页面编辑器。

通过代码实现

使用代码是一种通用的方法，可以在古腾堡或其他编辑器中插入简码模块，然后输入下方提供的短代码。

[product_page id="数字"]

请将上面的数字替换为所需展示产品的ID值。

关于如何查看产品的ID，之前的文章已有详细介绍，这里再简单说明一下。打开对应的产品页面，将鼠标悬停在“编辑”选项上，浏览器底部将显示一条链接，其中“post”后面的数字即为该产品的ID。将其填写在上面的短代码中即可。

使用Elementor进行展示

若您使用的是Elementor页面构建器，则可以利用其内置的“WooCommerce Pages”模块来调用单个产品。不过，这需要您拥有Elementor Pro或相应的高级元素权限才能使用该功能。

启用该模块后，如上图所示，将“WooCommerce Pages”模块添加到页面中，选择所需的单个产品，输入产品名称即可完成调用。

隐藏产品详情内容

.product>.WooCommerce-tabs {    display: none;}

若产品的详细描述较长，直接调用产品信息可能会导致页面过于冗长。为此，我们可以在调用模块中添加上述CSS代码，以隐藏产品详情部分，这样展示的内容将仅包含主图、简短描述和购买选项。

总结：通常情况下，在页面中展示完整的产品信息并不必要，因为大多数商店会有多种产品，若每款产品都如此展示，用户可能会感到疲惫。因此，这种需求相对小众，对于普通商城而言，建议不要过于复杂化。

创建单一产品展示网站

如果您的网站仅有一款产品，那么在页面中调用完整的产品信息是可行的，这样可以用于创建专门的产品展示或销售网站。

如上图所示，该网站只包含一个页面，专注于展示一款产品，方便用户进行下单购买。

结束语

以上便是今天分享的内容，关键在于灵活运用所学知识。

作者：悦然WordPress建站