For https://theeventscalendar.com/support/forums/topic/number-of-tickets-available/ The Events Calendar + Event Tickets Plus + WooCommerce: Hide remaining quantity unless it is less than 4 (to create a sense of urgency) NOTE: Would need .each loop logic to work properly for more than just the first WooCommerce ticket if more than 1 WooCommerce t…

functions.php

<?php
/**
 * The Events Calendar + Event Tickets Plus + WooCommerce: Hide remaining
 * quantity unless it is less than 4 (to create a sense of urgency).
 *
 * NOTE: We would need .each loop logic to work properly for more than just the
 * first WooCommerce ticket if more than 1 WooCommerce ticket is available
 * per event!
 *
 * If you want to ALWAYS hide (no sense of urgency logic), do not use this
 * snippet and instead use this CSS:
 * `body.single-tribe_events .woocommerce .tribe-tickets-remaining { display: none; }`
 *
 * @link https://gist.github.com/cliffordp/94f37421a00db6f7a96368aa23a8d8bb
 * @link https://theeventscalendar.com/support/forums/topic/number-of-tickets-available/
 */
function cliff_etplus_woo_conditional_hide_qty_remaining() {
	wp_enqueue_script( 'jquery' );
	?>
	<script type="text/javascript">
		jQuery(document).ready( function () {
			var qty_remaining = jQuery( 'body.single-tribe_events .woocommerce .tribe-tickets-remaining > span.available-stock' ).first().text(); // would need to loop instead of use .first() to work for more than 1 WooCommerce ticket per Event
			qty_remaining = parseInt( qty_remaining, 10 );
			if ( ! isNaN( qty_remaining ) && 3 < qty_remaining ) {
				jQuery( 'body.single-tribe_events .woocommerce .tribe-tickets-remaining' ).hide();
			}
		});
	</script>
	<?php
}
add_action( 'wp_head', 'cliff_etplus_woo_conditional_hide_qty_remaining' );

I think this code may be useful for us, but can you advise on how we might account for up to 4 different ticket types per event? I see the instructions saying "would need to loop instead of use .first()" - can you give an example of what that looks like?
Thanks!

I think I saw this mentioned in another thread- This works for the event page but doesn't translate to the event list page so it's still showing there. Any thoughts on getting that one to react the same way?

I've made this code to show the tickets remaining based on a certain quantity (in this case 20), through custom css I hide all of them by default.

It would be better though to do it purely through php, as this can be seen on load even if I put to delete the element.

Also added the conditional statement so it only runs in the events calendar pages.

function cliff_etplus_woo_conditional_hide_qty_remaining() {
	if (tribe_is_event() || tribe_is_event_category() || tribe_is_in_main_loop() || tribe_is_view() || 'tribe_events' == get_post_type() || is_singular( 'tribe_events' )) {
		wp_enqueue_script( 'jquery' );
		?>
		<script type="text/javascript">
			jQuery(document).ready( function () {
				var qty_remaining_elements = jQuery( '#buy-tickets .tribe-events-tickets tbody .woocommerce .tribe-tickets-remaining .available-stock' );
				jQuery.each(qty_remaining_elements, function( index, value ) {
					var qty_remaining = parseInt( value.innerText, 10 );
					if ( ! isNaN( qty_remaining ) && 20 > qty_remaining ) {
						jQuery( value ).parent().show();
					}
				});
			});
		</script>
		<?php	
	}
}
add_action( 'wp_head', 'cliff_etplus_woo_conditional_hide_qty_remaining' );