View Product Page

Popup design

In the Customization > Popup design tab we can customize the look and feel of the popup. Let’s see all the available options.

Customization-popup design

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.

Close icon

Icon color: set the colors of the close icon, default and on hover.

Added notice

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.

Customization - added notice

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.

Default notice icon

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.

Notice message with default icon and border radius

Products table

Customization - Products table

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.

Product image and variation info

Border color: set the separator border color.

Cart total

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.

Customization - cart total

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.

Cart totals

Buttons

In the Buttons tab, we can go about the three buttons displayed in the popup.

Buttons 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

View Cart button options

Checkout button

checkout button options

Continue shopping button

Continue shopping button options

Finally, in the last option, we can set the border radius for all the buttons.

Buttons border radius

Upsell & cross-sell

In this tab, you can choose whether to show the Upsell & cross-sell section and customize it to your taste.

Upsell and cross-sell section

Let’s see all the available options.

Upsell & Cross-sell tab

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.