在 Woocommerce 中单击后将添加到购物车按钮更改为查看购物车按钮

Posted 2023-03-25

【中文标题】在 Woocommerce 中单击后将添加到购物车按钮更改为查看购物车按钮

【英文标题】：Change Add to Cart Button to View Cart Button after click in Woocommerce

【发布时间】：2018-09-10 00:33:00

【问题描述】：

我有一个 Wordpress 网站。我正在为 WooCommerce 使用 Storefront 主题。我启用了 ajax 添加到购物车按钮。单击“添加到购物车”按钮并将产品成功添加到购物车时，我希望该按钮更改为“查看购物车”按钮（将文本更改为“查看购物车”，并链接到购物车）。如果可能的话，我还想为按钮设置不同的样式，以将其与标准的添加到购物车按钮区分开来。 php 代码会是什么样子？

【参考方案1】：

默认情况下，在 Woocommerce 中，当您点击“添加到购物车”按钮时，另一个按钮已经出现在右侧，并带有“查看购物车”：

这已经由 woocommerce jQuery 脚本完成，它在添加到购物车按钮之后添加了一个链接到购物车页面的“查看购物车”按钮……

如果您愿意，您可以隐藏“添加到购物车”按钮，因为单击附加类时会出现 "added"（请参见下面生成的代码）：

<a rel="nofollow" href="/shop/?add-to-cart=741" data-quantity="1" data-product_id="741" data-product_sku="WN001-1" class="button product_type_simple add_to_cart_button ajax_add_to_cart added">Add to cart</a>

所以使用 CSS 你可以在上面使用display:none;并且只保留“查看购物车” ...

.ajax_add_to_cart.added 
    display:none !important;

然后很容易重新设置“查看购物车”按钮的样式（链接到购物车页面）：

a.added_to_cart.wc-forward 
    background-color: #8c8c8c !important;
    color: white !important;
    min: .618em 2.4em !important;

a.added_to_cart.wc-forward:after 
    content: inherit; !important;

所以你不需要任何代码，只需要一些 CSS……

【讨论】：

谢谢！有没有办法通过模板文件对其进行样式/编辑？在functions.php中覆盖？