The mini cart for WooCommerce offers immediate access to cart details. It enhances the user’s interaction with your store. By using the mini cart shortcode, you can display a mini cart anywhere on your website. This includes a cart fly-out for a detailed view of cart items and totals. It gives users a seamless shopping experience.
With conventional checkout processes, the cart is often hidden, causing confusion among users about their selected products. The mini cart for WooCommerce solves this issue by providing complete cart details, allowing customers to continue shopping or checkout whenever they’re ready.
<h2>Features</h2>
<ul>
<li style="font-weight: 400">Easily add a flyout cart to any page.</li>
<li style="font-weight: 400">Use shortcodes to display a mini cart anywhere on your site.</li>
<li style="font-weight: 400">Customize with 13 different Cart-like icons.</li>
<li style="font-weight: 400">Choose between a sticky cart or a side cart.</li>
<li style="font-weight: 400">Upload a custom cart icon.</li>
<li style="font-weight: 400">Enable the sliding cart for better UX.</li>
<li style="font-weight: 400">Enable/Disable tax display in cart prices.</li>
<li style="font-weight: 400">Display cart items and prices with an icon.</li>
<li style="font-weight: 400">Add a cart icon to multiple page positions.</li>
<li style="font-weight: 400">Disable the cart on specific pages.</li>
<li style="font-weight: 400">Engage users with a fly-out cart animation and optional added notifications.</li>
</ul>
<h3>Display Mini Cart Anywhere</h3>
The mini cart for WooCommerce plugin allows you to display the cart anywhere in the store, even in the menu. With the mini cart shortcode, you can position the mini cart on multiple pages, including the header, footer, or sidebar, ensuring it remains visible and accessible to users.
<img class="aligncenter wp-image-18734002735161 size-medium" src="https://woocommerce.com/wp-content/uploads/2023/01/Mini-Cart.png?w=851" alt="Mini cart in store" width="851" height="875" />
<h3>Display a Sticky Cart on WooCommerce Store</h3>
Enable the sticky cart for WooCommerce to display all products in the cart. Users can increase the quantity of products or remove them using a dropdown button. Customize the sticky cart with the following options:
<ul>
<li style="font-weight: 400">Enable the add to cart button.</li>
<li style="font-weight: 400">Allow checkout from the sticky cart.</li>
<li style="font-weight: 400">Change the text, buttons, and background color of the cart.</li>
</ul>
<img class="aligncenter wp-image-18734001706706 size-full" src="https://woocommerce.com/wp-content/uploads/2023/01/Sticky-Cart-GIF.gif" alt="Display Sticky Cart" width="600" height="338" />
<h3>Auto Display Side Cart when Product is added</h3>
Improve the purchase flow with the side cart for WooCommerce, which automatically appears when a product is added. Customize it with features such as:
<ul>
<li style="font-weight: 400">Fly-to-cart animation.</li>
<li style="font-weight: 400">Automated display.</li>
<li style="font-weight: 400">Rounded corners.</li>
<li style="font-weight: 400">Coupon code redemption in the side cart.</li>
<li style="font-weight: 400">Display on the left or right side of the screen.</li>
<li style="font-weight: 400">Customizable header text, icons, colors, etc.</li>
</ul>
<img class="aligncenter wp-image-18734001706709 size-full" src="https://woocommerce.com/wp-content/uploads/2023/01/Side-Cart-GIF.gif" alt="Side cart auto display" width="600" height="338" />
 
<h3>Enable Add-to-Cart notifications</h3>
Notify customers with a cart widget every time they add a product to the cart. This feature ensures users can continue shopping without worrying about whether the product has been added. Customize the notification text and background colors to match your store’s theme.
<img class="aligncenter wp-image-18734000968724 size-medium" src="https://woocommerce.com/wp-content/uploads/2019/08/1.gif?w=690" alt="Add to cart notification" width="690" height="388" />
<h3>Maximize sales volume with a fly-out Cart</h3>
The mini cart for WooCommerce allows you to enable a floating cart that highlights cart details when hovered over. You can choose the number of items to display in the fly-out cart and set shorter product names for a concise view.
<img class="aligncenter wp-image-18734002735400 size-medium" src="https://woocommerce.com/wp-content/uploads/2023/01/Flyout-cart-for-Mini-Cart.gif?w=600" alt="Fly-out cart with details" width="600" height="310" />
<h3>13 Different Icons to Symbolize Mini Cart</h3>
Make your mini cart more attractive with 13 icons to choose from. The menu cart for WooCommerce also allows you to upload a custom icon, adding a unique touch to your store.
<img class="aligncenter wp-image-5273973 size-full" src="https://woocommerce.com/wp-content/uploads/2019/08/default-icons-or-custom.png" alt="Cart and custom icons." width="750" height="248" />
<h3>Configure the Cart menu</h3>
The menu cart plugin for WooCommerce provides various configuration options for the cart menu, allowing you to display products, quantities, prices, and the total amount in the cart menu. Options include:
<ul>
<li style="font-weight: 400">Displaying the cart icon.</li>
<li style="font-weight: 400">Showing the cart icon, products, and prices.</li>
<li style="font-weight: 400">Displaying items and prices.</li>
</ul>
<img class="aligncenter wp-image-18734002742085 size-medium" src="https://woocommerce.com/wp-content/uploads/2023/01/Configure-Cart-Menu.png?w=896" alt="Cart menu configuration bar" width="896" height="95" />
<h3>Change the Cart texts and links</h3>
Personalize your side cart by customizing the text and links. Add text for ‘Empty Cart’ and ‘View Cart’ to make the shopping experience more intuitive and engaging. You can also specify Cart and Checkout URLs.
<img class="aligncenter wp-image-5273982 size-full" src="https://woocommerce.com/wp-content/uploads/2019/08/text-links.png" alt="Cart texts and links tab" width="750" height="496" />

Mini Cart

By displaying real-time updates in both the mini cart and the side cart, users can confidently continue shopping, leading to higher conversion rates and a reduced likelihood of cart abandonment.

<ul class="wccom-tick-list-primary">
<li>Comprehensive Control: With the Custom Checkout Fields Editor, WooCommerce admins have complete flexibility over the checkout page, allowing them to customize every aspect of the user’s experience. 💼</li>
<li>Gather More Data: By customizing fields, you can gather important customer information that can help you tailor your services and optimize marketing efforts. 📊</li>
<li>Boost Customer Experience: Enhanced checkout options make the process smoother for customers, helping reduce cart abandonment and improve satisfaction. 🔄</li>
<li>Enhance Customer Choices: Add flexible options, from custom pricing to additional services, and give customers more control over their checkout. 🎯</li>
</ul>
<hr />
<div class="woo-sc-box normal">Custom Checkout Fields Editor is compatible with the Cart and Checkout Blocks.</div>
The Custom Checkout Fields Editor WooCommerce extension enables store owners to take full control of their checkout pages. Whether you want to collect extra information, create custom sections, or apply conditional logic to your fields, this custom checkout extension allows you to customize the checkout experience easily.
Add, edit, delete, or rearrange default billing and shipping fields, or create entirely new sections and fields—all designed to streamline the checkout process and offer more choices to your customers. 💡
<h2>Key Features of Custom Checkout Fields Editor for WooCommerce ⭐</h2>
<h3>Add New Sections to Checkout 📄</h3>
<img class="size-full wp-image-18734004300069 aligncenter" src="https://woocommerce.com/wp-content/uploads/2024/10/add_new_sections_to_checkout_contentbanner_1_2x.webp" alt="add_new_sections_to_checkout" width="980" height="602" />
The Custom Checkout Fields Editor allows admins to introduce new sections to the checkout page. When you click to add new section, a configuration popup will appear, giving you access to the following tabs for detailed customization:
<img class="size-full wp-image-18734004309024 aligncenter" src="https://woocommerce.com/wp-content/uploads/2024/10/configure_custom_sections_contentbanner_2_2x.webp" alt="Custom Checkout Add New Section" width="980" height="602" />
<ul>
<li>Basic Details: Set the section name and description.</li>
<li>Style Settings: Customize the look and feel of the section.</li>
<li>Display Condition: Determine if and when this section should appear on the checkout page based on predefined conditions.</li>
</ul>
<h3>Add Custom Fields 🛠️</h3>
You can add a wide variety of fields to your checkout page. When adding a new field, the admin has four configuration tabs to define how the field operates:
<img class="size-full wp-image-18734004309034 aligncenter" src="https://woocommerce.com/wp-content/uploads/2024/10/add_custom_fields_contentbanner_3_2x.webp" alt="Add Custom Fields Feature" width="980" height="602" />
<ul>
<li>Field Info: This tab allows you to specify the name, title, field type, description, and placeholder and even set minimum and maximum character lengths for each field. There are 21 available field types:</li>
</ul>
<img class="size-full wp-image-18734004309048 aligncenter" src="https://woocommerce.com/wp-content/uploads/2024/10/20_custom_field_types_contentbanner_4_2x.webp" alt="Custom Checkout Field Info Section" width="980" height="602" />
<ol>
<li>TextField: For general text input.</li>
<li>Password: For users to input sensitive information.</li>
<li>Phone: To capture phone numbers.</li>
<li>Email: To capture valid email addresses.</li>
<li>Textarea: For larger text input fields.</li>
<li>Number: To capture numeric data.</li>
<li>Select: Dropdown field for single selection.</li>
<li>Multiselect: Allows users to select multiple options from a list.</li>
<li>Checkbox Group: A group of checkboxes where users can select multiple options.</li>
<li>Radio: Radio button group is used to select one option from several.</li>
<li>Datetime Picker: Select both date and time.</li>
<li>Date Picker: Date selection only.</li>
<li>Time Picker: Time selection only.</li>
<li>Month Picker: Select a specific month.</li>
<li>Week Picker: Select a specific week.</li>
<li>Country: Dropdown selector for country selection.</li>
<li>State: Dropdown selector for state selection.</li>
<li>File Upload: Allow users to upload files directly on the checkout page.</li>
<li>Heading: Add a heading (H1, H2, etc.) to your form.</li>
<li>Paragraph: Display text content on the checkout page.</li>
<li>Label: Add field labels on the checkout page.</li>
</ol>
<ul>
<li>Style Settings: Adjust the field’s appearance to match your store’s design and user experience requirements.</li>
</ul>
<img class="size-full wp-image-18734004309065 aligncenter" src="https://woocommerce.com/wp-content/uploads/2024/10/custom_field_style_settings_contentbanner_5_2x.webp" alt="Custom Checkout Style Settings Section" width="980" height="602" />
<ul>
<li>Pricing: This tab allows you to associate additional pricing with fields, adding fixed or percentage-based charges that are calculated into the final subtotal.</li>
</ul>
<img class="size-full wp-image-18734004309067 aligncenter" src="https://woocommerce.com/wp-content/uploads/2024/10/custom_field_pricing_settings_contentbanner_6_2x.webp" alt="Custom Checkout Pricing Section" width="980" height="602" />
<ul>
<li>Display Condition: Admins can set conditions for when a field should be displayed. Conditions can be based on either:</li>
</ul>
<img class="wp-image-18734004309074 size-full aligncenter" src="https://woocommerce.com/wp-content/uploads/2024/10/custom_fields_display_condition_contentbanner_7_2x.webp" alt="Manage Custom Fields Efficiently Feature" width="1792" height="1100" />
<ul>
<li>Cart Condition: Display field depending on items in the cart.</li>
<li>Checkout Condition: Show field based on data entered during checkout.</li>
</ul>
<h3 style="font-size: 20px">Manage Custom Fields Efficiently 📂</h3>
<img class="wp-image-18734004308993 size-full aligncenter" src="https://woocommerce.com/wp-content/uploads/2024/10/view_manage_all_custom_fields_contentbanner_8_2x.webp" alt="Manage Custom Fields Efficiently Feature" width="1792" height="1100" />
Once custom fields are created, you can view and manage all custom fields through the extension’s interface. This makes reviewing, editing, or removing any field from the checkout process easy, ensuring the page stays well-organized and functional.
<h3 style="font-size: 20px">Customize Billing Fields 💳</h3>
<img class="aligncenter wp-image-18734004308955 size-full" style="letter-spacing: -0.176px" src="https://woocommerce.com/wp-content/uploads/2024/10/customize_billing_fields_contentbanner_9_2x.webp" alt="Customize Billing Fields Feature" width="980" height="602" />
Add or modify custom fields directly within the Billing section of the checkout page, allowing you to capture all the information you need to process orders effectively.
<h3>Customize Shipping Fields 🚚</h3>
<img class="size-full wp-image-18734004308967 aligncenter" src="https://woocommerce.com/wp-content/uploads/2024/10/customize_shipping_fields_contentbanner_10_2x.webp" alt="Customize Shipping Fields Feature" width="980" height="602" />
Modify or add custom fields to the Shipping section of the checkout page. Perfect for collecting additional delivery-related information from your customers.
<h3 style="font-size: 20px">Additional Fields Section 🛍️</h3>
<img class="wp-image-18734004388117 size-full aligncenter" src="https://woocommerce.com/wp-content/uploads/2024/10/additional_fields_section_contentbanner_11_2x_c2222e.webp" alt="Additional Fields Section Feature" width="1792" height="1100" />
Admins can also add custom fields to the Additional Fields section of the checkout page, creating further opportunities to gather relevant customer data or offer extra services.
<h2 style="font-size: 26px">How to Get Started 📝</h2>
<ul>
<li>Buy Custom Checkout Fields Editor for WooCommerce.</li>
<li>Download and install the extension. You can find the installation guide <a href="https://woocommerce.com/document/custom-checkout-fields-editor/#section-3">here</a>.</li>
<li>Activate, set up, and configure the extension.</li>
</ul>
Read the <a href="https://woocommerce.com/document/custom-checkout-fields-editor/">technical documentation</a> to help you walk through the process of setting up Custom Checkout Fields Editor for WooCommerce.
<h3 style="text-align: center">Ready to Enhance Your Checkout Process? 🎉</h3>
Take full control of your WooCommerce checkout page with the Custom Checkout Fields Editor plugin. Whether you need to collect extra information, charge additional fees, or create a seamless, branded checkout experience, this plugin is the all-in-one solution for WooCommerce store owners looking to optimize their checkout process. 🚀

Custom Checkout Fields Editor

Take full control of your WooCommerce checkout page with Custom Checkout Fields Editor. Customize, enhance, and optimize customer checkout experience today!

Mini Cart vs Custom Checkout Fields Editor