Customization

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:

• fade in
• slide in (left)
• slide in (right)
• slide in (top)
• slide in (bottom)
• 3D flip (vertical)
• 3D flip (horizontal)
• scale up

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:

• whether to display them or not
• set the button label
• set the button colors for text, background, border both by default and on hover.

View Cart button

Checkout button

Continue shopping button

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:

• related products
• cross-sell products
• upsell products

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.