Customization

In the Customization > Popup design section, you can customize the popup style and close icon options.

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

Close icon

• 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 the Added notice section, you can customize all the style options for the notice message shown after adding the product to the cart.

Style options

• 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.
• Border radius: set the border radius for the notice.

Notice options

• Notice colors: set the default and background color of the notice.
• Notice icon: choose whether to show the default icon (a checkmark symbol, as shown in the image below), upload a custom one, or no icon.

Below is an example of the notice with the default icon and a 30px border radius set for the top-left corner.

From the Products table section, you can customize the products table shown in the popup through the following settings:

• Show product name and price: enable to show the product name and price in the popup.
• Show variations info: enable this option to show the variations set in the variable products (color, size. 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, you can select the option yith_wacp_image_size in the thumbnail plugin you’re using.

Colors

• Products color: set the default color and on hover for the product name.
• Product price: set the color of the product price.
• Border color: set the color of the separator border.

In the Cart total section, you can customize the appearance of the Cart total section shown in the popup. Let’s see 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 label and amount.

In the Buttons section, you can configure the style options for the buttons shown in the popup.

You will find 4 sub-sections with different options that we will analyze below:

• View cart
• Checkout
• Continue Shopping
• Extra

View cart

• Show “View Cart” button: enable this option to show the View cart button in the popup.
  • “View Cart” label: enter the label of the button.
  • “View Cart” colors: set the colors of the button.

Checkout

• Show “Checkout” button: enable this option to show the Checkout button in the popup.
  • “Checkout” label: enter the label of the button.
  • “Checkout” colors: set the colors of the button.

Continue Shopping

• Show “Continue Shopping” button: enable this option to show the Continue shopping button in the popup.
  • “Continue Shopping” label: enter the label of the button.
  • “Continue Shopping” colors: set the colors of the button.

Extra

• Border radius: set the border radius of the buttons.

In the Upsell & cross-sell section, you can choose whether to show the upsell and cross-sell products and customize the section as you need.

Let’s see the available options.

• Show suggested products: enable to show a list of suggested products in the popup.
• Section title: enter the name of the section to show above suggested products.
• 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 between 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.