如何编辑 WooCommerce 商店页面 W/O Elementor ？

想知道如何让您的 WooCommerce 商店页面脱颖而出？ 最好的方法之一是编辑页面以使其对购物者更友好。 例如，您可以添加 Elementor 的产品小部件以增强自定义。

但是因为有很多方法可以编辑您的 WooCommerce 商店页面，您使用哪一种？ 好吧，这完全取决于您喜欢使用哪种方法。 您可以使用插件、elementor、代码，甚至是elementor 和 Shopready 的组合。

事不宜迟，让我们看看如何在没有元素的情况下编辑 WooCommerce 商店页面以增强用户体验。

如果您想为您的在线业务带来更多销售，您应该从编辑您的 WooCommerce 商店页面开始。 这样，您可以使其更加用户友好。 以下是一些最有效的方式来定制您的商店页面。

方法一：手动编辑

如果您执行一些编码没有问题，您可以手动编辑您的 WooCommerce 商店页面。 以下是有关如何执行此操作的分步指南。

第 1 步：获取子主题并为其命名

当您购买网站的主题时，它应该带有一个子主题。 但是，如果您找不到它，您可以随时要求您的主题开发人员为您提供一个。

要命名您的子主题，请打开您的 WordPress 控制面板并单击文件管理器。 接下来，选择 WP-Content >Themes>Your-theme-name。 从这里，您可以选择将您的孩子主题命名为 20-20 个孩子或类似的名称。

第二步：在子主题中添加文件夹结构

创建子主题后，下一步应该是在其中创建文件夹结构。 首先，单击您的子主题文件夹（20-20-child），您可以在主题下找到该文件夹​​。 然后，在其下创建一个新文件夹并将其命名为 WooCommerce。

第 3 步：创建子文件夹

在您的 WooCommerce 文件夹下，您需要创建另一个文件夹并将其命名为“archive-product-.php”。 此产品存档模板文件夹将用作商店页面模板文件。

第 4 步：将内容添加到您的商店页面模板文件

您在第三步中创建的商店页面模板文件将为空。 因此，要使其发挥作用，您必须添加内容。 为此，您可以使用代码。 但是，如果您不知道如何去做，只需跳到下一步。

第 5 步：设计您的商店页面模板

在这里，您无需从零开始设计 WooCommerce 商店页面。 相反，您可以使用已经预先设计好的产品页面模板。 接下来，查找父主题并选择 single.php 或 index.php 文件。 然后，将任一文件复制并粘贴到您在步骤 2 中创建的 WooCommerce 文件夹中。

之后，删除现有的“archive-product.php”文件。 然后，将新文件（single.php 或 index.php）命名为“archive-product.php”。 接下来，您将需要使用简码来编辑页面。

第 6 步：使用简码

第一步是将您的产品页面分成行或列。 例如，您可以决定将两个产品放在一个两列行中。 在这种情况下，您可以使用简码：

但是，要在两列中显示产品，每列最多显示六个产品，请使用以下短代码：

您只需在 archive-product.php 文件中输入代码。 但首先，您必须删除现有代码。 您还可以尝试不同的简码，直到您获得所需的商店页面外观。

方法二：使用 Elementor

没有心情编码？ 您还可以在 elementor 的帮助下自定义默认的 WooCommerce 产品页面。 这种方法很容易使用。 这里有一些简单的步骤可以帮助您。

第 1 步：启用 WordPress elementor

如果您没有元素，请访问您的 WordPress 仪表板并单击插件，然后单击添加新选项。 在搜索框中，查找 Elementor 网站构建器并选择安装它。 最后，按下激活按钮。

第 2 步：设计新的产品档案

安装 elementor 后，您只需创建一个新的产品存档模板。 您可以通过转到 WordPress 管理仪表板并选择我的模板来执行此操作。

在模板下，单击仪表板左上角的添加新选项卡，然后选择产品存档。 最后，使用创建模板选项，为您的模板命名。

第 3 步：自定义您的模板

要自定义您的产品页面模板，您可以选择从头开始。 在这种情况下，您会在编辑面板上找到一些可以使用的独特小部件。

或者，您可以使用任何预先设计的模板。 Elementor 允许您选择不同的产品页面布局和样式。 因此，您只需要选择一种样式，然后对其进行定制以适合您的品牌。

第 4 步：使用产品小部件

要进一步自定义您的 WooCommerce 商店页面，您需要添加小部件。 在 Elementor WordPress 仪表板上，单击元素选项卡。 您将看到许多可供选择的小部件，包括菜单购物车、产品、自定义添加到购物车等等。

第 5 步：预览您的自定义商店页面

在点击发布按钮之前，您需要预览您的产品页面。 在左下角的面板中，您将看到一个眼形图标。 单击图标并选择预览设置。 接下来，选择要预览的特定产品。

第 6 步：保存并发布

完成商店页面的编辑并对自定义设置感到满意后，单击“发布”按钮。 将出现一个添加条件字段，询问您希望产品模板显示在哪里。

选择 Shop Page 选项，然后单击 Save & Close 按钮​​。 您的自定义 WooCommerce 商店页面现在应该可用。

方法三：使用插件

您可以使用任何您想要的插件，因为其中有很多可用。 但是，在这篇文章中，我们将专注于使用elementor 和 Shopready 插件的组合。 只需按照以下步骤编辑您的商店页面。

第 1 步：安装 Shopready

在您的 WordPress 仪表板上，单击插件选项卡并选择添加新选项。 接下来，在面板右上角的搜索框中，搜索 Shopready 并单击激活按钮。

第 2 步：添加商店页面模板

接下来，您应该开发一个商店页面模板来自定义默认的 WooCommerce 产品页面。 为此，请找到您的 Shopready 插件，然后在仪表板下选择模板。 在这里，您会找到一系列预先构建的模板，您可以根据自己的品牌风格进行选择。

选择您的模板并将切换开关向右移动以激活模板。 最后，单击“保存更改”按钮。

第 3 步：自定义您的模板

选择 Shopready 页面模板后，现在是时候使用 elementor 对其进行自定义了。 您可以使用产品详细信息页面构建器、购物车页面构建器、存档页面构建器甚至帐户页面构建器进行自定义。 Shopready 为您提供了许多自定义功能。 编辑完 WooCommerce 商店页面后，只需单击更新按钮。

为什么使用 Shopready 来编辑 WooCommerce 商店页面？

不确定为什么要使用 Shopready 而不是任何其他插件来编辑您的商店页面？ 以下是一些原因。

使用方便

Shopready 不仅易于使用来编辑 WooCommerce 商店页面，而且还拥有易于导航的自定义功能。 更好的是，它带有预先设计的产品页面模板选项。 因此，您无需成为技术专家即可使用此插件。

完整的插件套件

您应该考虑结合使用 elementor 和 Shopready的另一个原因是因为这个插件是作为一个完整的工具包提供的。 简而言之，它包含自定义 WooCommerce 商店页面所需的一切，包括商店构建器。

出色的客户支持

当您使用 Shopready 编辑您的 WooCommerce 商店页面时，您将获得 24 小时支持和免费培训。 因此，如果您在某个地方遇到困难，您可以随时联系客户支持寻求帮助。

提供免费和付费版本

如果您的预算紧张，您可以利用 Shopready 的免费版本，它提供了许多自定义选项。 但是，如果您想要更多站点许可证，您可以选择 Startup、Business 或 Agency Shopready 版本。

结论

您在电子商务网站上展示产品的方式会对您的销售产生重大影响。 出于这个原因，自定义您的默认 WooCommerce 商店页面非常有意义。 但是，您必须决定是否要手动编辑页面，使用 Elementor 或插件。

总的来说，如果您有基本的编码知识，我们建议您手动编辑您的商店页面。 但是，如果您想要一种快速简便的方法来进行自定义，您可以考虑使用 elementor。 同时，如果您想要一种提供独特定制功能的方法，您应该使用elementor 和 Shopready 的组合。