add modal popup in woocommerce add to cart WordPress
- SOLVED
Hi,
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.
Kindly help.
Regards
Rajiv
Answers (1)
Dbranes answers:
Did you check these two options:
[[LINK href="http://codecanyon.net/item/woocommerce-popup/5990253"]]http://codecanyon.net/item/woocommerce-popup/5990253[[/LINK]]
[[LINK href="http://wordpress.stackexchange.com/questions/98740/lightbox-popup-on-woocommerce-add-to-cart-action"]]http://wordpress.stackexchange.com/questions/98740/lightbox-popup-on-woocommerce-add-to-cart-action[[/LINK]]
<strong>One way to modify the ThickBox:</strong>
jQuery(document).ready(function($) {
$('body').on('added_to_cart',function(e,data) {
if ($('#hidden_cart').length == 0) { //add cart contents only once
$(this).append('<a href="#TB_inline?width=300&height=250&inlineId=hidden_cart" id="show_hidden_cart" title="<h2>Cart</h2>" class="thickbox" style="display:none"></a>');
// Some customization:
var s = '';
s += '<div class="widget_shopping_cart_content">';
s += '<p>';
s += '<h4>Product added to chart</h4>';
s += '</p>';
s += '<p class="buttons">';
s += ' <a href="" onclick="javascript:tb_remove();return false;" class="button wc-forward">Continue Shopping</a>';
s += ' <a href="/store/checkout/" class="button checkout wc-forward">Checkout</a>';
s += '</p>';
s += '</div>';
$(this).append('<div id="hidden_cart" style="display:none">'+s+'</div>');
}
$('#show_hidden_cart').click();
});
});
rajivvaishnav comments:
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,
pls advice.
rajivvaishnav comments:
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 :
if (is_woocommerce() && is_archive()) {
wp_enqueue_script( 'frontend-custom', get_template_directory_uri() . '/js/frontend-custom.js', array("jquery"));
add_thickbox();
}
pls advice.
Dbranes comments:
Try this
<strong>Step 1:</strong>
Create the <em>/js/frontend-custom.js</em> file in your current theme directory and paste javascript code snippet from the link above.
<strong>Step 2:</strong>
Add the following to your <em>functions.php</em> file in your current theme directory:
add_action( 'wp_enqueue_scripts', function(){
if (is_woocommerce() && is_archive()) {
wp_enqueue_script( 'frontend-custom', get_template_directory_uri() . '/js/frontend-custom.js', array("jquery"));
add_thickbox();
}
});
And then test your "Add to Chart" button.
rajivvaishnav comments:
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 .
regards
Rajiv
Dbranes comments:
ok great ;-)
You can try to play with the conditions:
if (is_woocommerce() && is_archive()) {
in the above PHP code snippet.
Try for example to add <em>is_home()</em> or <em>is_front_page()</em>, like
if ( is_home() || is_front_page() || ( is_woocommerce() && is_archive() ) ) {
rajivvaishnav comments:
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 ?
rajivvaishnav comments:
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.
pls advice.
Dbranes comments:
It's possible to modify the PHP template here:
/templates/cart/mini-cart.php
where one can copy it to the current theme directory to overwrite it,
or one can modify the <em>frontend-custom.js</em> file (see the updated answer)
Dbranes comments:
... or another option would be to add a fixed height with a y-scrollbar to the list of products in the cart.
rajivvaishnav comments:
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.
can you help me on this.
regards
Rajiv