如何在 WooCommerce 中添加自定义添加到购物车按钮

已发表: 2022-08-11

想了解如何在 WooCommerce 中添加自定义添加到购物车按钮？

在您的 WooCommerce 商店上自定义按钮可以帮助您吸引注意力，提高转化率和销售额。

在本文中，我们将逐步向您展示如何在 WooCommerce 中添加自定义添加到购物车按钮。

为什么要自定义您的 WooCommerce 添加到购物车按钮？

编辑您的添加到购物车按钮可帮助您将其与您销售的 WooCommerce 产品对齐。如果您坚持使用默认的购物车按钮，它可能与产品类型完全无关。

例如，您可能想要更改添加到购物车的文本并将其替换为多个产品的图标或复选框。或者，您可能希望更改按钮颜色以在您的网站上更加突出。

您可能还想在 WooCommerce 网站的其他地方显示购物车按钮，例如结帐页面、类别和购物车页面。

要执行上述任何操作，您需要一种轻松自定义添加到购物车按钮的方法，而无需大惊小怪。

如何在 WooCommerce 中添加自定义添加到购物车按钮

幸运的是，我们分享了 2 种创建 WooCommerce 自定义添加到购物车按钮的方法。第一种方法使用简单而强大的 WordPress 插件，第二种方法向您展示如何在没有插件的情况下手动自定义购物车按钮。

方法 1：使用 SeedProd 添加自定义添加到购物车按钮
方法 2：使用代码添加自定义添加到购物车按钮

方法 1：使用 SeedProd 添加自定义添加到购物车按钮

对于第一种方法，我们将使用 SeedProd，这是 WordPress 的最佳网站构建器。

这个功能强大的插件包括一个拖放页面构建器，可让您无需代码即可自定义网站的任何部分。您可以创建自定义 WordPress 主题，创建高转化率的登录页面，并通过点击自定义任何布局。

由于 SeedProd 包含 WooCommerce 支持，您可以使用它来设计和启动整个 WooCommerce 网站，而无需开发人员。按照以下步骤使用 SeedProd 将自定义添加到购物车按钮添加到您的 WooCommerce 网站。

步骤 1. 安装并激活 SeedProd

首先，前往 SeedProd 定价页面并选择您的 SeedProd 计划。要访问 WooCommerce 功能，您需要SeedProd Elite计划。

接下来，登录您的 SeedProd 帐户，单击下载选项卡并下载插件 .zip 文件。您也可以在同一页面上复制许可证密钥。

现在您可以将插件上传到您的 WordPress 网站。如果您需要这方面的帮助，请按照本指南安装和激活 WordPress 插件。

安装 SeedProd 后，转到SeedProd » 设置页面并粘贴您之前保存的许可证密钥。

确保在进行下一步之前单击“验证密钥”按钮。

注意： SeedProd 允许您通过 2 种方式将自定义添加到购物车按钮添加到 WooCommerce：

使用登陆页面
创建自定义 WooCommerce 主题

对于本教程，我们将创建一个自定义 WooCommerce 主题，因为它会自动创建您的所有 WooCommerce 商店页面。

步骤 2. 选择网站工具包

对于下一步，导航到SeedProd » Theme Builder页面。在这里，您可以构建 WooCommerce 主题的不同部分并自定义每个模板的设计。

您可以通过从头开始构建每个部分或使用预制的网站工具包来做到这一点。我们将使用第二个选项，因为它更容易更快。

要选择网站工具包，请单击主题按钮。

在下一个屏幕上，您将看到可用的网站工具包。 WooCommerce 兼容套件的标题旁边将有“WooCommerce”。

然后，您可以将鼠标悬停在您喜欢的设计上，然后单击复选标记图标将其导入您的主题生成器。

对于本指南，我们使用的是Pottery Shop WooCommerce网站工具包。

导入您的网站工具包后，您将在如下列表中看到主题的各个部分：

SeedProd 会自动创建内容页面，例如您的关于、购物车、结帐和联系页面。您可以通过从 WordPress 仪表板转到页面» 所有页面来查看这些页面，并使用 SeedProd 的拖放页面构建器对其进行自定义。

让我们通过自定义您的 WooCommerce 添加到购物车按钮开始自定义过程。

第 3 步。自定义您的添加到购物车按钮

下面我们将向您展示如何在您的商店、产品、产品档案和博客页面上的 WooCommerce 中添加自定义添加到购物车按钮。

添加自定义商店页面添加到购物车按钮

首先，我们将从编辑您的 WooCommerce 商店页面开始。为此，请找到Shop Page模板部分并单击Edit Design链接。

您的 WooCommerce 商店页面将在 SeedProd 的拖放页面构建器中打开，您可以在其中自定义您的设计而无需代码。

您可以单击实时预览来编辑任何页面元素并自定义其设置。同样，您可以将块从左侧面板拖放到您的页面上以添加更多内容。

默认情况下，商店页面模板使用产品网格块。单击它将显示设置以控制产品列表的外观。

例如，您可以更改列数、按产品 ID、查询或类型过滤产品，并更改它们显示的顺序。

您还可以单击“高级”选项卡以查看更多自定义选项，包括字体样式、颜色、边框等。

在按钮部分下，您只需单击几下即可自定义 WooCommerce 添加到购物车按钮。例如，在按钮样式下拉菜单下，您可以选择：

平坦的
二维
优质的
鬼
关联

此外，您可以更改按钮颜色、版式、大小和边框半径。

尝试自定义选项以找到适合您业务需求的外观。然后，点击右上角的保存按钮以存储您的更改，然后单击 X 图标返回主题生成器。

更改产品页面添加到购物车按钮

现在让我们看看在单个产品页面上自定义添加到购物车按钮。您需要找到产品页面模板并单击编辑设计链接将其打开。

这一次，您将在 SeedProd 的可视化编辑器中看到单个产品的详细信息。

默认情况下，它将显示：

产品图片
产品名称
产品价格
简短的介绍
添加到购物车按钮
产品数据选项卡

您可以通过单击它们来自定义每个元素以显示它们的设置。例如，单击添加到购物车按钮可让您将按钮文本更改为更具吸引力的内容。

您还可以更改按钮对齐方式并从 Font Awesome 图标库添加图标。

高级选项卡可让您像以前一样更改按钮颜色、版式、阴影和间距。

编辑您的产品档案购物车按钮

更改产品档案上的添加到购物车按钮遵循与您的商店页面类似的过程。只需找到Product Archives模板部分，然后单击Edit Design链接即可在可视化编辑器中打开它。

SeedProd 在此页面上使用的块是存档产品块。如果用户单击产品类别标题或使用您商店的搜索栏，他们将看到此页面。

此块不会在实时可视化编辑器中显示预览；但是，您仍然可以通过打开其设置来自定义块在前端显示的内容。

例如，您可以更改列数、按计数显示项目以及按过滤器排序。此外，您可以启用按查询过滤，例如：

按属性查询
按标签选择
按类别选择
按产品 SKU 选择
按组选择
按可见性选择

然后在“高级”选项卡中，您可以通过更改颜色、字体、间距、大小等来自定义添加到购物车按钮。

在博客页面上添加自定义添加到购物车按钮

您的博客页面是另一个可以显示添加到购物车按钮的地方。这样，您可以在博客文章之后推荐产品以促进销售。

要使用 SeedProd 执行此操作，请找到博客页面模板并单击编辑设计链接。

默认情况下，您的博客页面将显示您最新的博客文章列表，但您可以对其进行自定义以包含您喜欢的任何其他内容。

让我们在此页面中添加一个展示新产品的部分。首先，将列块拖到页面上，然后选择列布局。

接下来，选择图像块并添加产品图像。

在第二列中，您可以使用标题和段落块作为产品标题和描述。然后，拖动添加到购物车按钮，以便用户可以将产品添加到他们的购物车。

现在，单击该块以打开其设置并添加您的自定义添加到购物车按钮文本。

您还需要该特定产品的产品 ID。您可以通过从 WordPress 仪表板转到产品 » 所有产品并复制 ID 值来找到它。

之后，您可以将 ID 粘贴到添加到购物车按钮上的产品 ID 字段中。这将确保在单击添加到购物车 URL 后将特定产品添加到您的购物车中。

请记住单击“保存”按钮以保存您的更改。

第 4 步。保存并发布您的更改

当您对 WooCommerce 页面的外观感到满意时，您就可以让您的商店上线了。为此，请返回主题生成器，然后在右上角，将启用 SeedProd 主题切换到“打开”位置。

让我们看一下我们自定义的一些页面：

商店页面

产品页面

存档页面

博客页面

方法 2：使用代码添加自定义添加到购物车按钮

我们将向您展示的下一个方法涉及更改 WordPress 网站上的代码。如果您是初学者，我们通常不建议您这样做，因为它可能会破坏您的网站。

也就是说，我们知道有些人不想完全覆盖他们现有的网站设计。

在开始之前，我们建议您创建一个子主题，以确保您在更新 WordPress 主题时不会丢失所做的更改。如果出现任何问题，您还应该备份您的 WordPress 网站以安全地恢复它。

因为我们将为此方法处理代码片段，所以最好安装一个代码片段插件，例如 WPCode。这意味着您无需直接编辑主题文件。

一切准备就绪后，您可以开始在 WooCommerce 中手动添加自定义添加到购物车按钮。

更改产品页面上的添加到购物车按钮文本

首先，我们将看看在 WooCommerce 中更改添加到购物车按钮的文本。例如，您可能希望将按钮文本更改为“购买此商品”。

为此，请在 WPCode 中创建自定义代码片段并粘贴以下 PHP 代码：

add_filter('woocommerce_product_single_add_to_cart_text','SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce(){
return __('Buy this item', 'woocommerce');
}

保存您的更改，然后当您查看单个产品时，您将看到新的添加到购物车按钮文本。

更改添加到购物车按钮的颜色

如果要更改添加到购物车按钮的颜色，则需要添加一些自定义 CSS。您可以通过从 WordPress 仪表板转到外观 » 自定义 » 附加 CSS来执行此操作。

现在粘贴以下 CSS 代码：

.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

您可以通过粘贴以下 CSS 代码段对您的产品存档页面执行相同操作：

.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

你有它！

我们希望本文能帮助您了解如何在 WooCommerce 中添加自定义添加到购物车按钮。

您可能还喜欢这篇文章：如何在 WordPress 中编辑菜单以进行自定义导航。

准备好自定义您的 WooCommerce 添加到购物车按钮了吗？

立即开始使用 SeedProd

谢谢阅读。请在 YouTube、Twitter 和 Facebook 上关注我们，获取更多有用的内容来发展您的业务。