Change Add to Cart Button to View Cart Button after click in Woocommerce

泪湿孤枕 提交于 2019-12-08 07:39:31

问题


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?


回答1:


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

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…

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>

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;
}

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



来源:https://stackoverflow.com/questions/49583367/change-add-to-cart-button-to-view-cart-button-after-click-in-woocommerce

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!