创建一个功能齐全的电子商务商店需要您处理很多大大小小的事情。您为销售产品而创建的任何网站都会有不同类型的页面来满足不同的需求。专用产品页面就是这样一个例子。
产品页面允许您在一个地方提供用户喜欢的产品的所有必要信息。woocommerce 确实带有自己的默认产品页面，但您可能会使用自己的自定义页面看到更好的结果。在本教程中，您将逐步学习如何免费自定义 WooCommerce 产品页面。
自定义 WooCommerce 产品页面的选项
wordpress 的美妙之处在于它为您提供了许多不同的选项来完成相同的任务。WooCommerce 产品页面也不例外。自定义页面有免费和付费选项。我们在本教程中的重点是免费完成它。但是，请记住，使用高级插件在 WordPress 中执行操作通常更容易。
页面构建器：并非所有页面构建器都内置了对 WooCommerce 构建块的支持，但其中一些有。例如，您可以使用 Elementor 和 Visual Composer 等页面构建器来创建自定义的 WooCommerce 产品页面。这很容易做到，但通常需要付费或专业版的构建器。
专用插件：WooCommerce 带有一些用于操作和过滤器的钩子，可用于在产品页面或其他地方添加或删除内容。有依赖于这些钩子的专用插件，您可以使用它们来更改产品页面。
自定义代码：这是创建自定义 WooCommerce 产品页面的最复杂方法，但也是最强大的。您无需花任何钱，就可以完全控制，但如果您刚刚起步，就有犯错的风险。
免费自定义 WooCommerce 产品页面需要您付出一些额外的努力。我们将使用专用插件和一些css的组合来完成任务。
入门
我将在假设您已经安装了您选择的主题并完成了 WooCommerce 的基本设置（例如添加一些产品）的情况下开始本教程。在这里，我们将使用WordPress 上提供的免费 Storefront 主题。它免费、简单，由核心 WooCommerce 开发人员自己创建。您可能会使用不同的主题，因此教程中的屏幕截图将与您在自定义页面时看到的有所不同。
下图显示了我的默认 WooCommerce 产品页面在 Storefront 中的外观。
页面底部还有一个部分，向观众展示了一些相关产品。
自定义产品页面上的现有元素
我们将使用StoreCustomizer 插件来更改我们的 WooCommerce 产品页面的外观。安装插件后，从主菜单转到管理仪表板中的外观 > 自定义 > StoreCustomizer。
然后，您将看到一些菜单项来自定义不同类型的 WooCommerce 页面。继续并单击WooCommerce 产品页面。
您现在应该会看到不同的小节，其中包含对产品页面的不同部分进行更改的选项。在顶部，有用于删除面包屑导航、图像缩放和灯箱功能的复选框。除了灯箱外，我没有选中它们。
然后可以选择为产品价格添加默认前缀或后缀。选中添加默认价格前缀复选框，然后在输入框中输入单词Only 。
我们最初的产品页面包含三个标签，分别用于产品的描述、附加信息和评论。现在，我们将通过选择“删除选项卡” 单选按钮从选项卡中删除“评论”部分。评论将出现在标签下方的单独部分中。我们可以通过检查标签后添加产品评论来做到这一点。 定制器使我们可以选择进一步更改评论部分的间距或在其上方和/或下方添加分隔线。
我们的产品页面默认显示三个相关产品。StoreCustomizer 允许我们更改显示的产品数量以及每行的项目。我已将Products Per Row值设置为4。
插件底部还有一些设置可以更改产品标题和价格等元素的颜色和大小。您还可以为“添加到购物篮”按钮设置颜色。
在产品页面上添加更多元素
我们现在将使用另一个名为Single Product Page Customizer的免费插件将内容放置在页面的不同部分。其中一些内容是静态的，而其他部分是动态的，例如向用户展示畅销产品列表。
安装插件后，转到WooCommerce > Single Product Page Customizer。该插件附带一个指南地图，向您展示您可以放置自己的内容的不同位置。单击添加新位置按钮为您的内容选择位置。这将向您显示如下图所示的编辑器。您可以从下拉菜单中选择一些内容，然后切换到文本选项卡。这将允许我们在页面上放置我们自己的自定义 html。
让我们首先在每个产品页面的顶部放置一个横幅。从下拉列表中选择单个产品之前的 woocommerce，然后将以下 HTML 放入编辑器中。
<section class="offers"> <p>购买超过 50 美元即可享受免费送货服务。</p></节>
这是一个截图供参考：
我们还将在产品摘要之后的产品页面上显示我们网站上的一些畅销产品，方法是从位置下拉列表中选择woocommerce after single product summary选项。我们在这里使用了许多可用的 WooCommerce 短代码之一来展示四种最畅销的产品。
<h3>Our Bestsellers</h3><p>[products limit="4" columns="4" best_selling="true" ]</p>
假设您想在产品页面上显示一些有关退货和运输政策的一般信息。我们可以通过从位置下拉列表中选择添加到购物车按钮选项后的 woocommerce来做到这一点。这是我通过编辑器放入的 HTML：
<ol class="wsppc-terms-list"><li>Delivery in 4 days.</li><li>10 day return policy.</li></ol>
使用 CSS 进行视觉更改
CSS 对于webp时代的元素布局和视觉样式是必不可少的。现在我们已经在产品页面上放置了所有我们想要的 HTML 内容，是时候使用一些 CSS 来以我们喜欢的方式呈现它们了。
如果您以前从未使用过 CSS，这部分可能会有点棘手。这是因为如果您使用与我的版本不同的主题或稍有不同的 HTML 结构，仅简单的复制粘贴可能不会导致您最终的更改相同。在这一点上，稍微熟悉一下 CSS 会派上用场。
回到手头的任务，您可以前往 WordPress 仪表板并导航至外观 > 自定义 > 附加 CSS以放置您自己的自定义 CSS。这是我使用的 CSS：
p.price small {
color: red;
font-weight: bold;
}
.wsppc-terms-list {
margin: 2rem 1rem;
color: black;
font-size: 1.25rem;
}
section.offers {
margin-top: -2rem;
}
section.offers p {
text-align: center;
font-size: 2rem;
color: black;
background: yellow;
padding: 1rem 0;
}
.woocommerce-breadcrumb {
font-size: 1.5rem;
}
div.storefront-breadcrumb .woocommerce-breadcrumb a {
text-decoration: none;
color: black;
}
.single-product div.product .woocommerce-product-gallery {
width: auto;
margin-right: 0;
}
div.woocommerce-product-gallery figure {
box-shadow: 0 0 10px #888;
margin: 1rem;
}
.single-product div.product p.price {
margin-top: -1rem;
}
div.woocommerce-product-details__short-description {
font-size: 1.4rem;
color: black;
}应用于前几个选择器的规则适用于我们的单一产品页面定制器。其他人将对我们店面主题中的现有元素进行更改。
更新 CSS 后，产品页面应如下图所示。
描述和附加信息选项卡也不再直接位于产品摘要下方。我们在它们之前添加了一排最畅销的产品。
作为练习，您应该自己尝试对这两个部分的视觉外观进行一些小改动。例如，您可以将标题加粗并更改“添加到购物车”按钮的颜色。
最后的想法
正如我在教程开头提到的，有很多方法可以在 WordPress 中自定义 WooCommerce 产品页面。您的理想路线将取决于您的预算、可用时间和编码技能。通常，完成工作的最简单方法是使用付费插件或页面构建器，它们提供了一系列功能，让您可以立即创建自定义产品页面。
但是，您也可以通过结合使用免费插件和一点 CSS 来免费自定义产品页面。如果您具有良好的编码技能，您将对页面的内容有更多的控制权，但是我们在本教程中介绍的概念应该足以满足您的所有基本需求。
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
