WooCommerce cart – overwriting ajax handler (Update)

Update: unfortunately what I wanted to achieve here is not possible.

Note: I expected to overwrite ajax handlers, however the first PHP hook which is fired in case of ajax situation is fired after the item has been added to the cart, which makes it inefficient to write. Part of the text that is no longer valide will be striked through. The Gravity Forms plugin mentioned here is working without ajax (the Select Options button appears in case of product with multiple options, which redirect the user to the single product view)

[biginfobox textcolor=”#ffffff” title=”Have you checked our snippets collection?” href=”https://wp-doin.com/snippets/” button_title=”WordPress snippets” target=”_blank”]They might just reduce your anger on hitting that unworthy tutorial![/biginfobox]

WooCommerce comes with a great amount of online shop options, being one of the most popular WordPress plugins at the moment. It comes with a number of default functionalities, being a great, basic shop for typical use cases.

However the problem a developer might encounter is the not-so-extensive amount of default options it offers. Even though there are numerous plugins that cover different case scenarios they will not always be a perfect match for one’s clients and to put it bluntly they generate extra expenses.

This tutorial is addressed towards advanced WordPress users aware of filters, actions and aims to cover one of the common situations – How do I add extra cart item data to the product via ajax? This is Woo default behavior, on the shop and product archive pages. Add to cart button works without the page reload, adding the data via JavaScript and php, which makes it complicated to extend.

What might I need extra cart data for?

1. Adding client made text to the product (say T-shirt with custom logo text on it)
2. Adding option to specify the product quantity
3. Adding all other options that can’t be covered with product variations (say product connected gift)

It’s fairly simple to add these via Gravity Forms Add-ons, but what’s the reason for paying for two plugins (we also need the basic Gravity Forms plugin) if we can cover that on our own?

How do we do it?

1. First we need to overwrite the default cart button.
2. Second we need to define two more hooks that will handle extra data properly.

Overwriting the cart

There are two ways to overwrite Woo template – via hooks and via templates I’ll use the second method in our case.

You’ll need to copy the add-to-cart.php file from woocommerce/templates/loop and put it inside woocommerce/loop/add-to-cart.php file inside your themes root directory.

Change the file a little bit, echoing input type text just above the add to cart link.

Defining hooks

There are two hooks that handle the ajax cart call:

1. WordPress action  – woocommerce_ajax_added_to_cart that can be found inside the woocommerce-ajax.php file
2. jQuery event trigger – adding_to_cart that can be found inside the add-to-cart.js file

These are both fired on the add to cart button press, with the jQuery trigger firing first

The above script is simply checking if the extra post parameter has been added (I’ll cover more in the following tutorial)

Whereas the above script is the custom data JavaScript handler.

How does it work?

In a nutshell – the jQuery trigger sends extra data to the WooCommerce ajax cart handler, which is then fetched by the php script.

Basics have been covered. What waits next? I’ll show you how to extend the code and actually save the custom data, so that it would be added to the cart and checkout pages later on, so that we we’re certain our data was saved. The data will be later on added to the order details with our custom logo text.

Note: The above will not work. You can use the jQuery event trigger to pass some extra data, however the first moment you can use it is after the item has been added. 

What can it be used for? Well it’s up to you I imagine this would be useful for adding an order based extra information. If you have any questions or comments go ahead and ask me. I’ll do my best to help you out with any suggestions.