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

Question

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

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