如何将迷你购物车切换到 Woocommerce答案

【问题标题】：how to toggled mini cart to Woocommerce如何将迷你购物车切换到 Woocommerce
【发布时间】：2021-06-26 07:59:09
【问题描述】：

我想为我的网站添加迷你购物车。单击按钮购物车时如何隐藏和显示迷你购物车的下拉菜单？

我使用 JS 进行滑动切换，但无法正常工作。请帮助我。

$(document).ready(function() {
  $(".buttonreq").click(function() {
    $(".widget_shopping_cart_content").slideToggle("slow");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn bg-white buttonreq">
  <a class="text-dark" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'نمایش سبد خرید' );  ?>"> 
    <number><?php echo WC()->cart->get_cart_contents_count( ); ?></number>
    <span calss="cart">سبد خرید <i class="demo-icon text-danger icon-cart">&#xe817;</i></span>
  </a>   
</button>
<div class="widget_shopping_cart_content">
  <?php woocommerce_mini_cart(); ?>
</div>

【问题讨论】：

标签： jquery wordpress woocommerce

【解决方案1】：

你可以隐藏widget_shopping_cart_content查看下面的代码。

$(document).ready(function() {
  $(".buttonreq").click(function() {
    $(".widget_shopping_cart_content").slideToggle();
  });
});

.widget_shopping_cart_content{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn bg-white buttonreq">
    <?php _e( 'نمایش سبد خرید' );  ?>
    <number>(5)</number>
    <span calss="cart">سبد خرید <i class="demo-icon text-danger icon-cart">&#xe817;</i></span>
</button>
<div class="widget_shopping_cart_content">
  <?php woocommerce_mini_cart(); ?> mini cart
</div>

【讨论】：