{"id":26784,"date":"2024-01-29T20:27:08","date_gmt":"2024-01-29T20:27:08","guid":{"rendered":"https:\/\/ithemelandco.com\/?p=26784"},"modified":"2026-05-25T09:06:26","modified_gmt":"2026-05-25T09:06:26","slug":"add-woocommerce-mini-cart","status":"publish","type":"post","link":"https:\/\/ithemelandco.com\/blog\/add-woocommerce-mini-cart\/","title":{"rendered":"Add a WooCommerce Mini Cart in 4 Easy Ways"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A WooCommerce mini cart gives customers a quick view of the products they have added to their cart without forcing them to leave the shop page. This small feature can make the shopping process smoother because customers can review cart items, check totals, remove products, and continue browsing with less interruption.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For stores with many products, a better add-to-cart experience can directly affect how easily customers complete their orders. If shoppers have to move between the product page, cart page, and checkout page too often, the buying process may feel slow\u2014especially when they want to buy multiple items.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this tutorial, you\u2019ll learn how to add a WooCommerce mini cart to your store using<a href=\"https:\/\/ithemelandco.com\/plugins\/woocommerce-product-table-pro\/?utm_source=blog&amp;utm_content=woocommerce-mini-cart\" target=\"_blank\" rel=\"noreferrer noopener\"> TABLEiT &#8211; Product Table for WooCommerce<\/a>. We\u2019ll show you how to create a product table, add an Ajax mini cart, display the cart in header, inline, or sticky mode, and improve the WooCommerce shopping cart experience without coding.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How WooCommerce display mini carts can boost your sales?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine you&#8217;re shopping at an online store and your cart starts to fill up with all the things you can&#8217;t resist. At the same time, you don&#8217;t want to leave the shop page to check the items already added to your cart, this is exactly where the advantage of the WooCommerce mini cart widget comes in!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Woo mini cart is always ready to give you a quick and easy overview of everything you&#8217;ve added to your cart. It&#8217;s like a window into your shopping world, displaying all the fantastic items you&#8217;re just a click away from.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"text-decoration: underline\"><a href=\"https:\/\/baymard.com\/blog\/ecommerce-checkout-usability-report-and-benchmark\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">According to the Baymard Institute<\/a><\/span>, 18% of US online shoppers have abandoned their orders simply because of a &#8220;too long\/complicated checkout process&#8221;. Having a WooCommerce shopping cart in your online store is a great way to make the shopping process faster and easier and reduce cart abandonment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add mini cart WooCommerce can increase your sales for the following reasons:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Customers don&#8217;t have to go through multiple pages to view their shopping carts and place their orders.<\/li>\n\n\n\n<li>Improve user experience by allowing customers to add or remove products in their cart and purchase them from a single page.<\/li>\n\n\n\n<li>Customers can review and purchase multiple products added to their carts with one click.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to add WooCommerce mini cart to the shop page?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you would like a WooCommerce custom mini cart to be displayed on the shop page, you can provide this feature with the help of a mini cart plugin for WooCommerce. In addition to creating beautiful and eye-catching product tables with custom columns, the <span style=\"text-decoration: underline\"><a href=\"https:\/\/ithemelandco.com\/plugins\/woocommerce-product-table-pro\/?utm_source=blog&amp;utm_content=woocommerce-mini-cart\" target=\"_blank\" rel=\"noreferrer noopener\">WooCommerce product table plugin<\/a><\/span> allows you to add a WooCommerce mini cart in different modes.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Customers can directly review all products in their carts on the shop page and even remove items on the same page. This plugin gives you the functionality of Ajax mini cart, WooCommerce add mini cart in header, sticky mini cart for WooCommerce, and any custom WooCommerce mini cart that you need. The good news is that you don&#8217;t need to install any other plugin to display this feature on your shop page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the following, we review the steps of adding a WooCommerce mini cart with this plugin:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install the WooCommerce product table plugin<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The first step to use the WooCommerce product table plugin is to download and install it on your WordPress. After activation, navigate to the below address:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>WordPress Dashboard &gt; Product Table &gt; Add new table&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-add-new-table-section-2.png\"><img decoding=\"async\" width=\"150\" height=\"123\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-add-new-table-section-2.png\" alt=\"select add new table section in iT Product Table menu\" class=\"wp-image-26786\"\/><\/a><figcaption class=\"wp-element-caption\">Add new table in TABLEiT plugin<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">On this page, press <strong>Get Started <\/strong>to visit the main page of the plugin.<\/p>\n\n\n\n<div class=\"wp-block-columns alignwide are-vertically-aligned-center main-cta-cnt has-background is-layout-flex wp-container-core-columns-is-layout-8a83d729 wp-block-columns-is-layout-flex\" style=\"background-color:#3d67ff;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-5980c20d wp-block-group-is-layout-constrained\" style=\"padding-top:15px\">\n<p class=\"single-cta-heading has-white-color has-text-color has-link-color wp-elements-b497876dbe00d7a51b8cb487822eff09 wp-block-paragraph\" style=\"font-size:26px;font-style:normal;font-weight:800\">TABLEiT &#8211; Product Table for WooCommerce<\/p>\n\n\n\n<p class=\"single-cta-desc has-white-color has-text-color has-link-color wp-elements-d17aae8a9179b4710692c2f9ea772e02 wp-block-paragraph\" style=\"font-size:16px\">The easy way to add WooCommerce Mini Cart &amp; Checkout to your store<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button main-cta-button\"><a class=\"wp-block-button__link has-text-color has-background wp-element-button\" href=\"https:\/\/ithemelandco.com\/plugins\/woocommerce-product-table-pro\/?utm_source=blog&amp;utm_content=woocommerce-mini-cart\" style=\"border-style:none;border-width:0px;border-radius:40px;color:#ffffff;background-color:#0fba5e;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px;font-style:normal;font-weight:500\" target=\"_blank\" rel=\"noreferrer noopener\">Buy Plugin<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link has-white-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/advanced-product-table-for-woocommerce\/\" style=\"border-style:none;border-width:0px;border-radius:40px;color:#3d67ff;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px;font-style:normal;font-weight:500\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Free Version<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"532\" height=\"355\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2025\/10\/tableit-banner.png\" alt=\"TABLEiT - Product Table for WooCommerce plugin by ithemeland\" class=\"wp-image-48727\" style=\"width:440px;height:auto\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2025\/10\/tableit-banner.png 532w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2025\/10\/tableit-banner-500x335.png 500w\" sizes=\"(max-width: 532px) 100vw, 532px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Create your custom product table with WooCommerce mini cart<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The next step before displaying the Woo mini cart is to create your product table with custom columns, navigations, and style.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All tools and options you need for your product table customization are provided in the below tabs:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Query<\/strong>: You can set configurations to show some of your products in the table. For example, you can make a query for a specific category, tag, or attribute.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Columns<\/strong>: You can add as many columns and rows as you need in this tab and assign different elements to them.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-columns-tab-.jpg\"><img decoding=\"async\" width=\"1400\" height=\"610\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-columns-tab-.jpg\" alt=\"customize columns tab for WooCommerce table\" class=\"wp-image-37153\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-columns-tab-.jpg 1400w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-columns-tab--500x218.jpg 500w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><\/a><figcaption class=\"wp-element-caption\">Add table columns<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Navigations<\/strong>: The extra features like multi add to cart, WooCommerce mini cart in header, Filters, Search boxes, Sorting, etc. Are available in this tab and you add them to your product table based on your needs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Style<\/strong>: In this tab, some preset templates are provided to let you easily customize the appearance of your product table with one click.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, we tried to add the following columns to the product table:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, we tried to add the following columns to the product table:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Check box<\/li>\n\n\n\n<li>Product image<\/li>\n\n\n\n<li>Title<\/li>\n\n\n\n<li>Description&nbsp;<\/li>\n\n\n\n<li>Price<\/li>\n\n\n\n<li>Quantity<\/li>\n\n\n\n<li>Add to cart button<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-product-table.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1166\" height=\"565\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-product-table.png\" alt=\"result WooCommerce product table\" class=\"wp-image-26789\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-product-table.png 1166w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-product-table-500x242.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-product-table-1000x485.png 1000w\" sizes=\"(max-width: 1166px) 100vw, 1166px\" \/><\/a><figcaption class=\"wp-element-caption\">product table example<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let\u2019s see how we can add a WooCommerce mini cart widget to the product table.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add a mini cart for WooCommerce<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To add a mini cart for WooCommerce, you need to open the <strong>Navigation<\/strong> tab. As illustrated below, three areas are available here:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Header<\/li>\n\n\n\n<li>Footer<\/li>\n\n\n\n<li>sidebar<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In the following, we review how to add a WooCommerce mini cart in header. However, you can try these steps for the Footer or Sidebar if you need them.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/add-mini-cart-in-header.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1499\" height=\"622\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/add-mini-cart-in-header.jpg\" alt=\"add mini cart in table header\" class=\"wp-image-37155\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/add-mini-cart-in-header.jpg 1499w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/add-mini-cart-in-header-500x207.jpg 500w\" sizes=\"(max-width: 1499px) 100vw, 1499px\" \/><\/a><figcaption class=\"wp-element-caption\">Go to navigation tab<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Add WooCommerce ajax mini cart in the header<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Follow the below steps to add a WooCommerce Ajax mini cart:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on <strong>Add element<\/strong> of <strong>Header<\/strong> to see the list of elements in the left panel.<\/li>\n\n\n\n<li>Choose the <strong>Mini cart<\/strong> from the list.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/add-ajax-mini-cart-in-header.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1872\" height=\"716\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/add-ajax-mini-cart-in-header.png\" alt=\"add ajax mini cart in table header\" class=\"wp-image-26791\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/add-ajax-mini-cart-in-header.png 1872w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/add-ajax-mini-cart-in-header-500x191.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/add-ajax-mini-cart-in-header-1536x587.png 1536w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/add-ajax-mini-cart-in-header-1000x382.png 1000w\" sizes=\"(max-width: 1872px) 100vw, 1872px\" \/><\/a><figcaption class=\"wp-element-caption\">add mini cart element in header<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the <strong>Type<\/strong> dropdown list and select <strong>Default.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-default-type.png\"><img loading=\"lazy\" decoding=\"async\" width=\"288\" height=\"140\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-default-type.png\" alt=\"select default type in general tab\" class=\"wp-image-26792\"\/><\/a><figcaption class=\"wp-element-caption\">Select the cart type<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the combo box of the <strong>Link<\/strong> field and set WooCommerce mini cart Ajax to one of the options including:<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cart<\/li>\n\n\n\n<li>Checkout<\/li>\n\n\n\n<li>Custom URL<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-link-to-cart.png\"><img loading=\"lazy\" decoding=\"async\" width=\"297\" height=\"649\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-link-to-cart.png\" alt=\"select link to cart in general tab\" class=\"wp-image-26793\"\/><\/a><figcaption class=\"wp-element-caption\">link element to cart<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It is also possible to set other configurations in the <strong>General<\/strong> tab like <strong>enable\/disable toggle<\/strong>, <strong>Bottom<\/strong> <strong>offset<\/strong>, <strong>width<\/strong>, etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also customize the Ajax mini cart appearance in the <strong>Style<\/strong> tab.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The final result is like the below in the product table:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-floating-sticky-mini-cart.png\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"612\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-floating-sticky-mini-cart.png\" alt=\"result WooCommerce floating sticky mini cart\" class=\"wp-image-26794\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-floating-sticky-mini-cart.png 617w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-floating-sticky-mini-cart-500x496.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-floating-sticky-mini-cart-100x100.png 100w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-floating-sticky-mini-cart-150x150.png 150w\" sizes=\"(max-width: 617px) 100vw, 617px\" \/><\/a><figcaption class=\"wp-element-caption\">Mini-cart in product table result<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">WooCommerce display mini cart in inline mode<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to display the mini cart as a wide box in the Header or Footer of your product table, follow the below instructions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a mini cart element to the header or footer.<\/li>\n\n\n\n<li>In the <strong>General<\/strong> tab, set <strong>Type<\/strong> to the <strong>Inline mode.<\/strong><\/li>\n\n\n\n<li>Set other items to customize which information is displayed to the customers in the Mini cart, including:\n<ul class=\"wp-block-list\">\n<li>Subtotal&nbsp;<\/li>\n\n\n\n<li>Empty cart button&nbsp;<\/li>\n\n\n\n<li>View checkout button<\/li>\n\n\n\n<li>View Cart Button&nbsp;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-inline-mode-type.png\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"452\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-inline-mode-type.png\" alt=\"select inline mode type in general tab\" class=\"wp-image-26795\"\/><\/a><figcaption class=\"wp-element-caption\">Set cart as inline mode<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you enable all items, the mini cart in the inline mode will be displayed like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-mini-cart-in-header.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1445\" height=\"577\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-mini-cart-in-header.png\" alt=\"result add WooCommerce mini cart in header in general tab\" class=\"wp-image-26796\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-mini-cart-in-header.png 1445w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-mini-cart-in-header-500x200.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-mini-cart-in-header-1000x399.png 1000w\" sizes=\"(max-width: 1445px) 100vw, 1445px\" \/><\/a><figcaption class=\"wp-element-caption\">Mini-cart inline type<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also customize the mini cart appearance in the <strong>Style<\/strong> tab.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Sticky mini cart for WooCommerce<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Add a sticky mini cart for the WooCommerce shop page is very popular in e-commerce websites. In the mini cart WooCommerce plugin, you can set one of the below modes to show a sticky mini cart in the product table:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Float side<\/li>\n\n\n\n<li>Float toggle&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s review the custom mini cart you can set in the table by choosing each mode, briefly:&nbsp;<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Sticky mini cart for WooCommerce as float side<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">By choosing <strong>Float Side<\/strong> in the <strong>Type<\/strong> field of the Mini Cart <strong>General<\/strong> tab, some extra options are displayed like Title, Position, Button Size, etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can change these options to customize which information is displayed to the customers in the sticky mini cart as well as where and how to show it on your table.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-float-side-type.png\"><img loading=\"lazy\" decoding=\"async\" width=\"289\" height=\"744\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-float-side-type.png\" alt=\"select float side type in general tab\" class=\"wp-image-26797\"\/><\/a><figcaption class=\"wp-element-caption\">Set type as float side<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For example, we set the position of the sticky mini cart to the button right of the table and wrote <strong>Open Cart<\/strong> in the <strong>Button<\/strong> <strong>Text<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-button-text-field.png\"><img loading=\"lazy\" decoding=\"async\" width=\"289\" height=\"666\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-button-text-field.png\" alt=\"select button text field in general tab\" class=\"wp-image-26798\" style=\"width:289px;height:auto\"\/><\/a><figcaption class=\"wp-element-caption\">Write the open cart button text<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">So, the sticky mini cart is displayed like below to the customers:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-floating-sticky-mini-cart-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"612\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-floating-sticky-mini-cart-1.png\" alt=\"result WooCommerce floating side mini cart\" class=\"wp-image-26799\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-floating-sticky-mini-cart-1.png 617w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-floating-sticky-mini-cart-1-500x496.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-floating-sticky-mini-cart-1-100x100.png 100w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-floating-sticky-mini-cart-1-150x150.png 150w\" sizes=\"(max-width: 617px) 100vw, 617px\" \/><\/a><figcaption class=\"wp-element-caption\">Stocky float cart<\/figcaption><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Sticky mini cart for WooCommerce as float toggle<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>The float toggle<\/strong> option allows customers to see a pop-up in the WooCommerce mini cart on hover. You can customize the items displayed to the customers in the <strong>General<\/strong> tab.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, you can enable Show Total, Subtotal, View Checkout button, View Empty button, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-float-toggle-type.png\"><img loading=\"lazy\" decoding=\"async\" width=\"291\" height=\"789\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-float-toggle-type.png\" alt=\"select float toggle type in general tab\" class=\"wp-image-26800\"\/><\/a><figcaption class=\"wp-element-caption\">Set cart type as float toggle<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">WooCommerce mini cart customization<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In the WooCommerce product table plugin, you have full control over tweaking the style of custom mini cart WooCommerce. To customize the Woo mini cart, simply click on the <strong>Style<\/strong> tab and choose <strong>Mini cart<\/strong> from the list:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-mini-cart-in-style-tab-.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1018\" height=\"446\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-mini-cart-in-style-tab-.png\" alt=\"select mini cart in style tab \" class=\"wp-image-26803\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-mini-cart-in-style-tab-.png 1018w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-mini-cart-in-style-tab--500x219.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-mini-cart-in-style-tab--1000x438.png 1000w\" sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><\/a><figcaption class=\"wp-element-caption\">Customize mini cart style<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In the <strong>Mini cart Style<\/strong>, three options are available:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>General&nbsp;<\/li>\n\n\n\n<li>Button&nbsp;<\/li>\n\n\n\n<li>Area<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-mini-cart-style-section.png\"><img loading=\"lazy\" decoding=\"async\" width=\"449\" height=\"294\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-mini-cart-style-section.png\" alt=\"customize mini cart style section in WooCommerce table plugin\" class=\"wp-image-26804\"\/><\/a><figcaption class=\"wp-element-caption\">Mini cart style options<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click on each tab, to see the items you can set to make the style of mini cart exactly as you need.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s review some items in each tab.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">General<em>&nbsp;<\/em><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The items available in the <strong>General<\/strong> tab allow you to customize the font of the mini cart by size, type, weight, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-general-section.png\"><img loading=\"lazy\" decoding=\"async\" width=\"605\" height=\"651\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-general-section.png\" alt=\"customize general section in WooCommerce table plugin\" class=\"wp-image-26805\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-general-section.png 605w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-general-section-500x538.png 500w\" sizes=\"(max-width: 605px) 100vw, 605px\" \/><\/a><figcaption class=\"wp-element-caption\">Mini cart general style tab<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Button<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In the button section, you can set configurations for background, text color, and font size of subtotal as well as Text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-style-button.png\"><img loading=\"lazy\" decoding=\"async\" width=\"438\" height=\"326\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-style-button.png\" alt=\"customize style button in button section\" class=\"wp-image-26806\"\/><\/a><figcaption class=\"wp-element-caption\">Button style tab <\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For example, we have chosen a Yellow background with black text and the style of the mini cart changed like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-mini-cart-style.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1199\" height=\"527\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-mini-cart-style.png\" alt=\"result mini cart style in WooCommerce table\" class=\"wp-image-26807\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-mini-cart-style.png 1199w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-mini-cart-style-500x220.png 500w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/result-mini-cart-style-1000x440.png 1000w\" sizes=\"(max-width: 1199px) 100vw, 1199px\" \/><\/a><figcaption class=\"wp-element-caption\">Cart button style result<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Area<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Tweaking the items included in the Area tab is used for changing the style of the area background, close button color, product title color, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-area-section.png\"><img loading=\"lazy\" decoding=\"async\" width=\"536\" height=\"648\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-area-section.png\" alt=\"customize area section in WooCommerce table plugin\" class=\"wp-image-26808\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-area-section.png 536w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/customize-area-section-500x604.png 500w\" sizes=\"(max-width: 536px) 100vw, 536px\" \/><\/a><figcaption class=\"wp-element-caption\">Mini cart area style<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also change the WooCommerce mini cart on hover style by configuring the button hover background, color, and other items as illustrated below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-background-button.png\"><img loading=\"lazy\" decoding=\"async\" width=\"445\" height=\"230\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/select-background-button.png\" alt=\"select background color button in button section\" class=\"wp-image-26809\"\/><\/a><figcaption class=\"wp-element-caption\">Change hover color<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to get the WooCommerce product table plugin?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now, you learn how to use the WooCommerce product table plugin to make the purchase process easier and faster for your customers.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WooCommerce product table is the best solution for creating and customizing product tables with customer-friendly options like add to cart button, sticky mini cart, filtering, pagination, etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It has an easy-to-use interface allowing you to convert the entire appearance of a WooCommerce shop page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Other advantages of using this plugin are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>No coding skills are required.<\/li>\n\n\n\n<li>Simplifying the purchase process for the customer.<\/li>\n\n\n\n<li>Boosting sales and increasing conversion rates.<\/li>\n\n\n\n<li>Fully flexible to make responsive product tables.<\/li>\n\n\n\n<li>Affordable pricing plans.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns alignwide are-vertically-aligned-center main-cta-cnt has-background is-layout-flex wp-container-core-columns-is-layout-8a83d729 wp-block-columns-is-layout-flex\" style=\"background-color:#3d67ff;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-5980c20d wp-block-group-is-layout-constrained\" style=\"padding-top:15px\">\n<p class=\"single-cta-heading has-white-color has-text-color has-link-color wp-elements-b497876dbe00d7a51b8cb487822eff09 wp-block-paragraph\" style=\"font-size:26px;font-style:normal;font-weight:800\">TABLEiT &#8211; Product Table for WooCommerce<\/p>\n\n\n\n<p class=\"single-cta-desc has-white-color has-text-color has-link-color wp-elements-d17aae8a9179b4710692c2f9ea772e02 wp-block-paragraph\" style=\"font-size:16px\">The easy way to add WooCommerce Mini Cart &amp; Checkout to your store<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button main-cta-button\"><a class=\"wp-block-button__link has-text-color has-background wp-element-button\" href=\"https:\/\/ithemelandco.com\/plugins\/woocommerce-product-table-pro\/?utm_source=blog&amp;utm_content=woocommerce-mini-cart\" style=\"border-style:none;border-width:0px;border-radius:40px;color:#ffffff;background-color:#0fba5e;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px;font-style:normal;font-weight:500\" target=\"_blank\" rel=\"noreferrer noopener\">Buy Plugin<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--2\"><a class=\"wp-block-button__link has-white-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/advanced-product-table-for-woocommerce\/\" style=\"border-style:none;border-width:0px;border-radius:40px;color:#3d67ff;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px;font-style:normal;font-weight:500\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Free Version<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"532\" height=\"355\" src=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2025\/10\/tableit-banner.png\" alt=\"TABLEiT - Product Table for WooCommerce plugin by ithemeland\" class=\"wp-image-48727\" style=\"width:440px;height:auto\" srcset=\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2025\/10\/tableit-banner.png 532w, https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2025\/10\/tableit-banner-500x335.png 500w\" sizes=\"(max-width: 532px) 100vw, 532px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Adding a WooCommerce mini cart is a simple way to make the shopping experience faster, clearer, and more user-friendly. Instead of sending customers away from the shop page every time they want to review their cart, you can let them check selected products, view totals, remove items, and continue shopping from the same page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The default WooCommerce cart flow can work for basic stores, but it may feel limited when customers need to add multiple products, compare items, or place orders quickly. A mini cart becomes especially useful for product table layouts, wholesale stores, food ordering websites, product catalogs, and stores where customers often buy several items in one order.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With <a href=\"https:\/\/ithemelandco.com\/plugins\/woocommerce-product-table-pro\/?utm_source=blog&amp;utm_content=woocommerce-mini-cart\" target=\"_blank\" rel=\"noreferrer noopener\">TABLEiT &#8211; Product Table for WooCommerce<\/a>, you can add Ajax, inline, floating, or sticky mini cart options to your product table and customize how the cart appears for customers. This helps create a smoother WooCommerce add-to-cart experience and can reduce friction before checkout.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column blog-faq-section is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">FAQ<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">1. What is a WooCommerce mini cart?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A WooCommerce mini cart is a small cart section or widget that shows customers a quick summary of the products they have added to their cart. It can display cart items, quantity, subtotal, checkout button, and remove options.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. Why should I add a mini cart to WooCommerce?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A mini cart helps customers review their cart without leaving the current page. This improves the shopping flow, reduces extra clicks, and makes it easier for customers to continue browsing or move to checkout.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. What is the difference between a mini cart and the WooCommerce cart page?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The cart page is a full page where customers review their order before checkout. A mini cart is a compact cart preview that appears on the shop page, header, sidebar, popup, or product table area.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">4. Can I add an Ajax mini cart in WooCommerce?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. An Ajax mini cart updates cart information without reloading the page. With <strong>TABLEiT <\/strong>plugin, you can add an Ajax mini cart to a product table and make the cart experience smoother for customers.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">5. Can I show a sticky mini cart in WooCommerce?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. A sticky mini cart stays visible while customers browse the page. This is useful for stores where shoppers add several products to the cart and need quick access to cart details.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">6. Is a WooCommerce mini cart useful for product tables?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. A mini cart works very well with product tables because customers can add products from the table and immediately review their cart from the same page. This is useful for wholesale stores, food ordering, spare parts, and large catalogs.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">7. Can customers remove items from the mini cart?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. A well-designed mini cart can let customers remove products, review the subtotal, and go to the cart or checkout page. This makes the buying process easier and more transparent.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">8. Do I need coding to add a WooCommerce mini cart?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">No. You can add a WooCommerce mini cart without coding by using TABLEiT. It lets you add mini cart elements to your product table and customize the display from the plugin settings.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A WooCommerce mini cart gives customers a quick view of the products they have added to their cart without forcing them to leave the shop page. This small feature can make the shopping process smoother because customers can review cart items, check totals, remove products, and continue browsing with less interruption. For stores with many [&hellip;]<\/p>\n","protected":false},"author":1990,"featured_media":26811,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50,73],"tags":[],"class_list":["post-26784","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-woocommerce"],"featured_image_url":"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2024\/01\/add-mini-cart-checkout-500x335.jpg","excerpt_plain":"A WooCommerce mini cart gives customers a quick view of the products they have added to their cart without forcing them to leave the shop page. This small feature can make the shopping process smoother because customers can review cart items, check totals, remove products, and continue browsing with less interruption. For stores with many [&hellip;]","_embedded":{"wp:term":[[{"term_id":50,"name":"Tutorials","slug":"tutorials","term_group":0,"term_taxonomy_id":50,"taxonomy":"category","description":"Follow and learn the latest educational articles about WordPress plugins and WooCommerce here","parent":0,"count":256,"filter":"raw"},{"term_id":73,"name":"WooCommerce","slug":"woocommerce","term_group":0,"term_taxonomy_id":73,"taxonomy":"category","description":"Do you use WooCommerce to manage your online store? We suggest you read this category of WooCommerce articles.","parent":50,"count":205,"filter":"raw"}]]},"_links":{"self":[{"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/posts\/26784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/users\/1990"}],"replies":[{"embeddable":true,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/comments?post=26784"}],"version-history":[{"count":2,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/posts\/26784\/revisions"}],"predecessor-version":[{"id":51222,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/posts\/26784\/revisions\/51222"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/media\/26811"}],"wp:attachment":[{"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/media?parent=26784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/categories?post=26784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/tags?post=26784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}