woocommerce add to cart modal

This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

Popup Cart Lite for WooCommerce

Description

Use Popup Cart Lite for WooCommerce plugin to show lightbox popup cart for add to cart action. Customize any settings for popup window without CSS.

Customization for Popup Cart Lite for WooCommerce for WooCommerce:

  • Font size and color
  • Width, paddings, colors for popup window
  • Shadow
  • Buttons (text and color)
  • Thumbnails size
  • Add to Cart notice

For more features and amazing support get Woocart PRO version:

  • Ability insert cart into menus
  • Ability insert cart by using widget and shortcode
  • Display open shopping cart in sidebar area
  • Cart in fixed location (visible cart with scrolling page)
  • Lightbox popup for add to cart action
  • Opportunity to hide cart if it is empty
  • Dropdown products list on click or on hover
  • Quickly add and delete products from cart
  • Ability to display total price and amount in any combination
  • Customize text and icons in cart
  • Enable/Disable buttons
  • 11 default icons and the ability to add your own custom icon
  • Ability to display only list of products in cart widget
  • Import/Export content in json

Also more customization settings for Woocart PRO version:

  • Responsive and custom width
  • Icon color
  • Font size and color
  • Padding for cart position
  • Background color
  • Opacity for background
  • Border radius, width and color

Dropdown Product List

  • Responsive width and custom
  • Font size and color for text and title
  • Border radius, width and color for corners
  • Background color and opacity
  • Border width and radius for “Subtotal”
  • Border color for “Subtotal”
  • Background color for “Subtotal”
  • Font color for “Subtotal”
  • Background for buttons
  • Text for buttons title
  • Font color for buttons
  • Border radius, width and color for buttons
  • Size and color for delete button
  • Width and color for divider
  • Text for empty cart
  • Font color for empty cart
  • Popup cart dialog
  • Product thumbnails size

Screenshots

  • How it looks like after click on Add to Cart button
  • Settings

Installation

You can install Popup Cart Lite for WooCommerce for WooCommerce via the WordPress plugin uploader without unzipping the file:

  1. Log into your WordPress admin panel
  2. Navigate to Plugins > Add New
  3. Click Upload
  4. Click Choose File and select the woocommerce-woocart-popup.zip
  5. Click Install Now
  6. Activate the plugin through the Plugins menu in WordPress
  7. Go to new Popup Cart Lite for WooCommerce section in Admin Bar

This issue is most commonly caused by wrong file permissions.

Your uploads directory should have correct file permissions otherwise WordPress will not be able to store your files in it or sometimes may not even display files from the upload directory.

To set correct file permissions for your uploads directory, you would need a FTP client, like Filezilla.

If you see warning like this you need connect to your website using the FTP client and then go to /wp-content/plugins/woocommerce-woocartpro/directory.

There you will see /plugins/woocommerce-woocartpro/. Right click on the uploads directory and select file permissions.

A new dialog box for file permissions will open. At first you will need to set file permissions for uploads directory itself and all the sub directories inside it to 777.

To do that, enter 777 in the numberic value box, and then check the box next toRecurse into subdirectories.

Lastly, you need to click on ‘Apply to directories only’ radio button.

Click on the OK button to apply these changes. Filezilla will now start applying file permissions to the directories.

Filezilla will now set the file permissions for all the directories Once it is done, you can go back to your WooCart Pro Settings and click on Refresh plagin button.

After refreshing you will see success message.

I have another question…

If you need support or you have a question or suggestion – leave a message for our support team.

add modal popup in woocommerce add to cart WordPress

i am looking for a solution like this in woocommerce :

when i click add to cart on product category archive page, i want to show a popup showing the product added to cart, continue shopping or go to checkout thats it.

and also want same functionality on single product page.

Did you check these two options:

One way to modify the ThickBox:

jQuery(document).ready(function($) <
$(‘body’).on(‘added_to_cart’,function(e,data) <
if ($(‘#hidden_cart’).length == 0) < //add cart contents only once
$(this).append(‘Cart

// Some customization:
var s = ”;
s += ‘

Product added to chart

i dont want to go for commercial plugin.

and i checked the second link, but am confused about second link :

the line says : In a file (in your theme directory) js/frontend-custom.js (or wherever you have your theme’s js):

i dont have frontend-custom.js file anywhere in my install,

and in the tutorial it says :

In your theme’s functions.php (or in the class definition for the theme, if you have one) there’s probably some ‘enqueue_scripts’ function. You should add this to this function to ensure the thickbox script is loaded.

in the functions.php i dont see this :

Step 1:

Create the /js/frontend-custom.js file in your current theme directory and paste javascript code snippet from the link above.

Step 2:

Add the following to your functions.php file in your current theme directory:

And then test your "Add to Chart" button.

woww . this works like a charm,

here is my website www.doorhardwareshop.com.au, only one problem, if you see there are 4 products on home page, its called via shortcode, but the popup is not working on home page, but on shop page it works fine, and how can i show just 2 buttons on popup, like CONTINUE SHOPPING and CHECKOUT ? instead of view cart and checkout .

You can try to play with the conditions:

if (is_woocommerce() && is_archive()) <

in the above PHP code snippet.

Try for example to add is_home() or is_front_page(), like

if ( is_home() || is_front_page() || ( is_woocommerce() && is_archive() ) ) <

gr8, that works, now how can i show CONTINUE SHOPPING and checkout instead of view cart and checkout ?

and how much do i owe you ?

or how can i remove the list of products added to cart, i just wish to show a modal window showing :

PRODUCT XXX ADDED TO CART
and then continue shopping and checkout thast it.

because when more items are added to cart, its difficult to close popup on mobile device, its occupying too much space.

so just want small popup.

It’s possible to modify the PHP template here:

where one can copy it to the current theme directory to overwrite it,

or one can modify the frontend-custom.js file (see the updated answer)

. or another option would be to add a fixed height with a y-scrollbar to the list of products in the cart.

ok this works, but strange problem,

on home page if i click add to cart, then popup works fine, but then no css applied,there is a text instead of button, and on shop page when i click add to cart, it works,and when i click continue shopping it goes to shop page, and then if i add another product to cart, old cart comes with list of product.

Leave a Reply

Your email address will not be published. Required fields are marked *