In today’s tutorial we’ll be modifying the text of the add to cart button to display any already added items in the cart, instead of just the usual ‘Add to cart’ text, giving our customers more information regarding their upcoming purchases.
Install and activate a child theme
The first step on our process here is to create and install a child theme. If you are using one of our themes you can easily grab its child theme from our downloads section. If not, you can read our beginner’s guide on child themes to create your own. This step is essential in order to preserve our changes throughout theme updates.
Replacing the button text
Our first step is to replace the normal button text with the number of products in the cart for simple and variable products in product listings and the single product view. To do that we will use the woocommerce_product_add_to_cart_text and the woocommerce_product_single_add_to_cart_text hooks for the listing add to cart and the single add to cart button respectively.
In our code above we pull the cart quantities, this will give us back an array of product ids along with their respective cart quantities, if this returns nothing we stop there. For simple products we check if the product id is among the ones returned in the cart contents, if it is we add its quantity in a variable and return it as the button’s text, if the product is not among the cart’s contents we return the default text. Similarly for variable products, we check if any child product (or variation) is among the cart’s contents, if it is we follow the same procedure as with simple products.
Now any quantity of a particular product added in the cart will appear on the add to cart button as well.
Using AJAX to update the button text in real time
Our initial goal is achieved, however we can go a step further. As it stands now, if a product is added to the cart from the listing page, we will need to refresh the page in order for the number of items is removed. Similarly if our theme supports an AJAX based minicart, removing items from the minicart would also need a page refresh in order to be reflected on the button text. To achieve that we will need some AJAX goodness.
First up we create a small JS snippet and hook it at the site’s footer using wp_footer. The snippet detects clicks on the add to cart button and the remove from cart button for AJAX powered minicarts and calls on our text changer AJAX hook. The function cssigniter_change_add_to_cart_text ran on our hook works pretty similarly with our first function which modifies the button text, it gets the current cart contents, checks if the product in question has any products in the cart, gets the amount and returns it to be used as the add to cart button’s text. For removals it gets the cart contents makes the removal, calculates the new cart contents if applicable and creates the string which will be used as the button’s text.
We have successfully made cart quantities for each product appear on the add to cart button for product listing & single product views. Do you think this is a useful feature? Let us know in the comments below.