如何添加自定义 WooCommerce 付款图标结帐页面

已发表: 2021-03-01

添加结帐页面付款图标 您想为结帐页面添加自定义 WooCommerce 支付网关图标吗？ 在这篇文章中，我将向您展示如何快速将自定义支付图标添加到 WooCommerce 结帐页面。 本文包含快速将 WooCommerce 支付网关图标添加到结帐页面的步骤的详细说明。

编辑您的主题文件并不总是自定义 WooCommerce 的安全方法——我通过创建一个您可以在此处找到的 WooCommerce 支付图标插件，减轻了您在网站上任何地方添加支付图标的负担。

这个插件提供了一种简单的方法来添加超过 65 种付款方式按钮的 SVG 图标！ 如果您不喜欢 SVG，您还可以上传付款横幅，您还可以使用简码在 WooCommerce 商店的任何地方显示已接受的付款。 目前以折扣价在这里查看。

如果您经营的是 WooCommerce 商店，您可能熟悉默认的信用卡图标集。对某些人来说，它们可能看起来不错，但如果您在高分辨率屏幕中打开它们，它们可能会显得有些模糊。 此外，它们看起来有点过时了。

如果您正在寻找可以实施的自定义、清晰的设计，那么本文将为您提供指导。 理想情况下，最好的图标设计是添加具有人造阴影的自定义弯曲按钮形状。

付款方式图标 WordPress

自定义 WooCommerce 支付网关图标

在大多数情况下，您希望添加在移动设备上可以很好地缩放并且看起来很棒的高分辨率图标。 您可以通过多种来源获得这些支付图标 - 例如，创意设计市场提供各种免费和高级支付方式图标，例如在 Pixeden 上设置的支付方式图标，您可以下载并在 WooCommerce 商店中使用。

对于这个简单的教程，我们将使用具有现代外观的图标。 最好的解决方案是在任何屏幕上使用 SVG 图标以获得完美的分辨率。-我们让您在我们的 WC PayIcons 插件中更轻松地使用 SVG 教程，帮助您在 WooCommerce 商店的任何地方添加支付图标。 WordPress 的付款图标 如果您在互联网上进行快速搜索，您会发现大量的信用卡图标，您可以在结帐页面甚至 WooCommerce 商店的页脚上实现这些图标。 然而，那些对我来说很突出的可以在 Dribble 中找到。

此外，它们具有用户会喜欢的令人愉悦的设计。 这些图标为您的结帐页面增加了一些信任感，因为人们在进行在线购买时会更加小心。这些是我们将要使用的图标：

自定义 woocommerce 支付网关图标

此外，Dribble 上可用的是用户熟悉的支付方式的图像，例如 VISA、MasterCard、PayPal 和 AMEX。

这将有助于建立更可靠和值得信赖的演示文稿，吸引首次访问者的注意力。 但是，如果您的支付网关包含不同的公司，您也可以查看更多信息。

老实说，互联网上只有几篇文章试图向您展示如何使用钩子和过滤器添加自定义 WooCommerce 支付网关图标。 本文试图帮助您将每个默认 WooCommerce 支付网关的图标添加到您想要的任何内容中。

正因为如此，一些 WooCommerce 商店只接受 Visa 和 MasterCard 支付，他们不想显示其他 WooCommerce 支付网关（如美国运通）的图标，以免混淆客户。

添加付款方式图标 WooCommerce 结帐页面

您可以使用我们在下面为所有 WooCommerce 支付网关图标共享的相同代码，但您只需要找到用于在您的在线商店中接受付款的信用卡的特定图标。

要添加自定义 WooCommerce 支付网关图标，我们需要过滤woocommerce_gateway_icon函数，该函数很可能在每个网关扩展中都可用。 您需要在 functions.php 文件中添加以下代码：

 // 将自定义信用卡图标添加到 WooCommerce 结帐页面 

add_filter ('woocommerce_gateway_icon', 'njengah_custom_woocommerce_icons');

功能 njengah_custom_woocommerce_icons() {

    $icon = '<img src="icons-url" alt="stripe" />';

     返回$图标；

}

但是，您需要根据您网站上支付图标图像的位置来替换图像 URL。

您可以将图标上传到 WordPress 媒体文件夹，然后将代码中的icons-url替换为相应的图像路径，如下图所示：
添加付款方式图标 woocommerce 结帐

结论

您可以使用上面代码片段中的过滤器在您的 WooCommerce 商店结帐页面上快速添加付款图标，并将图标上传到您的媒体库。 如果您不想弄乱代码，或者您是 WooCommerce 主题开发人员，想要扩展此过滤器并为用户提供更多选择，我将在我的优秀解决方案中为您提供。

我构建了最好的支付图标插件，它带有简码功能，允许用户使用简单的简码在支付网关结账页面、页脚小部件和其他任何地方添加图标。 –在这里查看。 该插件支持使用 SVG，这是自定义支付图标以适合您的主题或网站配色方案的绝佳解决方案。 使用 WC PayIcons 插件，您可以直接从相应的支付网关页面上传图标，如下所示：
WC PayIcons 自定义网关图标

类似文章

  1. 如何在 WooCommerce 结帐页面上更改 PayPal 图标
  2. 登录 WooCommerce 后如何重定向到购物车
  3. 如何在 WooCommerce 中隐藏产品或按类别或角色隐藏产品
  4. 在 WooCommerce 中更改继续结帐文本
  5. 如何隐藏 WooCommerce 客户或按用户角色的管理栏
  6. 如何在 WooCommerce 中设置特色产品
  7. 如何在 WooCommerce 中隐藏购物车小计或删除小计行
  8. 如何在 WooCommerce 中获取当前产品类别名称
  9. 如何在 WooCommerce 中更改缺货文本
  10. 如何在 WooCommerce 中更改结帐按钮文本 [下订单]
  11. 为您的商店提供 30 多个最佳 WooCommerce 插件（大多数是免费的）
  12. 如何将删除图标添加到 WooCommerce 结帐页面
  13. 如何跳过购物车并重定向到结帐页面 WooCommerce
  14. 如何删除已添加到您的购物车消息 WooCommerce
  15. 如何更改 WooCommerce 的“已添加到购物车”通知
  16. 如何在 WooCommerce 中显示库存可用性文本 » In Stock & Out
  17. 如何在 WooCommerce 中移动图像下的描述