CODEWITHSUNDEEP
wordpresswoocommercecart
jvandervoo
jvandervoo

Reputation: 113

Is there any way to display the WooCommerce mini-cart on my WordPress site?

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

The theme I'm currently using is Flatsome (with the 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

I have a plugin called WooCommerce Product Tables that (I believe) displays this mini-cart like this

I was wondering if there is any way for me to display this as a fixed element (within a div perhaps) on my page?

I'm quite inexperienced, so any help is appreciated :)

Upvotes: 11

Views: 75835

Answers (3)

Vaibhav Kumar
Vaibhav Kumar

Reputation: 818

  1. Create the shortcode in functions.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>';
            echo '<div class="widget_shopping_cart_content">';
                woocommerce_mini_cart();
            echo '</div>';
        echo '</li>';
    echo '</ul>';
}
add_shortcode( 'custom_techno_mini_cart', 'custom_mini_cart' );
  1. Then add this [custom_techno_mini_cart] shortcode anywhere on page.
  2. Now add this inside your template:
<?php echo do_shortcode('[custom_techno_mini_cart]'); ?>
  1. Make your layout according to your requirement in first point.
  2. Add like this also using this
woocommerce_mini_cart()

Upvotes: 17

Fab
Fab

Reputation: 1200

As Bhoomi suggested, using woocommerce_mini_cart(); works however ajax cart doesn't update the minit cart.

Using this method I suggest to wrap mini_cart function with "widget_shopping_cart_content" woocommerce class, for example :

<div class="widget_shopping_cart_content"><?php woocommerce_mini_cart(); ?></div>

So with ajax add to cart, the mini cart is updated also.

Upvotes: 21

Bhoomi
Bhoomi

Reputation: 537

You can use woocommerce_mini_cart() wherever you want to display your minicart.

This function loads the mini-cart.php template to display the mini cart.

Upvotes: 12

Related Questions