title: Woocommerce mini cart cannot show properly on my custom theme
body: <p>I am making a wordpress theme with integrated woocommerce and have problem like two buttons (details &amp; checkout) cannot show with properly in mini cart layout after added a product or more to cart on <a href="http://dev.galerigadget.com/shop/" rel="nofollow noreferrer">shop page</a> like screenshot below:
  <a href="https://i.stack.imgur.com/bovCk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bovCk.jpg" alt="mini cart on shop page"></a></p>
  
  <p>After I navigated to <a href="http://dev.galerigadget.com/" rel="nofollow noreferrer">home page</a> it will show without any problem for mini cart below:
  <a href="https://i.stack.imgur.com/MyN7K.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MyN7K.jpg" alt="mini cart on home page"></a></p>
  
  <p><strong>Header.php</strong></p>
  
  <pre><code>&lt;?php
  /**
   * The header for our theme.
   *
   * This is the template that displays all of the &lt;head&gt; section and everything up until &lt;div id="content"&gt;
   *
   * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
   *
   * @package testing
   */
  global $woocommerce;
  ?&gt;&lt;!DOCTYPE html&gt;
  &lt;html &lt;?php language_attributes(); ?&gt;&gt;
  &lt;head&gt;
      &lt;meta charset="&lt;?php bloginfo( 'charset' ); ?&gt;"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=10" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="profile" href="http://gmpg.org/xfn/11"&gt;
      &lt;link rel="pingback" href="&lt;?php bloginfo( 'pingback_url' ); ?&gt;"&gt;
      &lt;?php wp_head(); ?&gt;
  &lt;/head&gt;
  
  &lt;body &lt;?php body_class(); ?&gt;&gt;
  &lt;div id="container"&gt;
  &lt;div id="page" class="hfeed site"&gt;
      &lt;a class="skip-link screen-reader-text" href="#content"&gt;&lt;?php esc_html_e( 'Skip to content', 'gg' ); ?&gt;&lt;/a&gt;
  
      &lt;header id="masthead" class="site-header" role="banner"&gt;
          &lt;nav id="site-navigation" class="main-navigation2" role="navigation"&gt;
              &lt;button class="menu-toggle" aria-controls="top-menu" aria-expanded="false"&gt;&lt;?php esc_html_e( 'Top Menu', 'gg' ); ?&gt;&lt;/button&gt;
  
  &lt;ul class="mini-cart"&gt;
  
  &lt;li&gt; &lt;a href="&lt;?php echo esc_url( $woocommerce-&gt;cart-&gt;get_cart_url() ); ?&gt;" title="&lt;?php esc_attr_e('View your shopping cart'); ?&gt;" class="cart-parent"&gt; 
  
  &lt;div class="bubblex"&gt;
                 &lt;div class="inside"&gt;
                   &lt;div class="inside-text"&gt;
  &lt;?php 
  
  echo sprintf(_n('%d', '%d', $woocommerce-&gt;cart-&gt;cart_contents_count), $woocommerce-&gt;cart-&gt;cart_contents_count);
  
  ?&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;i class="cart_control"&gt;::before&lt;/i&gt;&lt;/a&gt; 
  &lt;?php
  
  echo '&lt;ul class="cart_list"&gt;';
  
  echo '&lt;li class="cart-title"&gt;&lt;b&gt;Isi Keranjang:&lt;/b&gt;&lt;/li&gt;';
  
  if (sizeof($woocommerce-&gt;cart-&gt;cart_contents)&gt;0) : foreach ($woocommerce-&gt;cart-&gt;cart_contents as $cart_item_key =&gt; $cart_item) :
  
  $_product = $cart_item['data'];
  
  if ($_product-&gt;exists() &amp;&amp; $cart_item['quantity']&gt;0) :
  
  echo '&lt;li class="cart_list_product"&gt;&lt;a href="' . esc_url( get_permalink( intval( $cart_item['product_id'] ) ) ) . '"&gt;';
  
  /* echo $_product-&gt;get_image(); */
  
  echo apply_filters( 'woocommerce_cart_widget_product_title', $_product-&gt;get_title(), $_product ) . '&lt;/a&gt;';
  
  if($_product instanceof woocommerce_product_variation &amp;&amp; is_array($cart_item['variation'])) :
  
  echo woocommerce_get_formatted_variation( $cart_item['variation'] );
  
  endif;
  
  echo '&lt;span class="quantity"&gt;' . $cart_item['quantity'] . ' &amp;times; ' . woocommerce_price( $_product-&gt;get_price() ) . '&lt;/span&gt;&lt;/li&gt;';
  
  endif;
  
  endforeach;
  
  else: echo '&lt;li class="empty"&gt;' . __( 'Keranjang kosong') . '&lt;/li&gt;'; endif;
  
  if ( sizeof( $woocommerce-&gt;cart-&gt;cart_contents ) &gt; 0 ) :
  
  echo '&lt;li class="total"&gt;';
  
  echo  '&lt;span class="amount2"&gt;Total&lt;/span&gt;' . $woocommerce-&gt;cart-&gt;get_cart_total() . '&lt;/li&gt;';
  
  echo '&lt;p class="buttons"&gt;&lt;a href="' . esc_url( $woocommerce-&gt;cart-&gt;get_cart_url() ) . '" class="button"&gt;Detail&lt;/a&gt; &lt;a href="' . esc_url( $woocommerce-&gt;cart-&gt;get_checkout_url() ) . '" class="button checkout"&gt;Checkout&lt;/a&gt;&lt;/p&gt;';
  
  endif;
  
  echo '&lt;/ul&gt;';
  
  ?&gt;
  
  &lt;/li&gt; &lt;/ul&gt;
  
              &lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'top', 'menu_id' =&gt; 'top-menu' ) ); ?&gt;
          &lt;/nav&gt;&lt;!-- #site-navigation --&gt;
          &lt;div class="site-branding"&gt;
              &lt;?php if ( is_front_page() &amp;&amp; is_home() ) : ?&gt;
                  &lt;h1 class="site-title"&gt;&lt;a href="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;" rel="home"&gt;&lt;?php bloginfo( 'name' ); ?&gt;&lt;/a&gt;&lt;/h1&gt;
              &lt;?php else : ?&gt;
                  &lt;p class="site-title"&gt;&lt;a href="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;" rel="home"&gt;&lt;?php bloginfo( 'name' ); ?&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;?php endif; ?&gt;
              &lt;p class="site-description"&gt;&lt;?php bloginfo( 'description' ); ?&gt;&lt;/p&gt;
          &lt;/div&gt;&lt;!-- .site-branding --&gt;
  
          &lt;nav id="site-navigation" class="main-navigation" role="navigation"&gt;
              &lt;button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"&gt;&lt;?php esc_html_e( 'Primary Menu', 'gg' ); ?&gt;&lt;/button&gt;
              &lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'primary', 'menu_id' =&gt; 'primary-menu' ) ); ?&gt;
          &lt;/nav&gt;&lt;!-- #site-navigation --&gt;
          &lt;/div&gt;&lt;!-- #site-wrapper --&gt;
      &lt;/header&gt;&lt;!-- #masthead --&gt;
  
      &lt;div id="content" class="site-content"&gt;
  </code></pre>
  
  <p><strong>Style.css</strong></p>
  
  <pre><code>.main-navigation2 .cart_control {
      display: block;
      margin: 10px 0 10px 0;
      padding: 0 20px 0 19px;
      width: 30px;
      float: right;
      background: url('img/icons/set_icons/cart-grey.png') center no-repeat;
      height: 30px;
      /* line-height: 9999em; */
      overflow: hidden;
  }
  
  .main-navigation2 .cart_wrapper {
      text-align: left;
      position:  absolute;
      width: 300px;
      right: -2px;
      background-color: #494949;
      z-index: 1000;
      padding: 20px 12px;
      color: #fff;
  }
  
  .main-navigation2  .mini-cart .sf-sub-indicator {
    display: none!important;
  }
  .main-navigation2  .mini-cart &gt; li {
    padding: 0 20px 0 20px;
    display: block;
    text-decoration: none;
    line-height: 50px;
    color: #000;
    font-family: sans-serif;
    background: url(img/arrow.png) no-repeat scroll right / 19% 29%;
  }
  .main-navigation2 .mini-cart &gt; li ul.cart_list {
    display: none!important;
    visibility: hidden!important;
  }
  .main-navigation2  .mini-cart &gt; li:hover {
     padding: 0 20px 0 20px;
     display: block;
     text-decoration: none;
     /* line-height: 42px; */
     color: #000;
     font-family: sans-serif;
  }
  
  .main-navigation2  .mini-cart a.cart-parent {
    display: block;
    margin: 2px 2px 0 0;
    padding: 0;
    width: 47px;
    float: right;
    background: url('img/icons/set_icons/cart-grey.png') center no-repeat;
    height: 30px;
    /* line-height: 0em; */
    /* overflow: hidden; */
    z-index: 1000;
  }
  .main-navigation2 .mini-cart a.cart-parent:hover {
    text-decoration: none;
  }
  .main-navigation2 .mini-cart a.cart-parent span {
    font-weight: bold;
    font-family: "Bitter", sans-serif;
    text-transform: uppercase;
    font-size: 1.2em;
    line-height: 1;
  }
  .main-navigation2 .mini-cart a.cart-parent mark {
    display: block;
    font-size: 0.6em;
    font-style: normal;
    font-weight: bold;
    position: relative; 
  }
  
  .main-navigation2 ul.mini-cart {
      float: right;
      margin: 6px 61px 0 0;
      width: 60px;
      overflow: hidden;
  }
  
  .main-navigation2 ul.mini-cart li:hover {
      position: static;
  }
  .main-navigation2 ul.mini-cart li:hover ul.cart_list {
      right: 244px;
  }
  .main-navigation2 ul.mini-cart li {
      text-align: right;
      width: auto;/* The cart contents drop down */
    }
  .main-navigation2 ul.mini-cart li a {
      border-right: 0;
      border-bottom: 0;
    }
  .main-navigation2 ul.mini-cart li:last-child {
      border-bottom: 0;
      width: auto;
    }
  .main-navigation2 ul.mini-cart li:hover ul.cart_list {
      display: block!important;
      visibility: visible!important;
    }
  .main-navigation2 ul.mini-cart li ul.cart_list {
     text-align: left;
     position: absolute;
     width: 283px;
     right: -2px;
     background-color: #ff0000;
     z-index: 1000;
     padding: 16px 6px;
     color: #000;/* The totals *//* The buttons */
     margin: -13px 7px 0px 0px;
  }
  .main-navigation2 ul.mini-cart li ul.cart_list li.empty {
      text-align: center;
      padding: 10px;
  }
  .main-navigation2 ul.mini-cart li ul.cart_list li {
      margin: 0px 18px 0px 18px;
      padding: 0 0 6px 9px;
      float: none;
      /* height: 80px; */
      border: 0;
      line-height: 1.1;
      background: #fff;
      /* -webkit-border-radius: 10px; */
      -moz-border-radius: 10px;
  }
  
  .main-navigation2 ul.mini-cart li ul.cart_list li.cart-title {
      border: 0;
      text-align: left;
      font-family: arial;
      font-size: 1.5em;
      color: #000;
      background-color: #ff0000;
  }
  
  .main-navigation2 ul.mini-cart li ul.cart_list li.cart-title h3 {
      padding: 6px 0 6px;
      margin: 0;
      font-weight: bold;
      color: #fff;
      font-size: 1.2em;
      text-shadow: 1px 1px 0 #050505;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .main-navigation2 ul.mini-cart li ul.cart_list li.cart_list_product {
      text-align: left;
      overflow: hidden;
      zoom: 1;
      clear: left;
  }
  .main-navigation2 ul.mini-cart li ul.cart_list li.cart_list_product:first-child {
      border-top: 0;
  }
  .main-navigation2 ul.mini-cart li ul.cart_list li.cart_list_product img {
      float: right;
      padding: .27em;
      background: #fff;
      -webkit-border-radius: 0.136em;
      -moz-border-radius: 0.136em;
      border-radius: 0.136em;
      margin: 0 0 .27em .27em;
  }
  .main-navigation2 ul.mini-cart li ul.cart_list li.cart_list_product a {
      border: 0;
      margin: -5px 0 0 0;
      padding: 0;
      /* text-shadow: 1px 1px 0 #050505; */
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      color: #000;
      font-size: 1em;
      text-decoration: none!important;
      background: none;
      font-weight: bold;
      text-transform: uppercase;
      white-space: normal;
      width: auto;
  }
  .main-navigation2 ul.mini-cart li ul.cart_list li.cart_list_product a:hover {
      border: 0;
      padding: 0;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      background: none;
  }
  .main-navigation2 ul.mini-cart li ul.cart_list li.cart_list_product dl.variation {
      overflow: hidden;
      zoom: 1;
      margin-bottom: 0;
      filter: alpha(opacity=@opacity * 100);
      -moz-opacity: 0.7;
      -khtml-opacity: 0.7;
      opacity: 0.7;
  }
  .main-navigation2 ul.mini-cart li ul.cart_list li.cart_list_product dl.variation dt {
      float: left;
      clear: left;
      font-weight: 700;
  }
   .main-navigation2 ul.mini-cart li ul.cart_list li.total {
      text-align: left;
      color: #000;
      padding: 6px 10px 6px;
      margin: 20px 16px 6px;
      background: #fff;
      font-size: 1.2em;
      line-height: 1;
      /* text-transform: uppercase; */
      border-bottom: none;
      /* -webkit-border-radius: 10px; */
      -moz-border-radius: 10px;
      border-radius: 10px;
      /* box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3); */
      /* -webkit-box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3); */
      -moz-box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3);
      -o-box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3);
   }
  .main-navigation2 ul.mini-cart li ul.cart_list p.buttons {
      text-align: center;
      height: 20px!important;
      padding: 4px 0 0 0!important;
  }
  .main-navigation2 ul.mini-cart li ul.cart_list p.buttons .button {
      border-top: 1px solid #451c08;
      background: #573220;
      background: 
      -webkit-gradient(linear, left top, left bottom, from(#de591b), to(#573220));
      background: 
      -webkit-linear-gradient(top, #de591b, #573220);
      background: 
      -moz-linear-gradient(top, #de591b, #573220);
      background: 
      -ms-linear-gradient(top, #de591b, #573220);
      background: 
      -o-linear-gradient(top, #de591b, #573220);
      padding: 0px 12px;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: -2px;
      -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
      -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
      box-shadow: rgba(0,0,0,1) 0 1px 0;
      text-shadow: rgba(0,0,0,.4) 0 1px 0;
      color: white;
      font-size: 12px;
      font-family: Helvetica, Arial, Sans-Serif;
      text-decoration: none;
      vertical-align: middle;
      width: 100px;
      height: 36px;
      margin: 0 0 -37px 16px;
  }
  
  .main-navigation2 ul.mini-cart li ul.cart_list p.buttons .button.checkout {
      margin: 0 0 0 160px;
  
  }
  .main-navigation2 ul.mini-cart li ul.cart_list p.buttons .button:hover {
     border-top-color: #853718;
     background: #853718;
     color: #ccc;
  }
  
  .main-navigation2 ul.mini-cart li ul.cart_list p.buttons .button:active {
     border-top-color: #573220;
     background: #573220;
  }
  
  span.amount2 {
      text-align: left;
      margin: 0 30px 0 8px;
      color: #000;
  }
  </code></pre>
  
  <p>So how I can fix it to make mini cart layout will show with properly for all pages on my custom theme? </p>