Website Building » WooCommerce » How Do I Create a Mini Cart in WooCommerce?

How Do I Create a Mini Cart in WooCommerce?

Last updated on December 25, 2022 @ 10:32 am

Have you ever wanted to create a mini cart in WooCommerce? Well, it’s actually quite easy to do!

In this article, we’ll show you how to create a mini cart in WooCommerce, and style it using HTML tags.

First, you’ll need to create a new file in your child theme. You can name this file anything you want, but we’ll call it “mini-cart.php” for this example. Next, you’ll need to copy the following code into your new file:

<?php

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}

global $woocommerce;

$items_count = $woocommerce->cart->cart_contents_count;
?>
<a class="cart-contents" 
href="<?php echo WC()->cart->get_cart_url(); ?>" 
title="<?php _e( 'View your shopping cart' ); ?>">
<i class="fa fa-shopping-cart"></i>
 
<span class="cart-count">
<?php echo sprintf ( _n( '%d item', '%d items', $items_count ), 
$items_count ); ?></span>
 
<span class="cart-total">
<?php echo WC()->cart->get_cart_total(); ?></span>
</a>

This code will create a link that displays the number of items in the cart and the total cost. The link will open the mini cart window when clicked, allowing customers to view, edit, or remove items from their cart, or proceed to checkout.

Next, you’ll need to style your mini cart using HTML tags. You can customize the appearance of your mini cart by adding your own CSS styles to the “cart-contents” class. For example, you can change the color of the cart icon or the font size of the item count and total cost.

To apply your styles to the mini cart, you’ll need to add them to your theme’s stylesheet. To do this, go to the “Appearance” section of your WordPress dashboard and click on the “Editor” link. Find the “style.css” file in the right sidebar and click on it to open it. Then, paste your CSS styles into the file and click on the “Update File” button to save your changes.

PRO TIP: If you are not familiar with coding or website development, then creating a mini cart in WooCommerce may not be the best idea. This process requires knowledge of coding and can be quite difficult for those who are not familiar with it. It is always best to consult with a professional before attempting to do something like this.

Finally, you’ll need to add the mini cart to your website. To do this, go to the “Appearance” section of your WordPress dashboard and click on the “Widgets” link. Find the “Custom HTML” widget in the right sidebar and drag it to the sidebar or footer of your website where you want the mini cart to appear. Then, paste the code you copied from the “mini-cart.php” file into the widget and click on the “Save” button.

And that’s it! You now have a fully functional and stylish mini cart in WooCommerce. By following these steps, you can easily add a mini cart to your WooCommerce website and improve the user experience for your customers.

Madison Geldart

Madison Geldart

Cloud infrastructure engineer and tech mess solver.