{"id":26784,"date":"2024-01-29T20:27:08","date_gmt":"2024-01-29T20:27:08","guid":{"rendered":"https:\/\/ithemelandco.com\/?p=26784"},"modified":"2025-10-16T11:25:54","modified_gmt":"2025-10-16T11:25:54","slug":"add-woocommerce-mini-cart","status":"publish","type":"post","link":"https:\/\/ithemelandco.com\/blog\/add-woocommerce-mini-cart\/","title":{"rendered":"How to Add WooCommerce Mini Cart &amp; Checkout to your Store"},"content":{"rendered":"\n<p>Online shopping has never been more popular than now, so e-commerce website managers are constantly looking for practical ways to enhance their customers&#8217; shopping experience. One of the most essential features in any online store for improving customer experience is to add WooCommerce Mini Cart &amp; Checkout to the shop page.<\/p>\n\n\n\n<p>WooCommerce Mini Cart is a small shopping cart icon that gives customers a quick and easy overview of their shopping cart contents without having to leave the shop page. If you use WooCommerce to create an online store for your business, you&#8217;re lucky! Because for this platform, you can use the WooCommerce mini cart plugin, which offers you unique customization options for displaying this useful feature to your customers.<\/p>\n\n\n\n<p>In this post, we want to show you how to use the WooCommerce product table plugin to add a WooCommerce custom mini cart to your online shop.<\/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>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>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><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>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>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>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>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>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><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><\/figure>\n\n\n\n<p>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-4a33225c 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-4f39da6d 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\" 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\" 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>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>All tools and options you need for your product table customization are provided in the below tabs:<\/p>\n\n\n\n<p><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><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><\/figure>\n\n\n\n<p><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><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>For example, we tried to add the following columns to the product table:<\/p>\n\n\n\n<p>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><\/figure>\n\n\n\n<p>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>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>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><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Add WooCommerce ajax mini cart in the header<\/h4>\n\n\n\n<p>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><\/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><\/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><\/figure>\n\n\n\n<p>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>You can also customize the Ajax mini cart appearance in the <strong>Style<\/strong> tab.<\/p>\n\n\n\n<p>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><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">WooCommerce display mini cart in inline mode<\/h4>\n\n\n\n<p>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><\/figure>\n\n\n\n<p>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><\/figure>\n\n\n\n<p>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>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>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>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>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><\/figure>\n\n\n\n<p>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\"><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\" \/><\/a><\/figure>\n\n\n\n<p>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><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Sticky mini cart for WooCommerce as float toggle<\/h5>\n\n\n\n<p><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>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><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">WooCommerce mini cart customization<\/h4>\n\n\n\n<p>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><\/figure>\n\n\n\n<p>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><\/figure>\n\n\n\n<p>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>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>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><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Button<\/h4>\n\n\n\n<p>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><\/figure>\n\n\n\n<p>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><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Area<\/h4>\n\n\n\n<p>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><\/figure>\n\n\n\n<p>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><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to get the WooCommerce product table plugin?<\/h2>\n\n\n\n<p>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>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>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>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-4a33225c 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-4f39da6d 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\" 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\" 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>In this post, you learned how to use the WooCommerce product table plugin to add mini cart to the WooCommerce shop page and make the purchase process easier and faster for your customers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Online shopping has never been more popular than now, so e-commerce website managers are constantly looking for practical ways to enhance their customers&#8217; shopping experience. One of the most essential features in any online store for improving customer experience is to add WooCommerce Mini Cart &amp; Checkout to the shop page. WooCommerce Mini Cart is [&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":"Online shopping has never been more popular than now, so e-commerce website managers are constantly looking for practical ways to enhance their customers&#8217; shopping experience. One of the most essential features in any online store for improving customer experience is to add WooCommerce Mini Cart &amp; Checkout to the shop page. WooCommerce Mini Cart is [&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":1,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/posts\/26784\/revisions"}],"predecessor-version":[{"id":48941,"href":"https:\/\/ithemelandco.com\/blog\/wp-json\/wp\/v2\/posts\/26784\/revisions\/48941"}],"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}]}}