Woocommerce购物车小部件不显示任何内容

Question

我在侧栏中添加了woocommerce Cart Widget，并且由于对主题和woocommerce行为进行了一些定制，我将这一行代码添加到主题functions.php中：

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

当本行处于活动状态时，没有显示cart内容，只显示小部件标题。当我注释掉这一行时，购物车中的项目将显示在单个产品页面和商店页面上。见标记：

<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>

正如你所看到的，所有的产品都会显示出来，按钮也会出现。然而，它们并不是显示在所有其他页面上。在这些页面上，只会出现小部件标题。在这些页面上，标记如下所示：

<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>

我的问题是:为什么remove_action代码行会干扰cart小部件的内容？为什么div class="widget_shopping_cart_content">在其他页面上是空的，不管remove_action行是否被注释掉。

我发现这和我的定制有关。当我使用标准的12主题(在wicht上，我的子主题是build)时，它工作得很好。

编辑

当然，我正在寻找自己，并能够缩小范围。原因是在我的主题的function.php中的这个函数中，但是我不知道它有什么问题，我应该如何处理它。

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');

我在拔头发.我已经试了一个星期来解决这个问题了。请帮帮忙！？

编辑2

当我尝试调试该项目时，我收到了以下消息：

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

问题可能在于您的砖石功能，而不是小部件本身。默认的insert小部件只为小部件创建一个空div；然后它使用JS插入产品。您所显示的砖石JS很可能会导致某种错误，从而阻止WC的JS工作。这就是为什么当禁用脚本时，小部件可以正常工作。您需要检查控制台中发现的任何JS错误，并纠正它们。