如何使用 WooCommerce 设置 WordPress 购物车

已发表: 2022-10-28

因此，您几乎完成了创建全新的 WooCommerce 购物网站。您已完成构建主要市场产品布局、产品类别选择菜单和带有功能导航提示的页眉页脚。

任何电子商务网站最重要的方面是能够重定向并帮助客户从网站上的任何位置将产品添加到他们的购物车中，一直到结帐流程直到订单确认。

这听起来像是一个难以集成到 WordPress 电子商务网站的功能，但实际上并非如此。 WordPress 有一个庞大的社区支持其开发，您可以使用WooCommerce 购物车插件将此功能添加到您的网站，该插件可与任何WordPress WooCommerce 主题无缝协作。

WooCommerce 购物车如何工作？

当产品被添加到 WooCommerce 中的购物车时，它们会被添加到一个单独的列表中，其中包含客户选择的变体和数量。这有助于用户跟踪他们选择的产品，并且此功能还可以让他们在结账时自动查看他们将要处理的订单的计算总价格。它还为用户提供了编辑 WooCommerce 购物车页面的能力。

WooCommerce 中购物车的好处

在 WooCommerce 购物平台中使用购物车有很多好处。在我们深入了解如何创建 WooCommerce 购物车页面的分步指南之前，其中一些是：

旨在帮助客户选择要购买的一种或多种产品并继续浏览其他产品。
当您继续将产品添加到购物车时，它有助于计算产品的总价值。
显示您选择的产品的数量和变化，并相应地计算总值。
它可以通过单击按钮将客户重定向到结帐页面。
它可以附带额外的 WooCommerce 购物车功能，例如订单历史记录、保存购物车以备后用等。
用户可以获得带有令人惊叹的设计元素的 WooCommerce 购物车插件。

如何将购物车添加到 WooCommerce

现在，让我们来看看将购物车添加到 WooCommerce 的过程。在本文结束时，您将能够开始使用功能强大的电子商务平台销售各种产品，该平台具有 WordPress 的最佳购物车插件。

第 1 步：前置要求安装

要开始创建购物车和 WooCommerce 购物车设置过程，您需要在您的 WordPress 帐户上安装并激活某些插件项目。为此，您需要拥有最新版本的 WordPress 、 WooCommerce 、 Elementor page builder和 ShopReady WooCommerce Shop Builder 插件。

要安装插件，请登录您的 WordPress 帐户，前往WordPress Dashboard > Plugins > Add New并一一搜索插件，然后单击现在在安装过程完成后单击激活。 按照相同的步骤安装所有必需的插件和程序。

第 2 步：使用 WooCommerce 购物车主题

现在，为了进一步推进我们的购物车功能构建过程，您需要安装一个工作的 WooCommerce 主题以获取一些附加功能。在这种情况下，我们可以使用 WooCommerce 购物车模板，而不是使用WooCommerce WordPress 主题。

这将大大减少定制和网站发布所需的时间。

要在您的网站上安装一个有效的电子商务模板，首先创建一个新页面并从WordPress Dashboard > Pages > Add New中为其命名，然后单击您将被重定向到Elementor Editor屏幕。在这里，您会找到ShopReady – Elementor 模板库图标。 单击该图标以访问模板库。挑选适合您品牌标识的任何模板，然后单击“插入”以应用该模板。

等到模板完成其导入过程。

应该看起来像这样。

如果您尚未将产品添加到 WooCommerce，您的产品部分可能看起来是空的。您应该立即在您的 WooCommerce 平台上添加您尝试展示的产品。为此，您可以按照我们之前的指南 -如何将产品添加到 WooCommerce 商店。

每个 WooCommerce 产品都可以使用 WooCommerce 产品仪表板中的产品标题、描述、定价、折扣定价、图像、元数据、变体等进行自定义。

第三步：产品页面定制

要开始个性化产品页面的过程，请前往 ShopReady – WooCommerce Builder 仪表板并选择模板选项。从那里，您可以构建一个基本的产品页面，作为您自定义的起点。打开产品模板类别，然后在该类别中寻找单一产品设置。现在，从工具栏中选择编辑图标。

之后，将为您加载显示Elementor Editor的屏幕。 只需单击可以在 Elementor 界面右上角看到的加号，您就可以开始自定义页面的过程。当涉及到您的页面外观和您想要使用的小部件时，当您可以插入其中的 Elementor 部分时，您可以使用多种选项。

第 3 步：使用 Elementor 小部件自定义 WooCommerce 商店的产品页面

添加产品标题

由于您已经使用 Elementor 为您的 WooCommerce 产品页面建立了主要部分结构，您现在可以开始添加产品标题的过程。您需要使用拖放方法将产品标题小部件放置在产品页面上您想要的位置，以实现此目标。
通过转到 Elementor 导航栏，选择“内容”选项卡，然后在执行此操作后出现的子菜单中查找“编辑器刷新”选项，显示正确的产品标题。要选择合适的产品，请在位于演示产品下的下拉菜单中单击其名称。
您需要进入 WooCommerce 产品仪表板并在那里添加或修改基本产品信息，以便此数据显示正确的产品标题。这可以通过单击“添加”或“编辑”按钮来完成。

将特色图片添加到产品页面
之后，您需要确保您的产品同时具有图片库和特色图片。为此，您可以使用 Elementor 随附的电子商务多合一插件中包含的各种图像小部件中的任何一种。
为了演示，我们将使用 ShopReady Thumbnail with Zoom 小部件，顾名思义，它具有缩放功能。如果您使用此小部件，您将能够在客户将鼠标移到您的产品图像上时向他们显示您的产品图像的 WooCommerce 产品悬停缩放版本。
与以前一样，您可以通过单击演示产品选项的内容选项卡来选择适当的产品图像。
为定价小部件添加块
产品定价块是应该出现在您的电子商务产品页面上的另一个重要组件。为了实现这一点，您需要通过适当的调整来更改 WooCommerce 产品属性，并使用 ShopReady 价格小部件，该小部件需要位于产品标题下方。

为确保显示正确的定价，请从“内容”选项卡的“演示产品”选项的下拉菜单中选择产品标题。
添加产品描述
使用此 WooCommerce 产品插件产品描述小部件，您不仅可以选择添加产品描述，还可以高度自定义描述。通过使用样式选项卡，您将能够更改产品描述向公众显示的方式。

添加添加到购物车功能
“添加到购物车”选项有助于客户在进入结帐页面之前将其他商品添加到购物车中，这是另一个非常重要的功能。
利用 ShopReady 添加到购物车小部件将允许您为电子商务商店的页面配备强大的添加到购物车功能版本。在此小部件的帮助下，您将能够让您的客户直接从“添加到购物车”块中调整他们在购物车中的产品数量。
您还可以通过 WooCommerce 产品样式 Elementor Style 选项卡修改 Elementor 添加到购物车按钮的外观。在这里，您可以更改字体、颜色、背景、边距、填充和其他属性。

将元数据添加到产品页面
如果您想为您的消费者提供更令人满意的购物体验，那么您应该在添加产品时使用您添加到 WooCommerce 的元数据和产品属性来实施WooCommerce 产品过滤器。
查找 ShopReady Meta 小部件并将其放在产品专用页面上的“添加到购物车”按钮下方。这将允许您显示相关信息。
当您从位于“内容”选项卡的“演示产品”选项的下拉菜单中选择适当的产品标题时，您的产品标签和元数据应该会准确显示。

将社交媒体分享按钮添加到产品页面
通过使用简单的社交媒体分享按钮块，您可以让您的消费者直接从他们购买的商品的 WooCommerce 产品页面在社交媒体上分享您的产品帖子。您只能通过使用 Elementor Social Share 小部件提供的拖放功能来制作。

直接从“内容”选项卡，可以使用用户选择的任何社交媒体图标、文本和可共享链接对块进行个性化。此外，Elementor Style 选项卡允许用户根据需要更改社交分享块的视觉呈现。
这样，您就完成了自定义 WooCommerce 产品页面的基础知识。
第 4 步：添加 WooCommerce 相关产品
利用 WooCommerce 产品插件中包含的相关产品小部件，您可以在产品页面上显示相关产品，这是促进在线销售的绝佳策略。使用 ShopReady 相关产品小部件，您可以轻松构建一个分为多个部分的精美产品滑块。
要使用小部件，只需将其拖放到单个产品块下，然后从“内容”选项卡中选择要在单个产品页面上显示的特定产品。

第 5 步：添加 WooCommerce 自定义结帐字段
如前所述，这是一个正常运行的电子商务平台的一个重要方面。使用 ShopReady 之类的 WooCommerce 商店构建器，您可以轻松地使用 WooCommerce 购物车短代码并以这种方式实现功能性电子商务购物车，或者您可以使用 ShopReady 小部件来应用此功能。
要拥有一个正常运行的购物车，您首先需要在产品页面上添加“添加到购物车”小部件。 我们已经这样做了。因此，让我们返回并创建购物车页面本身，一旦将所有产品添加到购物车中，它们就会在其中显示。
ShopReady – WooCommerce Shop Builder 允许用户在两个不同的购物车模板之间进行选择，这些模板可从ShopReady 仪表板中使用。 从 ShopReady 仪表板中，单击模板菜单现在启用和编辑 ShopReady 提供的 WooCommerce 预设购物车模板。
通过创建新的 WooCommerce 购物车模板或编辑现有的购物车模板，您将被重定向到 Elementor 编辑器屏幕。
从这里，您可以简单地添加 ShopReady购物车小部件，您的购物车页面将自动呈现其形式，并且使用 ShopReady 创建一个没有插件的 WordPress 购物车就是如此简单的过程。它不需要额外的插件或工具。
如果您的购物车中已经添加了任何产品，它应该看起来像这样。
有了它，一个带有功能性购物车按钮的功能性 WooCommerce 购物车页面。您还可以选择使用 Elementor 进一步自定义购物车页面。使用 Elementor，您可以自由更改购物车页面的各个方面，从背景颜色到 Elementor 排版设置。
您还可以使用 WooCommerce 购物车短代码。在这种情况下，您必须使用 Elementor ShortCode 小部件。
完成自定义商店页面后，请确保点击发布/更新以使更改对访问者和客户生效。
结论
创建 WooCommerce 自定义添加到购物车按钮的整个过程似乎是一项艰巨的任务，但随着您阅读本指南，您会发现使用正确的工具集创建此技术功能的过程一点也不难。 ShopReady WooCommerce Shop Builder 是一个完整的软件包，它提供了从头开始创建强大的电子商务平台所需的所有工具。
如果您在 ShopReady 或购物车创建过程中遇到任何问题，您可以随时查看WooCommerce 购物车文档。
关于 WooCommerce 购物车的常见问题
WordPress 有购物车吗？
WordPress CMS 是一个准系统网站托管平台。它不包括任何购物车或电子商务相关功能。但由于它是一个开源平台，您可以自由使用其社区创建的任何电子商务工具、插件或模块来将购物车添加到 WordPress 网站。
WooCommerce 有购物车吗？
是的，WooCommerce 基础插件带有功能性购物车按钮和购物车页面。但它本质上非常简约。要为购物车页面增添趣味，您可以使用任意数量的WooCommerce 扩展，或者您可以充分利用 Elementor 和 ShopReady WooCommerce 页面构建器的电子商务购物车页面自定义选项。从 WooCommerce 购物车图标到深入的页面布局，一切都可以使用 ShopReady 进行自定义。
如何在 WooCommerce 中创建自定义结帐页面？
下载并安装 ShopReady – WooCommerce Shop Builder。现在从 ShopReady 仪表板创建一个新的 WooCommerce 结帐页面模板。您将被重定向到 Elementor 编辑器，从这里您可以利用 ShopReady Checkout 小部件在 WooCommerce 中创建功能性自定义结帐页面。