如何将图标添加到购物车页面上的 WooCommerce“继续结帐”和“更新购物车”按钮？答案

【问题标题】：How to add an icon to the WooCommerce “Proceed to Checkout” & "Update Cart" buttons located on the cart page?如何将图标添加到购物车页面上的 WooCommerce“继续结帐”和“更新购物车”按钮？
【发布时间】：2013-12-04 23:36:22
【问题描述】：

我正在尝试将“fa-chevron-circle-right”图标添加到“继续结帐”按钮，并将另一个图标添加到“更新购物车”按钮。

我已尝试更改此设置

<input type="submit" class="checkout-button button alt" name="proceed" value="<?php _e( 'Proceed to Checkout &rarr;', 'woocommerce' ); ?>" />

到这里

<button type="submit" class="checkout-button button btn-primary alt" name="proceed"><?php _e( 'Proceed to Checkout', 'woocommerce' ); ?> <i class="fa fa-chevron-circle-right"></i></button>

但由于某种原因，该按钮不再起作用。当您使用按钮 <button> 标签单击“继续结帐”时，它不会像使用默认 <input> 按钮时那样进入结帐页面。

使用 CSS3 :after 或 :before 也不适用于 <input> 标记。

我还尝试将 jQuery 表单提交触发器添加到我的自定义按钮，但这是行不通的。在这一点上，我能想到的唯一破解的解决方案是在视觉上隐藏<input> 按钮并通过 jQuery 触发它们的提交。

【问题讨论】：

我实际上已经安装了 Wp & Woo 来测试它，尽管将其更改为：<button> 并包含图标，但我仍然可以成功地进行结帐并出现任何错误 - 什么是 WP 和 Woo Commerece你有版本吗？
@MackieeE 该问题出现在 WP3.8 和 WooCommerce 2.0.20 上。
我今天遇到了一些问题，我只是在按钮上添加了value="1"。如果值为空 [update] & [proceed to checkout] 不起作用。

标签： wordpress woocommerce

【解决方案1】：

不久前我遇到了同样类型的问题，这就是我为解决问题所做的。

将类提交添加到您的按钮

<button type="submit" class="checkout-button button btn-primary alt submit" name="proceed"><?php _e( 'Proceed to Checkout', 'woocommerce' ); ?> <i class="fa fa-chevron-circle-right"></i></button>

并在 JavaScript 文件上提交这部分（最好包含在页面页脚</body> 之前）

<script type="text/javascript">
$(".submit").click(function(){ $(this).closest("form").submit(); });
</script>

【讨论】：

"type" 在按钮上毫无意义。我想你的意思是说class="submit"
@EliasRodrigues 抱歉，奇怪的是这不起作用。我也尝试过类似的解决方案，但它也可以工作。我尝试增加产品的数量，然后从浏览器控制台运行$('form.cart-form').submit();，但页面重新加载回之前的数量。 :(
@randak 你说的“类型”对按钮没有意义是什么意思？ type=submit 作为 HTML5 按钮标记的属性列在 w3schools 中。
@Micah 您是否使用诸如 firebug（或类似工具）之类的工具进行检查，看看它是否在干扰代码？
@EliasRodrigues 我已经尽我所能使用 Chrome 开发人员工具解决问题。您有什么特别的想法可以让我尝试使用 firebug 或类似工具吗？

【解决方案2】：

为什么不添加背景图像而不是像下面这样编辑其核心文件

.woocommerce button.checkout-button {
 background-image: images/pathtoimages.png;

}

【讨论】：

我们的偏好和习惯是使用 CSS 来设置样式而不是图像。