Бронирование WooCommerce на Быстрый просмотр

Question

Я занимаюсь разработкой пользовательской темы, которая использует WooCommerce и впервые - WooCommerce Bookings. Моя цель - дать возможность клиенту записаться на прием без необходимости открывать страницу отдельного продукта. Поэтому я пытаюсь загрузить форму бронирования WooCommerce в модальное окно быстрого просмотра.

Я пробовал это с обоими WooCommerce Quick View & Yith WooCommerce Quick View (бесплатные и премиум-версии), и я закончил с Yith Woocommerce Quick View, но мне кажется, как проблема jQuery при выводе HTML, но с некоторыми правилами CSS, которые не позволяют отображать display:none;, а HTML-код для календаря ui datepicker отсутствует.

<form class="cart" method="post" enctype="multipart/form-data" data-nonce="a4793b173d">
<div id="wc-bookings-booking-form" class="wc-bookings-booking-form" style="display:none">
    <p class="form-field form-field-wide wc_bookings_field_persons_143">
        <label for="wc_bookings_field_persons_143">Σκύλος:</label>
        <input type="number" value="1" step="1" min="1" max="3" name="wc_bookings_field_persons_143" id="wc_bookings_field_persons_143"> 
    </p>
    <p class="form-field form-field-wide wc_bookings_field_persons_242">
        <label for="wc_bookings_field_persons_242">Γάτα:</label>
        <input type="number" value="0" step="1" min="0" max="3" name="wc_bookings_field_persons_242" id="wc_bookings_field_persons_242"> 
    </p>
    <fieldset class="wc-bookings-date-picker wc_bookings_field_start_date">
        <legend>
            <span class="label">Date</span>: <small class="wc-bookings-date-picker-choose-date">Choose...</small><br>
            <span class="wc-bookings-date-picker-timezone-label">Times are in </span>
            <span class="wc-bookings-date-picker-timezone">Europe/Athens</span>
        </legend>
        <div class="picker" data-display="always_visible" data-default-availability="true" data-min_date="+0d" data-max_date="+12m" data-default_date="2019-01-17"></div>
        <div class="wc-bookings-date-picker-date-fields">
            <label>
                <input type="text" name="wc_bookings_field_start_date_month" placeholder="mm" size="2" class="required_for_calculation booking_date_month">
                <span>Month</span>
            </label> / <label>
                <input type="text" name="wc_bookings_field_start_date_day" placeholder="dd" size="2" class="required_for_calculation booking_date_day">
                <span>Day</span>
            </label>
            / <label>
                <input type="text" value="2019" name="wc_bookings_field_start_date_year" placeholder="YYYY" size="4" class="required_for_calculation booking_date_year">
                <span>Year</span>
            </label>
        </div>
    </fieldset>
    <div class="form-field form-field-wide">
        <label for="wc_bookings_field_start_date">Time:</label>
        <ul class="block-picker">
            <li>Choose a date above to see available times.</li>
        </ul>
        <input type="hidden" class="required_for_calculation" name="wc_bookings_field_start_date_time" id="wc_bookings_field_start_date">
    </div>
    <div class="timezone-details" style="display: none;">
        <input type="hidden" name="wc_bookings_field_start_date_local_timezone">
    </div>

    <div class="wc-bookings-booking-cost" style="display:none" data-raw-price=""></div>

</div>


<input type="hidden" name="add-to-cart" value="136" class="wc-booking-product-id">

<button type="submit" class="wc-bookings-booking-form-button single_add_to_cart_button button alt disabled" style="display:none">Check Availability</button>

<input type="hidden" name="yith_is_quick_view" id="yith_is_quick_view" value="1">

Когда я попытался переопределить эти правила CSS с помощью правила CSS display: block;, мне, конечно, удалось отобразить форму, но вместо календаря ui datepicker я получил поля ввода даты.

Вот код, который должен был быть и как на странице одного продукта.

<form class="cart" method="post" enctype="multipart/form-data" data-nonce="a4793b173d"> 
<div id="wc-bookings-booking-form" class="wc-bookings-booking-form" style="">       
    <p class="form-field form-field-wide wc_bookings_field_persons_143">
        <label for="wc_bookings_field_persons_143">Σκύλος:</label>
        <input type="number" value="1" step="1" min="1" max="3" name="wc_bookings_field_persons_143" id="wc_bookings_field_persons_143"> 
    </p>
    <p class="form-field form-field-wide wc_bookings_field_persons_242">
        <label for="wc_bookings_field_persons_242">Γάτα:</label>
        <input type="number" value="0" step="1" min="0" max="3" name="wc_bookings_field_persons_242" id="wc_bookings_field_persons_242"> 
    </p>
    <fieldset class="wc-bookings-date-picker wc_bookings_field_start_date">
        <legend>
            <span class="label">Date</span>: <small class="wc-bookings-date-picker-choose-date" style="display: none;">Choose...</small><br>
            <span class="wc-bookings-date-picker-timezone-label">Times are in </span>
            <span class="wc-bookings-date-picker-timezone">Europe/Athens</span>
        </legend>
        <div class="picker hasDatepicker" data-display="always_visible" data-default-availability="true" data-min_date="+0d" data-max_date="+12m" data-default_date="2019-01-17" id="dp1547732418759" style="position: static; zoom: 1;"><div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block;"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all ui-state-disabled" title="Previous"><span class="ui-icon ui-icon-circle-triangle-w">Previous</span></a><a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">January</span>&nbsp;<span class="ui-datepicker-year">2019</span></div></div><table class="ui-datepicker-calendar"><thead><tr><th scope="col"><span title="Monday">M</span></th><th scope="col"><span title="Tuesday">T</span></th><th scope="col"><span title="Wednesday">W</span></th><th scope="col"><span title="Thursday">T</span></th><th scope="col"><span title="Friday">F</span></th><th scope="col" class="ui-datepicker-week-end"><span title="Saturday">S</span></th><th scope="col" class="ui-datepicker-week-end"><span title="Sunday">S</span></th></tr></thead><tbody><tr><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">31</span></td><td class=" ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">1</span></td><td class=" ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">2</span></td><td class=" ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">3</span></td><td class=" ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">4</span></td><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">5</span></td><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">6</span></td></tr><tr><td class=" ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">7</span></td><td class=" ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">8</span></td><td class=" ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">9</span></td><td class=" ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">10</span></td><td class=" ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">11</span></td><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">12</span></td><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">13</span></td></tr><tr><td class=" ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">14</span></td><td class=" ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">15</span></td><td class=" ui-datepicker-unselectable ui-state-disabled bookable"><span class="ui-state-default">16</span></td><td class="bookable ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default ui-state-highlight ui-state-active" href="#">17</a></td><td class="bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default" href="#">18</a></td><td class="bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default" href="#">19</a></td><td class="bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default" href="#">20</a></td></tr><tr><td class="bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default" href="#">21</a></td><td class="bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default" href="#">22</a></td><td class="bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default" href="#">23</a></td><td class="bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default" href="#">24</a></td><td class="partial_booked bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is partially booked - but bookings still remain" selectable="true"><a class="ui-state-default" href="#">25</a></td><td class="bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default" href="#">26</a></td><td class="bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default" href="#">27</a></td></tr><tr><td class="bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default" href="#">28</a></td><td class="bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default" href="#">29</a></td><td class="bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default" href="#">30</a></td><td class="bookable" data-handler="selectDay" data-event="click" data-month="0" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default" href="#">31</a></td><td class="bookable" data-handler="selectDay" data-event="click" data-month="1" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default ui-priority-secondary" href="#">1</a></td><td class="bookable" data-handler="selectDay" data-event="click" data-month="1" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default ui-priority-secondary" href="#">2</a></td><td class="bookable" data-handler="selectDay" data-event="click" data-month="1" data-year="2019" title="This date is available" selectable="true"><a class="ui-state-default ui-priority-secondary" href="#">3</a></td></tr></tbody></table></div></div>
        <div class="wc-bookings-date-picker-date-fields" style="display: none;">
            <label>
                <input type="text" name="wc_bookings_field_start_date_month" placeholder="mm" size="2" class="required_for_calculation booking_date_month">
                <span>Month</span>
            </label> / <label>
                <input type="text" name="wc_bookings_field_start_date_day" placeholder="dd" size="2" class="required_for_calculation booking_date_day">
                <span>Day</span>
            </label>
            / <label>
                <input type="text" value="2019" name="wc_bookings_field_start_date_year" placeholder="YYYY" size="4" class="required_for_calculation booking_date_year">
                <span>Year</span>
            </label>
        </div>
    </fieldset>
    <div class="form-field form-field-wide">
        <label for="wc_bookings_field_start_date">Time:</label>
        <ul class="block-picker">
            <li>Choose a date above to see available times.</li>
        </ul>
        <input type="hidden" class="required_for_calculation" name="wc_bookings_field_start_date_time" id="wc_bookings_field_start_date">
    </div>
    <div class="timezone-details" style="display: none;">
        <input type="hidden" name="wc_bookings_field_start_date_local_timezone">
    </div>
    <div class="wc-bookings-booking-cost" style="display:none" data-raw-price=""></div>
</div>  
<input type="hidden" name="add-to-cart" value="136" class="wc-booking-product-id">
<button type="submit" class="wc-bookings-booking-form-button single_add_to_cart_button button alt disabled" style="">Check Availability</button>

а это мой yith-quick-view-content.php

        do_action( 'woocommerce_before_single_product' );

    while ( have_posts() ) : the_post(); ?>

    <div class="product">

        <?php if ( ! post_password_required() ) { ?>

            <div id="product-<?php the_ID(); ?>" <?php wc_product_class(); ?>>

                <input type ="hidden" id="yith_wcqv_product_id" value="<?php the_ID();?>">

                <?php  do_action( 'yith_wcqv_product_image' ); ?>
                <?php do_action( 'yith_wcqv_before_product_summary' ); ?>

                <div class="summary entry-summary">
                    <div class="summary-content">
                        <?php do_action( 'yith_wcqv_product_summary' ); ?>
                    </div>
                </div>

                <?php do_action( 'yith_wcqv_after_product_summary' ); ?>

            </div>
            <?php do_action( 'woocommerce_after_single_product' ); ?>
            <?php
        } else {
            echo get_the_password_form();
        }
        ?>
    </div>
    <?php endwhile; // end of the loop. ?>

Любая помощь будет принята с благодарностью !!

Заранее спасибо!