Hi,

Sorry for the late reply.

Could you send me a screenshot where your client want the number to appear?

Hi,

Open your theme or child-theme functions.php file and add following script:

add_action('wp_footer', function() {
    if (!wp_script_is('stec-shop-js')) {
        return;
    }
    ?>
    <script type="text/javascript">
        (function ($) {
            $(function () {
                const __ = new window.StecHelper().lang;
                window.StecShop.prototype.getHtmlTop = function () {
                    return '';
                };
                window.StecShop.prototype.getHtmlProducts = function () {
                    var parent = this;
                    var html = [];
                    $.each(this.settings.event.products, function () {
                        var product = this;
                        var price = product.html_price;
                        var quantity = product.stock_quantity === null ? 9999 : product.stock_quantity;
                        var inStock = quantity > 0 && product.is_in_stock && product.is_purchasable;
                        var image = product.image;
                        var title = product.title;
                        var desc = product.short_desc;
                        var extraClasses = [];
                        if (false === inStock) {
                            extraClasses.push('out-of-stock');
                        }
                        if (true === product.is_featured) {
                            extraClasses.push('is-featured');
                        }
                        if (true === product.is_on_sale) {
                            extraClasses.push('is-on-sale');
                        }
                        if ('variable' === product.type) {
                            extraClasses.push('no-product-selected');
                        }
                        html.push('<div class="stec-layout-shop-product ' + extraClasses.join(' ') + '" data-id="' + product.id + '">');
                        html.push('          <div class="stec-layout-shop-product-main">');
                        if (0 !== image.id) {
                            html.push('                <div class="stec-layout-shop-product-image" data-id="' + image.id + '"><i class="fas fa-eye"></i><img src="' + image.thumb + '" /></div>');
                        } else {
                            html.push('                <div class="stec-layout-shop-product-image stec-layout-shop-no-gallery" data-id="' + image.id + '"><img src="' + image.thumb + '" /></div>');
                        }
                        html.push('                <div class="stec-layout-shop-product-desc">');
                        html.push('                    <div class="stec-layout-shop-product-status">');
                        html.push('                        <span class="stec-layout-shop-product-about-featured">' + __('featured') + '</span>');
                        html.push('                        <span class="stec-layout-shop-product-about-sale">' + __('Sale') + '</span>');
                        html.push('                    </div>');
                        html.push('                    <p class="stec-style-title2">' + title + '</p>');
                        html.push('                    <p class="stec-style-text">' + desc + '</p>');
                        html.push('                </div>');
                        html.push('                <p class="stec-layout-shop-product-price stec-style-title2"><span class="stec-style-text">' + __('PRICE:') + '</span>' + price + '</p>');
                        html.push('                <p class="stec-layout-shop-product-spots stec-style-title2">');
                        html.push('                    <span style="white-space:nowrap">' + __('Slots left: ') + quantity + '</span>');
                        html.push('                </p>');
                        html.push('                <p class="stec-layout-shop-product-quantity stec-style-title2">');
                        html.push('                    <span class="stec-style-text">' + __('QTY:') + '</span>');
                        html.push('                    <input name="qty" type="number" class="stec-style-input" value="1" step="1" min="1" max="' + quantity + '" />');
                        html.push('                    <span class="stec-layout-shop-product-outofstock">' + __('Out of Stock') + '</span>');
                        html.push('                </p>');
                        html.push('                <div class="stec-layout-shop-product-actions">');
                        if ('variable' === product.type) {
                            html.push('                    <div class="stec-style-button" data-action="toggle_options">');
                            html.push('                        <p>' + __('Options') + '</p>');
                            html.push('                        <i class="fa fa-bars"></i>');
                            html.push('                    </div>');
                        } else {
                            html.push('                    <div class="stec-style-button" data-action="add_to_cart">');
                            html.push('                        <p>' + __('Add to Cart') + '</p>');
                            html.push('                        <i class="fa fa-shopping-cart"></i>');
                            html.push('                    </div>');
                        }
                        html.push('                </div>');
                        html.push('            </div>');
                        if ('variable' === product.type) {
                            html.push(parent.getHtmlProductsVariables(product));
                        }
                        html.push('</div>');
                    });
                    return html.join('');
                };
            });
        })(window.jQuery);
    </script>
    <?php
});

This will override the default html of the shop section and will include Slots left field.