tristanagilisit

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
}
}

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!