Dynamically display a WooCommerce product inside a Popup Maker popup.

dynamically_display_woo_product_in_popup.php

<?php // Ignore this first line when copying to your child theme's functions.php file.

/**
 * Dynamically display a WooCommerce product inside a Popup Maker popup. 
 * 
 * Pass in the product ID using the classes attribute for the popup_trigger
 * shortcode. See usage notes below.
 */ 
function rc_ajax_demo_js() { ?>
     <script type="text/javascript">
        	jQuery(document).ready(function ($) {

            		const popupId = 762; // Replace with your Remote Content AJAX popup's ID number.
            		const popupSel = `#popmake-${popupId}`; // Selector for the RC AJAX popup.
    
                    // Listen for the custom PopMake event before AJAX so we can dynamically
                    // insert the correct product into the popup before the popup displays.
                    $(popupSel).on('popmakeRcBeforeAjax', function () {
						const trigger = $.fn.popmake.last_open_trigger[0]; // Grab the popup trigger's element. Need this for the product ID.

						// Extract product ID from the trigger element's class using regex.
						// The trigger element on your post or page must have a class that 
						// follows this pattern: prod-123. The "123" must be a valid Woo product ID 
						// in your shop.
            			const productId = $(trigger).attr('class').match(/prod-(\d+)/)[1];
            			console.log(`productId: ${productId}`); // Log the product ID for debugging
						
                        // Set custom arguments for the AJAX request
                        $.fn.popmake.rc_user_args[popupId] = {
                                custom: productId, // Product ID to send
                                name: 'product_page' // Shortcode name to run
                        }; // fn
                    }); // Listener
            
            }); // jQuery ready
     </script>
<?php }
add_action( 'wp_footer', 'rc_ajax_demo_js', 500 ); // Load the script in the footer with a "late" priority so Popup Maker sees it.

// Handle AJAX request to generate popup content. Put this function's name into the
// Remote Content Area > General > AJAX > Function Name setting.
function popmake_remote_content_ajax() {
    // Run the shortcode with provided arguments and display the output as the popup's contents.
    $product = do_shortcode( '[' . $_REQUEST['name'] . ' id="' . $_REQUEST['custom'] .'"]' ); // Run the shortcode.
    echo '<div>' . $product . '</div>';
}

/** 
 * Usage
 * 
 * [popup_trigger id="289" classes="prod-191" ]Click me![/popup_trigger]
 */

/**
 * You can add the PHP code snippet to your child theme's functions.php file
 * or with third-party plugins such as My Custom Functions and Code Snippets.
 *
 * Learn more:
 * - https://wppopupmaker.com/docs/getting-started-with-custom-code/getting-started-with-custom-js/
 * - https://wppopupmaker.com/docs/getting-started-with-custom-code/getting-started-with-custom-php/
 */