Woocommerce Cart widget displays no content

Question

I added the woocommerce Cart Widget to my sidebar and due to some customization of the theme and woocommerce behavior I added this line of code to my themes functions.php:

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

When this line is active no cart contents are shown, just the widget title. When I comment out this line the items in the cart are shown on the single products page and on the shop page. See markup:

<div id="secondary" class="widget-area" role="complementary">
        <aside id="woocommerce_widget_cart-12" class="widget woocommerce widget_shopping_cart">
            <h3 class="widget-title">Winkelmand</h3>
            <div class="widget_shopping_cart_content">
               <ul class="cart_list product_list_widget ">
                  <li>
                      <a href="http://localhost/?product=flying-ninja">
                         <img width="600" height="600" src="//localhost/wp-content/uploads/2013/06/poster_2_up-600x600.jpg" class="attachment-shop_thumbnail wp-post-image" alt="poster_2_up">Flying Ninja                      </a>
                         <span class="quantity">1 × <span class="amount">€12,00</span></span>                   
                  </li>
                  <li>
                      <a href="http://localhost/?product=patient-ninja">
                         <img width="600" height="600" src="//localhost/wp-content/uploads/2013/06/hoodie_3_front-600x600.jpg" class="attachment-shop_thumbnail wp-post-image" alt="hoodie_3_front">Patient Ninja                       </a>                    
                         <span class="quantity">1 × <span class="amount">€35,00</span></span>                       
                  </li>
                  <li>
                      <a href="http://localhost/?product=photo-3">
                          <img width="399" height="600" src="//localhost/wp-content/uploads/2014/12/DSC07870-399x600.jpg" class="attachment-shop_thumbnail wp-post-image" alt="SONY DSC">Photo 3                        </a>
                          <span class="quantity">1 × <span class="amount">€15,00</span></span>                  
                  </li>
               </ul><!-- end product list -->

<p class="total"><strong>Subtotaal:</strong> <span class="amount">€62,00</span></p>

<p class="buttons">
    <a href="http://localhost/?page_id=334" class="button wc-forward">Winkelmand bekijken</a>
    <a href="http://localhost/?page_id=335" class="button checkout wc-forward">Afrekenen</a>
</p>

</div>
</aside>
</div>

As you can see all thre products are shown and the buttons appears as well. However they are not shown on all the other pages. On those pages only the widget title appears. on those pages the markup looks like this:

<div id="secondary" class="widget-area" role="complementary">
    <aside id="woocommerce_widget_cart-12" class="widget woocommerce widget_shopping_cart">
        <h3 class="widget-title">Winkelmand</h3>
            <div class="widget_shopping_cart_content">
            </div>
    </aside>        
</div>

The questions I have are: Why is the remove_action line of code interfering with the contents of the cart widget? Why is the div class="widget_shopping_cart_content"> empty on the other pages, no matter if the remove_action line is commented out or not.

I figured out that it has something to do with my customization. When I use the standard twentytwelve theme (on wicht my child theme is build) it works fine.

EDIT

Of course I'm searching myself to and was able to narrow it further down. The cause is in this function in my theme's function.php but I don't know what is wrong with it and what I should do about it.

function twentytwelve_child_masonry() {
if (!is_admin()) {
    wp_enqueue_script('masonry');

    add_action('wp_footer', 'twentytwelve_child_add_masonry');      
    function twentytwelve_child_add_masonry() { ?>
        <script>
                    (function( $ ) {
                        "use strict";
                        $(function() {
                        //set the container that Masonry will be inside of in a var
                        var container = document.querySelector('.products');
                        //create empty var msnry
                        var msnry;
                        // initialize Masonry after all images have loaded
                        imagesLoaded( container, function() {
                            msnry = new Masonry( container, {
                                itemSelector: '.product',
                                isAnimated: true
                            });
                        });
                        });
                        }(jQuery));
        </script>
    <?php 
    }
}
}
add_action('init', 'twentytwelve_child_masonry');

I'm pulling my hair out..... I'm trying for a week now to solve this problem. Please help!?

EDIT 2

I got this message when I try to debug the project:

TypeError: 'null' is not an object (evaluating 'a.length') (15:45:27:306 | error, javascript)
at f (http://localhost/wp-includes/js/masonry.min.js?ver=3.1.2:1:28901)
at g (http://localhost/wp-includes/js/masonry.min.js?ver=3.1.2:1:29105)
at g (http://localhost/wp-includes/js/masonry.min.js?ver=3.1.2:1:29031)
at (anonymous function) (http://localhost/?product=happy-ninja:262:40)
at j (http://localhost/wp-includes/js/jquery/jquery.js?ver=1.11.1:2:27248)
at fireWith (http://localhost/wp-includes/js/jquery/jquery.js?ver=1.11.1:2:28057)
at ready (http://localhost/wp-includes/js/jquery/jquery.js?ver=1.11.1:2:29901)
at J (http://localhost/wp-includes/js/jquery/jquery.js?ver=1.11.1:2:30261)
> 

Answer 1

The problem probably lies with your Masonry function and not the widget itself. The default WC cart widget creates just an empty div for the widget; it then uses JS to insert the products. It's highly likely that the Masonry JS you show is causing some kind of error that's preventing WC's JS from working. This is why when you disable your script the widget works fine. You need to check your console for any JS errors that you're finding and correct them.