I would like to create a modal 'pop-up' window in WooCommerce to appear when the "Add to cart" button has been clicked. This has to occur after the WC actions that actually add the product to the cart but before/instead of any redirects.

I have found several likely/possible hooks, actions and filters which may be useful to me but I am unsure which I need and how to use them properly (sorry I'm a total WooCom n00b):

  • woocommerce_template_loop_add_to_cart
  • woocommerce_template_single_add_to_cart
  • woocommerce_after_add_to_cart_button
  • there's also the add_to_cart_redirect filter for $url

I am also not sure how to actually trigger the lightbox to appear from within PHP! (Okay in HTML I use an element like a hyperlink which has to be clicked, but how to trigger the same thing at a certain point in the PHP execution? -- Do I need AJAX?)

Lastly I was planning to use ThickBox as it is bundled with WordPress, is there any reason to avoid this and or a better option available, or is there a lightbox implementation bundled with WooCommerce?

Kind thanks for any and all help!

  • 2
    Thanks for the down-vote! I appreciate that this is perhaps not the most clear or direct question but I was trying to cover a lot of ignorance in a small space. Next time you could please leave me some tips on how to improve my question?
    – Bucky
    May 9, 2013 at 8:39

1 Answer 1


The following works for me for product archive pages (these include both the main shop page as well as archive pages for product categories, for example).

It will show the current cart contents in a thickbox. I chose to show this for this example just because that's the data that one gets back through Ajax after clicking the add-to-cart button, but you may want a different kind of info in your box. You can get the product_id of the product just added, for example, by looking at surrounding html elements.

In your theme's functions.php (or in the class definition for the theme, if you have one) there's probably some 'enqueue_scripts' function. You should add this to this function to ensure the thickbox script is loaded.

if (is_woocommerce() && is_archive()) {
    wp_enqueue_script( 'frontend-custom', get_template_directory_uri() . '/js/frontend-custom.js', array("jquery"));

In a file (in your theme directory) js/frontend-custom.js (or wherever you have your theme's js):

jQuery(document).ready(function($) {
    $('body').on('added_to_cart',function(e,data) {
        //alert('Added ' + data['div.widget_shopping_cart_content']);
        if ($('#hidden_cart').length == 0) { //add cart contents only once
            //$('.added_to_cart').after('<a href="#TB_inline?width=600&height=550&inlineId=hidden_cart" class="thickbox">View my inline content!</a>');
            $(this).append('<a href="#TB_inline?width=300&height=550&inlineId=hidden_cart" id="show_hidden_cart" title="<h2>Cart</h2>" class="thickbox" style="display:none"></a>');
            $(this).append('<div id="hidden_cart" style="display:none">'+data['div.widget_shopping_cart_content']+'</div>');

Some additional notes:

  • I suppose you can also output javascript directly into the page from php. In this case, I think you probably want to hook with add_action('woocommerce_ajax_added_to_cart', 'myfunction'); This action is run inside woocommerce_ajax_add_to_cart() right after adding an item to the cart (passing validation, etc), but before redirecting.

  • The single product pages do not work in the same way ('add to cart' is there a normal php form, no ajax is involved).

  • I haven't tested this, but WooCommerce comes with its own 'prettyphoto.js', which works by adding 'rel="prettyPhoto"' to an href link, pretty much as the thickbox class works in the above example. You might want to give it a try to keep design consistency with WooCommerce.

  • Wow thanks for such a brilliant answer that's perfect!! -- I did try prettyPhoto but found that it was difficult to alter the dimensions in CSS without also changing those for the gallery popups (although in hindsight a bit of jQuery could have done this!) -- anyway thanks again!! :)
    – Bucky
    May 14, 2013 at 4:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.