The plugin supports both simple and variable products and you can enable the popup on the “Shop” page and product pages. You have two options, either to show the Cart or to show the product details.
Show the whole cart content in the popup, after you add a product to the cart.
Product details popup
Show the product details in the popup, after you add the product to the cart.
The plugin gives the possibility to insert some products to suggest to the user at the bottom of the popup. You just have to enable the “Show suggested products” option.
- “Suggested products” title: Rename the title of the ‘Suggested products’ section.
- Number of suggested products: Number of products you want to show.
- Columns of suggested products: Number of columns you want to show.
- Suggested products type: You can select the products you want and choose from 3 product types (Related products, Cross-sell products and Up-sell products).
- Select products: Search for the products you want to add.
- Show “Add to cart” button: Show the ‘add to cart’ button for suggested products in the popup.
From the YITH > Added to Cart > Style tab you can manage the colors of the plugin options.
- Overlay color: Popup overlay color
- Overlay opacity: Overlay opacity from 0 to 1
- Popup background: Background color popup
- Closing link color: Default and hover color of the link
- Message text color: Popup message text color
- Message background color: Background color popup message
- Message icon: Popup message icon uploaden (recommended 25×25 px)
- Product name: Default and hover color of product name
- Product price: Color of product price
- Total and shipping label: Color for total and shipping label
- Total and shipping amount: Color of total and shipping amount
- Button background: Default and hover color of background button
- Button text: Default and hover color of button text
- Related title: Color of the ‘related product’ section title
The plugin includes an icon that lets you open the cart popup and show the cart contents at any time. The mini-cart icon floats on the page, meaning that it will always be available in the same position on the screen even if you scroll the page up or down or if you move from one page to the other.
If you are browsing the website or reading more about a product, you will be able to check your cart contents at any time with just one click.
To set the floating cart icon, just go to the plugin settings at YITH Plugins > Added to Cart Popup > Mini Cart.
Check here all the available options for the mini-cart.
Enable popup on desktop and/or mobile: check one or both options to enable the cart icon on desktop only, on mobile only or on both of them.
Mini cart icon: after uploading the icon for the mini-cart into your Media files, copy the image link and enter it here. Make sure the image is 32x32px to ensure quality and avoid to weigh the page down.
Show counter: if you enable this option, you will see a counter on the cart icon with the number of items added to the cart so far.
Mini Cart position: drag and drop the icon over the grey area to stick the icon to where you want it to be on the screen.
This is an example of how the mini cart would look like on the frontend.
And when you click on the cart icon, a popup opens showing up the cart contents.
By default, the popup automatically opens when any product has been added to the cart.
However, you can specify one or more products on which the plugin won’t apply any action. Insert the products in the “Product Exclusion List” entry.
You can also exclude the products by category in a massive way: insert the category name and no popup will be generated for all those products of the specified category.
YITH WooCommerce Cart Messages is an extension designed for those who wish to create custom messages that will be displayed in one or more pages of the website (Product page, Archive page, Cart, and Checkout page). Messages can be displayed at all times or only for specific products in the cart.
Thanks to this integration, each custom message you have created can be shown in the automatic popup (by using YITH WooCommerce Added to Cart Popup) when a product is added to the cart.
After installing and activating both plugins, you can create your custom messages from YITH > Cart Messages > Add new message. All the way on the bottom, you will find the option Show on “Added to Cart” popup, if enabled, you can show the message inside the popup that will open after adding the product to cart.
example of ‘free shipping’ message
With YITH WooCommerce Color and Label Variations, you can show all your product variations such as colors, sizes, shapes, etc. as selectable color swatches, labels or even with custom images. The customer will be able to pick their favorite variation right from the Shop page and other archive pages. The plugin also allows splitting variations of the same product and show them as separate items on the Shop and archive pages.
The combined use of these two plugins allows users to choose the variation of the products directly from the modal window.
To do it, you need to install activate both plugins on your e-commerce site (both premium version).
For further details about YITH WooCommerce Color and Label Variations settings, please refer to the official documentation.
YITH WooCommerce Quick View allows the users to get a quick view of the product in which they are interested. The product details will be shown in a popup, so they don’t need to leave the current page.
The integration with YITH Added to Cart Popup allows opening the Added to cart popup when clicking on the Add to cart button from the quick view.
After installing and activating both plugins, go to YITH > Quick View > Product > Content options and make sure the option Enable Ajax Add To Cart is enabled.
For further details about YITH WooCommerce Quick View settings, please refer to the official documentation.
Thanks to YITH WooCommerce Dynamic Pricing and Discounts, you can create almost any sort of price rule and discounts for your shop, both quantity based discounts and cart discounts.
By combining this plugin with YITH WooCommerce Added to Cart Popup, the discounted price will also be visible in the add-to-cart popup.
To enable this feature, just make sure that the premium version of both plugins has been installed and activated from the Plugins page. No other option needs to be enabled.
Here you find an example of how the discounted price will show also in the popup window.
As you can see, there’s a rule that gives a quantity discount on the product Yellow tshirt:
- 5% off for 5 products
- 10% off for 6 to 10 products
- 15% off for 11 to 15 products
If you add 10 items to the cart, you’ll see a 10% discount and the product price is discounted, 10 products for $27 each (instead of $30).
For any further details about YITH WooCommerce Dynamic Pricing and Discounts, please, refer to the official plugin documentation here.