有什么方法可以在我的 WordPress 网站上显示 WooCommerce 迷你购物车?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/50033227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there any way to display the WooCommerce mini-cart on my WordPress site?
提问by jvandervoo
I'm developing a website whereby I would like customers to be able to constantly view the contents of their cart so they can add/remove items on the fly (using WooCommerce).
我正在开发一个网站,我希望客户能够不断查看购物车的内容,以便他们可以动态添加/删除项目(使用 WooCommerce)。
The theme I'm currently using is Flatsome (with the UXBuilder)
我目前使用的主题是 Flatsome(使用 UXBuilder)
I've noticed there is a template for the WooCommerce mini-cart in woocommerce/templates/mini-cart.php. This looks like what I want to be displayed on my page
我注意到 woocommerce/templates/mini-cart.php 中有一个 WooCommerce 迷你购物车的模板。这看起来像我想在我的页面上显示的内容
I have a plugin called WooCommerce Product Tables that (I believe) displays this mini-cart like this
我有一个名为 WooCommerce Product Tables 的插件(我相信)它像这样显示这个迷你购物车
I was wondering if there is any way for me to display this as a fixed element (within a div perhaps) on my page?
我想知道是否有任何方法可以将它显示为我的页面上的固定元素(可能在 div 内)?
I'm quite inexperienced, so any help is appreciated :)
我很缺乏经验,所以任何帮助表示赞赏:)
回答by Bhoomi
You can use woocommerce_mini_cart()wherever you want to display your minicart.
您可以woocommerce_mini_cart()在任何想要展示您的迷你车的地方使用。
This function loads the mini-cart.php template to display the mini cart.
此函数加载 mini-cart.php 模板以显示迷你购物车。
回答by Vaibhav Kumar
First Create the shortcode on function.php
首先在function.php上创建简码
// Add Shortcode
// 添加简码
function custom_mini_cart() {
echo '<a href="#" class="dropdown-back" data-toggle="dropdown"> ';
echo '<i class="fa fa-shopping-cart" aria-hidden="true"></i>';
echo '<div class="basket-item-count" style="display: inline;">';
echo '<span class="cart-items-count count">';
echo WC()->cart->get_cart_contents_count();
echo '</span>';
echo '</div>';
echo '</a>';
echo '<ul class="dropdown-menu dropdown-menu-mini-cart">';
echo '<li> <div class="widget_shopping_cart_content">';
woocommerce_mini_cart();
echo '</div></li></ul>';
}
add_shortcode( '[custom-techno-mini-cart]', 'custom_mini_cart' );
Then add this [custom-techno-mini-cart] short code anywhere on page.
然后在页面的任意位置添加这个 [custom-techno-mini-cart] 短代码。
Now add this inside your template
现在将其添加到您的模板中
<?php echo do_shortcode(['custom-techno-mini-cart']); ?>
Hope This will help you.
希望这会帮助你。
Make your layout according to your requirement in first point.
在第一点根据您的要求进行布局。
ADD Like This ALSo using This
添加喜欢这个也使用这个
woocommerce_mini_cart()
回答by fmarrot
As Bhoomisuggested, using woocommerce_mini_cart();works however ajax cart doesn't update the minit cart.
正如Bhoomi 所建议的那样,使用woocommerce_mini_cart();作品但是 ajax 购物车不会更新迷你购物车。
Using this method I suggest to wrap mini_cart function with "widget_shopping_cart_content" woocommerce class, for example :
使用这种方法,我建议用“widget_shopping_cart_content”woocommerce 类包装 mini_cart 函数,例如:
<div class="widget_shopping_cart_content"><?php woocommerce_mini_cart(); ?></div>
So with ajax add to cart, the mini cart is updated also.
因此,通过将 ajax 添加到购物车,迷你购物车也会更新。

