How to Improve User Experience with WooCommerce Added to Cart Popup

by Trevor
Woocommerce added to cart popup

Ever wondered what makes a WooCommerce store truly successful? It’s not just the products you offer or the layout of your site; it’s about enhancing the user experience at every step. One such enhancement is the “Add to Cart” popup. But why is this feature so crucial for your online store? Let’s dive in!

The Add to Cart popup WooCommerce helps you combat one of the main causes of shopping cart abandonment: a lengthy and complicated checkout process. By streamlining this experience, you can significantly reduce cart abandonment rates and improve overall customer satisfaction.

Add Cart Popup to WooCommerce Store – Methods

You can improve the user experience of your store by implementing a WooCommerce Cart Popup. Two methods are highlighted here:

  1. WooCommerce Added to Cart Popup by KoalaApps
  2. Adding WooCommerce Added to Cart Popup Programmatically

Method #1: WooCommerce Added to Cart Popup by KoalaApps

WooCommerce Added to Cart Popup plugin displays an attractive popup whenever a product is added to the cart. This popup can show related products, helping to boost the average cart value. It features a custom popup with a success message and promotes cross-selling and up-selling products to increase order value. Additionally, the popup improves customer navigation by displaying the cart contents, allowing customers to go directly to the cart or checkout, and even make edits to the cart. This helps enhance customer engagement and improves conversion rates.

Follow the installation and setup steps to implement the KoalaApps plugin. 

Installation

To install the WooCommerce Add to Cart Popup plugin, follow these steps:

  • To install this plugin, search the .zip file from your WooCommerce account and begin downloading.
  • Go to the WordPress Admin Panel. Select Plugins, choose Add New, and then choose the file to Upload Plugin.
  • Select Install Now and then click Activate.

Setup and Configuration

Once installed, access the settings under WooCommerce > Added to Cart Popup. Customize the behavior, appearance, and content of the popup to suit your store’s needs.

Display Custom Popups on Listing and Product Pages

In the General Settings tab, you can configure the following options for WooCommerce popup after add to cart:

  • Set the width and height of the popup.
  • Choose a template for the popup.
  • Enable popup on Archive Page and Product Page
  • Enter a custom message to display when a product is successfully added to the cart.
  • Set the border radius of the popup.
  • Choose to show full cart content or only the product added in the popup.
  • Select the position of the popup.
  • Paste the link of an image or icon address to display before the text message.
  • Choose whether to show a thumbnail image and set its size.
  • Choose whether to show product info in the popup.
  • Choose whether to show a short description of the added products in the popup cart.
  • Specify the length of the short description. 

Show Cart Detail in Popup

  • Display the entire cart content in the popup.
  • Display the total cart amount in the popup.
  • Display the shipping fee in the popup cart.
  • Display the tax amount in the popup cart.

Customize and Display Cart Button

  • Show the “View Cart” button in the popup.
  • Enter the text for the “View Cart” button.
  • Display the “Continue Shopping” button in the popup.
  • Enter the text for the “Continue Shopping” button.
  • Display the “Go to Checkout” button in the popup.
  • Set the font size for the popup text.
  • Enable the popup to be displayed on mobile devices.

Display Related, Cross-sell or Up-sell Products

  • Show suggested products in the popup.
  • Enter a title for the suggested products.
  • Choose an option to display selected products in the popup.
  • Enter the number of products to display in the popup cart.
  • Enter the number of columns to display product data in the popup cart.

Adjust the Styling of Popup Cart

In the “Style” tab, you can customize the following options:

  • Toggle to enable color customization.
  • Set the background color of the popup.
  • Toggle to enable an overlay color.
  • Set the color for the close link.
  • Set the color for the message text.
  • Set the background color for the message text.
  • Set the color for product names.
  • Choose the color for cart items.
  • Set the background and text color for buttons.
  • Set the color for the title of the suggested products.

Exclude Specific Products and Categories

Go to the “Product Exclusion List” and “Category Exclusion List” tabs to configure the following:

  • Select products you want to exclude from being displayed in the popup.
  • Select categories you want to exclude from being displayed in the popup.

Save Your Changes:

Click on “Save Changes” in every tab after you are done making your adjustments.

Method #2: Adding WooCommerce Added to Cart Popup Programmatically

For those with coding skills, adding a popup programmatically offers greater customization and flexibility. Use this code here:

if (!defined(‘ABSPATH’)) {
    return;}
$my_plugin_version = 1.3;
function my_plugin_load_textdomain() {
    $domain = ‘added-to-cart-popup-woocommerce’;
    $locale = apply_filters(‘plugin_locale’, get_locale(), $domain);
    load_textdomain($domain, WP_LANG_DIR . ‘/’ . $domain . ‘-‘ . $locale . ‘.mo’); // wp-content languages
    load_plugin_textdomain($domain, false, basename(dirname(__FILE__)) . ‘/languages/’); // Plugin Languages}
add_action(‘plugins_loaded’, ‘my_plugin_load_textdomain’);
// Admin Settings
include(plugin_dir_path(__FILE__) . ‘/inc/xoo-cp-admin.php’);
// Activation on mobile devices
if (!$my_plugin_global_atcem_value) {
    if (wp_is_mobile()) {
        return:}}
function my_plugin_enqueue_scripts() {
    global $my_plugin_version, $my_plugin_global_atces_value;
    wp_enqueue_style(‘my-plugin-style’, plugins_url(‘/assets/css/xoo-cp-style.css’, __FILE__), null, $my_plugin_version);
    wp_enqueue_style(‘font-awesome’, ‘https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’);
    wp_enqueue_script(‘my-plugin-js’, plugins_url(‘/assets/js/xoo-cp-js.min.js’, __FILE__), array(‘jquery’), $my_plugin_version, true);
    wp_dequeue_script(‘wc-add-to-cart’);
    // i18n javascript
    $my_plugin_js_text = array(
      ‘added’ => __(‘added successfully.’, ‘added-to-cart-popup-woocommerce’),
  ‘updated’ => __(‘updated successfully.’, ‘added-to-cart-popup-woocommerce’),
        ‘removed’ => __(‘removed from cart.’, ‘added-to-cart-popup-woocommerce’),
   ‘undo’ => __(‘Undo?’, ‘added-to-cart-popup-woocommerce’));
 wp_localize_script(‘my-plugin-js’, ‘my_plugin_localize’, array(
‘adminurl’ => admin_url() . ‘admin-ajax.php’,
    ‘enshop’ => $my_plugin_global_atces_value,
    ‘xcp_text’ => json_encode($my_plugin_js_text)     ));}
add_action(‘wp_enqueue_scripts’, ‘my_plugin_enqueue_scripts’, 500);
// Get rounded total
function my_plugin_round($number) {
    $thousand_separator = get_option(‘woocommerce_price_thousand_sep’);
   $decimal_separator = get_option(‘woocommerce_price_decimal_sep’);
   $decimals = get_option(‘woocommerce_price_num_decimals’);
 return number_format($number, $decimals, $decimal_separator, $thousand_separator);}
// Get price with currency
function my_plugin_with_currency($price) {
    $price = my_plugin_round($price);
    $currency_format = get_option(‘woocommerce_currency_pos’);
    $currency_symbol = get_woocommerce_currency_symbol();
    switch ($currency_format) {
    case ‘left’:
  $currency = $currency_symbol . $price;
         break;
   case ‘left_space’:
      $currency = $currency_symbol . ‘ ‘ . $price;
       break;
 case ‘right’:
       $currency = $price . $currency_symbol;
            break;
        case ‘right_space’:
       $currency = $price . ‘ ‘ . $currency_symbol;
           break;
      default:
  $currency = $currency_symbol . $price;
      break;}
    return $currency;}
// Popup HTML
function my_plugin_popup() {
  global $woocommerce;
 $cart_url = $woocommerce->cart->get_cart_url();
  $checkout_url = $woocommerce->cart->get_checkout_url();     ?>
    <div class=”my-plugin-opac”></div>
    <div class=”my-plugin-modal”>
        <div class=”my-plugin-container”>
  <div class=”my-plugin-outer”>
<div class=”my-plugin-cont-opac”></div>
  <i class=”xcp-icon xcp-icon-spinner2 xcp-outspin”></i>
        </div>
      <i class=”xcp-icon-cross xcp-icon my-plugin-close”></i>
       <div class=”my-plugin-atcn”></div>
<div class=”my-plugin-content”></div>
  <div class=”my-plugin-btns”>
   <a class=”my-plugin-btn-vc xcp-btn” href=”<?php echo $cart_url; ?>”><?php _e(‘View Cart’, ‘added-to-cart-popup-woocommerce’); ?></a>
     <a class=”my-plugin-btn-ch xcp-btn” href=”<?php echo $checkout_url; ?>”><?php _e(‘Checkout’, ‘added-to-cart-popup-woocommerce’); ?></a>
      <a class=”my-plugin-close xcp-btn”><?php _e(‘Continue Shopping’, ‘added-to-cart-popup-woocommerce’); ?></a>
        </div>
      </div>
    </div>
    <?php} 
add_action(‘wp_footer’, ‘my_plugin_popup’);
// Quantity Input
function my_plugin_qty_input($input_value, $product) {
    $max_value = apply_filters(‘woocommerce_quantity_input_max’, $product->get_max_purchase_quantity(), $product);
  $min_value = apply_filters(‘woocommerce_quantity_input_min’, $product->get_min_purchase_quantity(), $product);
  $step = apply_filters(‘woocommerce_quantity_input_step’, 1, $product);
   $pattern = apply_filters(‘woocommerce_quantity_input_pattern’, has_filter(‘woocommerce_stock_amount’, ‘intval’) ? ‘[0-9]*’ : ”);
   return ‘<input type=”number” class=”my-plugin-qty” max=”‘ . esc_attr(0 < $max_value ? $max_value : ”) . ‘” min=”‘ . esc_attr($min_value) . ‘” step=”‘ . esc_attr($step) . ‘” value=”‘ . $input_value . ‘” pattern=”‘ . esc_attr($pattern) . ‘” >’;}
// Ajax Add to cart 
function my_plugin_cart_ajax() {
 global $woocommerce, $my_plugin_global_qtyen_value, $my_plugin_global_ibtne_value;
    $product_data = json_decode(stripslashes($_POST[‘product_data’]), true);
  $product_id = intval($product_data[‘product_id’]);
    $variation_id = intval($product_data[‘variation_id’]);
    $quantity = empty($product_data[‘quantity’]) ? 1 : wc_stock_amount($product_data[‘quantity’]);
  $product = wc_get_product($product_id);
    $variations = array();
    if ($variation_id) {
        $attributes = $product->get_attributes();
      $variation_data = wc_get_product_variation_attributes($variation_id);
     $chosen_attributes = json_decode(stripslashes($product_data[‘attributes’]), true);
   foreach ($attributes as $attribute) {
         if (!$attribute[‘is_variation’]) {
              continue;         }
$taxonomy = ‘attribute_’ . sanitize_title($attribute[‘name’]);
if (isset($chosen_attributes[$taxonomy])) {
      $value = $attribute[‘is_taxonomy’] ? sanitize_title(stripslashes($chosen_attributes[$taxonomy])) : wc_clean(stripslashes($chosen_attributes[$taxonomy]));
        $valid_value = isset($variation_data[$taxonomy]) ? $variation_data[$taxonomy] : ”;
  if (” === $valid_value || $valid_value === $value) {
 $variations[$taxonomy] = $value;}}}
  $cart_success = WC()->cart->add_to_cart($product_id, $quantity, $variation_id, $variations);
 } elseif ($variation_id === 0) {
        $cart_success = $woocommerce->cart->add_to_cart($product_id, $quantity);}
    if ($cart_success) {
  $cart_item_key = $cart_success;
  $cart_data = $woocommerce->cart->get_cart();
       $cart_item = $cart_data[$cart_item_key];
  $_product = apply_filters(‘woocommerce_cart_item_product’, $cart_item[‘data’], $cart_item, $cart_item_key);
        $product_id = apply_filters(‘woocommerce_cart_item_product_id’, $cart_item[‘product_id’], $cart_item, $cart_item_key);
        $product_permalink = apply_filters(‘woocommerce_cart_item_permalink’, $_product->is_visible() ? $_product->get_permalink($cart_item) : ”, $cart_item, $cart_item_key);
 $thumbnail = apply_filters(‘woocommerce_cart_item_thumbnail’, $_product->get_image(), $cart_item, $cart_item_key);
 $product_name = !$product_permalink ? apply_filters(‘woocommerce_cart_item_name’, $_product->get_title(), $cart_item, $cart_item_key) . ‘&nbsp;’ : apply_filters(‘woocommerce_cart_item_name’, sprintf(‘<a href=”%s”>%s</a>’, esc_url($product_permalink), $_product->get_title()), $cart_item, $cart_item_key);
  $product_price = apply_filters(‘woocommerce_cart_item_price’, WC()->cart->get_product_price($_product), $cart_item, $cart_item_key);
        $product_subtotal = apply_filters(‘woocommerce_cart_item_subtotal’, WC()->cart->get_product_subtotal($_product, $cart_item[‘quantity’]), $cart_item, $cart_item 

Conclusion

Whether you use a plugin like WooCommerce Added to Cart Popup Ajax or take a programmatic approach, the benefits are clear. Start implementing this feature today and watch your store’s performance.

Sign up to get Latest Updates

For more digital insights, sign up for the latest updates and industry news right in your inbox.