在Woocommerce中单击后，将“添加到购物车"按钮更改为“查看购物车"按钮 [英] Change Add to Cart Button to View Cart Button after click in Woocommerce

问题描述

我有一个Wordpress网站.我正在为WooCommerce使用店面主题.我已启用Ajax添加到购物车按钮.单击添加到购物车按钮并将产品成功添加到购物车后，我希望该按钮更改为查看购物车"按钮(将文本更改为查看购物车"，然后链接到购物车).如果可能的话，我还想对按钮进行不同的样式设置，以使其与标准的添加到购物车"按钮区别开来. php代码是什么样的?

I have a Wordpress website. I am using the Storefront theme for WooCommerce. I have ajax add to cart buttons enabled. When an Add to Cart button is clicked and a product is successfully added to the cart I would like the button to change to a View Cart button (change the text to "View Cart", and link to the cart). If possible I would also like to style the button differently to differentiate it from the standard add to cart button. What would the php code look like?

推荐答案

默认情况下，在Woocommerce中，当您单击添加到购物车"按钮时，在右侧的查看购物车"中已经出现了另一个按钮:

In Woocommerce by default, when you click on "add to cart" button another button already appears on the right side with "View Cart":

这已经由woocommerce jQuery脚本完成，该脚本在添加到购物车"按钮后添加了一个链接到购物车页面的查看购物车"按钮...

This is already done by a woocommerce jQuery script, that adds after Add to cart button a "View cart" button linked to the cart page…

如果您喜欢单击其他类 "added" ，可以隐藏添加到购物车"按钮(请参见下面生成的代码):

You can hide the "add to cart" button if you like as when clicked an additional class "added" appears in it (see the generated code below):

<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; ，并且仅保留查看购物车" …

So with CSS you can use display:none; on it and only keep "View Cart" …

.ajax_add_to_cart.added {
    display:none !important;
}

然后可以轻松地重新设置查看购物车"按钮的样式(链接到购物车页面):

Then is easy to re-style that "view cart" button (linked to the cart page):

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

So you don't need any code, just some CSS…

这篇关于在Woocommerce中单击后，将“添加到购物车"按钮更改为“查看购物车"按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！