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.
This shows the whole cart content in the popup, after you add a product to the cart.
In this case, you will be able to edit the product quantity or remove the products from the Cart.
This shows only the product that has been added to the cart with this action.
Let’s start configuring the plugin in the General options tab from YITH > Added to Cart Popup. Let’s see all the options
Show popup in:
To find out more about the Exclusion list and how to add single products or categories, please, refer to this page.
Show popup on shop pages: enable to show the popup when the customer adds the product to the cart from the Shop page, category pages, shortcodes, etc.
Show popup on product detail page: enable to show the popup when the customer adds the product to the cart from the product page.
Show popup on mobile devices: enable to show the popup also on mobile devices.
Popup content: here you can choose what to display in the popup between:
In the Customization > Popup design tab we can customize the look and feel of the popup. Let’s see all the available options.
Popup size (px): set the popup width and height in pixels. This is the maximum size. If the content does not take the full space, the popup will be automatically shrunk.
Popup animation: choose here the popup animation effect among the following:
Overlay color: set the overlay color and opacity.
Border radius: set the popup border radius for each corner.
Show close icon: enable to show the close icon on the popup.
Icon color: set the colors of the close icon, default and on hover.
In this Added notice tab, we can customize all the style options for the notice message that appears after you add the product to the cart.
Text to show: set the text to show when a product is added to the cart.
Text alignment: left or center
Text style: choose among the Heading titles or a simple paragraph style.
Notice colors: set the default and background color of the notice message.
Notice icon: choose if you want to show the default icon (a check mark symbol, see below), upload a custom one, or not show any icon at all.
Border radius: finally, you can set the border radius of the four message corners.
Below an example of the notice message with the default icon and a 30px border radius set for the top-left corner.
Show product name and price: enable to show the product name and price in the popup.
Products color: set the default color and on hover for the product name.
Product price: set the product price color.
Show variations info: enable to show variations info in variable products (size, color, etc.)
Show product image: enable to show the product image in the popup.
Image size (px): set the product image size to show in the popup. After changing these settings, you may need to regenerate the thumbnails.
Note: when regenerating the thumbnails for this popup only, you can select the option yith_wacp_image_size in the thumbnail plugin you’re using.
Border color: set the separator border color.
In this tab, you will be able to customize the appearance of the Cart total section in the popup. Let’s see all the available options.
Show shipping cost: enable to show the shipping cost in the popup.
Show taxes: enable to show the taxes in the popup.
Shipping & taxes colors: set the colors for the shipping and taxes info.
Show cart total: enable to show the cart total in the popup.
Cart total colors: set the colors for the cart total.
In the Buttons tab, we can go about the three buttons displayed in the popup.
We can choose:
Finally, in the last option, we can set the border radius for all the buttons.
In this tab, you can choose whether to show the Upsell & cross-sell section and customize it to your taste.
Let’s see all the available options.
Show suggested products: enable to show a list of suggested products in the popup.
Title color: set the color of the title.
Products to suggest: choose among:
Please, refer to this page to learn more about the differences about these products and how to set them up.
Columns of suggested products: choose how many columns to show, 1 to 6.
Show “Add to cart” button: enable to show the “Add to cart” button for each suggested product.
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 in YITH > Added to Cart Popup > Mini Cart.
Show Mini Cart on desktop: enable to show the mini cart on desktop devices.
Show Mini Cart on mobile: enable to show the mini cart on mobile devices.
Hide if empty: enable to hide the Mini Cart when the cart is empty.
Show counter: enable to show a counter with the number of items in cart.
Mini Cart icon: choose if you want to show the default icon, upload a custom one or not show any icon at all.
Icon color: set the color of the icon.
Mini Cart colors: set the background, shadow and item counter colors.
Border radius: set the Mini Cart border radius.
Finally, you can set the position of the mini cart icon as it will appear on the screens.
Below an example of how it shows on the front end.
And when you click on the mini cart icon, it will show the cart contents and the upsell & cross-sell section (if enabled):
By default, the popup automatically opens whenever you add a product to the cart.
However, if you want to restrict this to specific products or exclude some products, you can take advantage of the Exclusion list that you find in YITH > Added to Cart Popup.
Let’s see how this works. This is what we see when it’s empty. Let’s click on + Add exclusion to add a product or a category.
Then, we have a our list.
Now, from the General options, we have to decide how the Exclusion list should work from the Show popup in option.
So, considering our list, if we set the option to All products (except the ones in the Exclusion list), the popup will appear when we add any product to the cart except for Blue man t-shirt and Cherokee t-shirt.
On the other hand, if we set the option to Products in the Exclusion list only the popup will appear only when we add Blue man t-shirt and Cherokee t-shirt to the cart.
