General notes

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.

Cart popup

Show the whole cart content in the popup, after you add a product to the cart.

cart content
Product details popup

Show the product details in the popup, after you add the product to the cart.

added to cart product

 

Settings

From YITH > Added to Cart Popup > Settings, you can manage the general plugin settings.

Settings

  • Popup Size: width and height of the popup (in pixel).
  • Popup Animation: entrance animation of the popup.
  • Enable Popup: this option lets you enable or disable the features of the plugin in the “Shop” page and/or in detail page of the products of your site.
  • Popup message: message showed in the popup as notification for the correct addition of the product to the cart.
  • Select content: the content of the popup:
    • Added product: information of the added product.
    • Cart: the complete list of items already added to cart.

Settings 2

  • Show product info: show/hide product info in the popup.
  • Show product thumbnail: show/hide the image of the products in the popup. If enabled, you need to set the size of the images from the “Thumbnail size” option. Once changed, you could need to regenerate all the images of the site.
  • Show product variations: choose to show product variations details (only available for variable products).
  • Show cart total: show the total price of the cart.
  • Show shipping fees: show the shipping fees applied to the cart.
  • Show tax amount: choose to show tax cart amount in the popup.

Settings 3

  • Show “View Cart” Button: add the “View cart” button in the popup in order to let users access directly the “Cart” page.
  • “View Cart” Button Text: label for the “View cart” button.
  • Show “Continue Shopping” Button: add a button that lets users browse the page they were visiting again.
  • “Continue Shopping” Button Text: label for the “Continue Shopping” button.
  • Show “Go to Checkout” Button: add the “Go to Checkout” button in order to let users access directly the “Checkout” page.
  • “Go to Checkout” Button Text: label for the “Go to checkout” button.
  • Enable on mobile: this option enables plugin’s features also for those users that browse the site on mobile devices.

Suggested products

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.

Select products

  • 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.

added to cart popup

Style

From the YITH > Added to Cart > Style tab you can manage the colors of the plugin options.

Style 1

  • 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

Style 2

  • 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

Floating mini-cart icon

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.

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.

floating cart

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.

mini cart on frontend

And when you click on the cart icon, a popup opens showing up the cart contents.

added to cart popup

Product exclusion

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.

product exclusion list

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.

category exclusion

YITH WooCommerce Cart Messages

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.

integration cart messages

example of ‘free shipping’ message

added to cart message

 

 

YITH WooCommerce Color and Label Variations

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).

color and label added to cart

For further details about YITH WooCommerce Color and Label Variations settings, please refer to the official documentation.

YITH WooCommerce Quick View

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.

Added to Cart Popup in Quick View

For further details about YITH WooCommerce Quick View settings, please refer to the official documentation.

YITH Dynamic Pricing and Discounts

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

discount quantity setting

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).

discount popup

For any further details about YITH WooCommerce Dynamic Pricing and Discounts, please, refer to the official plugin documentation here.