Question

我正在尝试向“继续结帐”按钮添加“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触发它们的提交。

Answer 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>

Answer 2

为什么不添加背景图片而不是编辑其核心文件，如下所示

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

}

如何将图标添加到WooCommerce“继续结账”＆amp;购物车页面上的“更新购物车”按钮？

2 个答案: