Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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!

share|improve this question
    
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? –  Chris May 9 '13 at 8:39

1 Answer 1

up vote 3 down vote accepted

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"));
    add_thickbox();
}

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>');
        }
        $('#show_hidden_cart').click();
    });
});

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.

share|improve this answer
    
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!! :) –  Chris May 14 '13 at 4:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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