Display Automatically on Checkout

Hi,

Please open plugin settings page tab Addons and turn on Popup Show Variants.

Click save and after page reload please open tab Advanced.

There will be new section called “Show Popup Variants Addon Settings”.

Turn on “Open Popup on Page Load” and set time in milliseconds to wait before opening. 1 second = 1000 milliseconds.

Also there are options “Open Popup after Scroll” after X pixels scrolled and “Open Popup on Scroll to Element” with 3 variants of elements.

Regards,
Dima

Hi Dima,

Thanks so much for getting back to me. That works great now!

While using your plugin I may have also found a display issue. On mobile phones, the popup seemed to have far to much margin. I had a look in the inspector and it seems like there are @media rules already there but that they are not being applied.

In the file br_popup.css on line 178 the following CSS rules don’t seem to apply:

@media (max-width: 1200px) {
#br_popup .br_popup_wrapper {
width: 90%;
height: 90%;
}
}
@media (max-width: 900px) {
#br_popup .br_popup_wrapper {
width: 97%;
height: 97%;
}
}

The reason they are not working is that they are being superseded by some inline CSS in the HTML. This inline CSS is takeing precidentce:

<div class=”br_popup_wrapper” style=”width: 50%;height: 50%;”>

I don’t need any help with this issue as it is very easy to fix. I just wanted to let you know about it in case you were not aware.

The way I fixed it was by adding simply adding “!important” to the affected rules and then pasting them into the plugin’s “Custom CSS” field:

@media (max-width: 1200px) {
#br_popup .br_popup_wrapper {
width: 90%!important;
height: 90%!important;
}
}
@media (max-width: 400px) {
#br_popup .br_popup_wrapper {
width: 94%!important;
height: 94%!important;
}
}

Thanks again for helping me find those settings!

Also, while I was waiting I actually coded my own quick and dirty WooCommerce Checkout Popup. I am going to use your plugin instead because mine was just a quick hack but I used a different responsive resizing method that you might find interesting.

The big difference in the resizing method is that my version resizes itself to fit the content and is not a percentage of the screen size. I then use max-width and max-height to prevent it from getting too big on large screens. It currently does not support scroll like your version but that would be easy to add.

If you want to take a look you can find it here:
https://codepen.io/septies/pen/vwVMPv

I just wrapped all of that code up in a wp action and placed it inside functions.php like so:

// Code to add a popup to WooCommerce checkout
add_action( ‘wp_footer’, ‘checkout_popup’ );
function checkout_popup() {
// Only checkout page
if( is_checkout() && ! is_wc_endpoint_url() ) {
// Code goes here
}
}