Wordpress шорткод в простом лайтбоксе

Question

Я использую следующий код для отображения лайтбокса, когда покупатель добавляет товар в свою корзину в WooCommerce.Это работает, но проблема в том, что мне нужно отобразить шорткод или PHP в лайтбоксе, и я не могу заставить его работать со стандартным кодом do_short.

Сейчас он просто отображает простой текст, но япотребуется отображать больше информации, например, названия продуктов, изображения и прочее.Можно ли отсоединить разметку лайтбокса, чтобы она была не прямо в коде jQuery, а отдельно, чтобы я мог использовать обычный HTML / PHP?

Любая помощь будет оценена.

Вотмой код:

jQuery(document).ready(function($) {

    $('body').on('added_to_cart', function(e) {

        //prevent default action (hyperlink)
        e.preventDefault();

        //Get clicked link href
        var image_href = $(this).attr("href");

        /*  
        If the lightbox window HTML already exists in document, 
        change the img src to to match the href of whatever link was clicked

        If the lightbox window HTML doesn't exists, create it and insert it.
        (This will only happen the first time around)
        */

        if ($('#lightbox').length > 0) { // #lightbox exists

            //place href as img src value
            $('#content').html('<img src="' + image_href + '" />');

        }

        else { //#lightbox does not exist - create and insert (runs 1st time only)

            //create HTML markup for lightbox window
            var lightbox = 
            '<div id="lightbox" style="display:none">' +
                '<div id="content">' + //insert clicked link's href into img src woocommerce_bought_together
                    '<p>Produktet blev tilføjet til kurven!</p>' + 
                '</div>' +  
            '</div>';

            //insert lightbox HTML into page
            $('body').append(lightbox);
        }
        //show lightbox window
        $('#lightbox').fadeIn(200);

    });

    //Click anywhere on the page to get rid of lightbox window
    $(document).on('click', '#lightbox', function() { //must use live, as the lightbox element is inserted into the DOM
        $('#lightbox').fadeOut(100);
    });
});

и CSS:

#content {
height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    #lightbox {
            /* keeps the lightbox window in the current viewport. position:fixed makes our overlay appear correctly in the current viewport, no matter the user’s position on screen (top or bottom of the page). This is where using the right DOCTYPE comes in handy. If IE runs in quirks mode due to the wrong DOCTYPE (or none at all), then our overlay won’t appear correctly.  */
            position:fixed; /* keeps the lightbox window in the current viewport */
            top:0; 
            left:0; 
            /* This makes our #lightbox div, which acts as the black overlay, cover the entire viewport no matter the end user’s screen resolution */
            width:100%; 
            height:100%; 
            background: rgba(0,0,0,.5); 
            text-align:center;
            z-index:9999;
            }
        /* we will add some text in the lightbox overlay stating they can click anywhere to have the lightbox window disappear */
        #lightbox p { 
            text-align:right;
            margin-right:20px;
            font-size:12px;
            width: 600px;
text-align: center;
background: #fff;
color: #000;
padding: 20px;
border-radius: 5px;
            }
        #lightbox img {
            box-shadow:0 0 25px #111;
            -webkit-box-shadow:0 0 25px #111;
            -moz-box-shadow:0 0 25px #111;
            /* Adding a max-width will shrink any high-resolution images we might be linking to. This helps to ensure all images fit into the viewport. */
            max-width:940px;
            }