viewing the PDF in a popup

Hi @miky990t,

Although we do not have such a feature in our plugin, yours is a very interesting request.

AFAIK, there is not a solution out-of-the box for this, but you should achieve it, following these steps I just wrote for you:

1. Download, install and activate the free trial version of the Wonder Lightbox plugin, here: https://www.wonderplugin.com/wordpress-lightbox/

2. Move the plugin JavaScript to the footer, under Wonder Lightbox Trial > Settings, checking the following setting:

3. Activate the following code snippet in your site:

/**
 * PDF Invoices & Packing Slip for WooCommerce:
 * Make the PDF Invoice button compatible with the Wonder Lightbox plugin
 */
add_action( 'wp_footer', function() {
	if ( is_account_page() && is_wc_endpoint_url( 'orders' ) ) {
		?>
		<script>
		jQuery(document).ready(function($) {
			var invoiceLink = $('.woocommerce-button.invoice');
			invoiceLink.addClass('wplightbox');
			invoiceLink.attr('data-width', '1200');
			invoiceLink.attr('data-height', '1200');	
		});
		</script>
		<?php
	}
}, 10, 1 );

If you haven’t worked with code snippets (actions/filters) or functions.php before, read this guide: How to use filters

Let me know if you managed to make it work!

Hi@miky990t,

I did the same in a new testing site, and it worked at the first try. Maybe the issue is that you actually did not have activated the code snippet I wrote in the 3rd step?

If you are using the Code Snippets plugin, please note that you have to click on the “Save Changes and Activate” button, instead on the right one that only save the changes, but not activate the code:

Thanks for providing more details, @miky990t:

Please note that the instructions above are to make the PDF invoice to open in a pop-up or lightbox in the My Account page in the frontend.

However, to apply the same behavior in the order list, please follow these instructions:

1. Download, install and activate the free trial version of the Wonder Lightbox plugin, here: https://www.wonderplugin.com/wordpress-lightbox/

2. Move the plugin JavaScript to the footer and enable it in the WordPress backend, under Wonder Lightbox Trial > Settings, checking the following setting:

3. Activate the following code snippet in your site:

/**
 * PDF Invoices & Packing Slip for WooCommerce:
 * Make the PDF Invoice button compatible with the Wonder Lightbox plugin (in the backend)
 */
add_action( 'admin_footer', function() {
	if ( is_admin() ) {
		?>
		<script>
		jQuery(document).ready(function($) {
			var invoiceLink = $('.button.invoice');
			invoiceLink.addClass('wplightbox');
			invoiceLink.attr('data-width', '1200');
			invoiceLink.attr('data-height', '1200');	
		});
		</script>
		<?php
	}
}, 10, 1 );

Let me know if this time it worked as you wanted! 😉

Thanks for confirming that it worked, @miky990t! 🎉

Let us know if you need anything else 😉