如何更改 WooCommerce 添加到购物车按钮，特别是 ::after 中的“继续购物车”内容？

【问题标题】：How can I change the WooCommerce add to cart button, specifically the "proceed to cart" contents in the ::after?如何更改 WooCommerce 添加到购物车按钮，特别是 ::after 中的“继续购物车”内容？
【发布时间】：2018-01-23 22:43:55
【问题描述】：

请原谅我有任何重复的问题或没有正确提出问题。我是 WooCommerce 的新手。单击添加到购物车按钮后，我想使用 WooCommerce 他们的脚本提供反馈，但我必须更改此脚本的 HTML 输出。我不知道该怎么做。

我所说的按钮是https://melvinosengawebdesign.nl/product-categorie/bedrukken/flyers/a6/上的添加到购物车按钮

单击按钮后，它会对按钮进行一些 CSS 更改，这很好，但它还在 ::after 中添加了一个“继续购物车”链接。我想更改它，以便将其添加到例如跨度或段落中，并且我也想更改文本。

【问题讨论】：

标签： wordpress woocommerce

【解决方案1】：

点击按钮后，JavaScript 将 'add' 类添加到按钮中，因此出现 css 中的一些规则：

.woocommerce a.button.added::after {
  font-family: WooCommerce;
  content: '\e017';
  margin-left: .53em;
  vertical-align: bottom;
}

如果您需要删除它 - 只需添加到 style.css

body.woocommerce a.button.added::after {
  content: none;
}

如果点击后需要给按钮添加一些HTML，可以这样使用JS：

$('.add_to_cart_button').on('click', function(){
  $(this).after('<span>Added</span>');
});

【讨论】：