shortcode.php

<?php
/**
 * HTML Template for Order Meal Selection
 *
 * @package woocommerce-cote
 */

function cote_meals( $meal_type, $section_title, $section_image ) {
	$meals = get_post_meta( get_the_ID(), $meal_type, true );
	$title = get_post_meta( get_the_ID(), $section_title, true );
	$thumbnail = get_post_meta( get_the_ID(), $section_image, true );
	$image = wp_get_attachment_image( $thumbnail, 'order_page' );
	?>

		<?php echo $image;?>
		<div class="category-info">
			<h3><?php echo $title; ?></h3>
			<ul>
				<?php foreach ( $meals as $meal ) { ?>
					<li data-price="<?php the_field( 'price', $meal ); ?>" data-id="<?php esc_attr_e( $meal ); ?>">
						<span class="quantity-increase" data-id="<?php esc_attr_e( $meal ); ?>">+</span>

						<input type="number" class="quantity input-no-spinner input-fix-mousewheel" data-id="<?php esc_attr_e( $meal ); ?>" min="0" max="99" value="" />

						<span class="quantity-decrease" data-id="<?php esc_attr_e( $meal ); ?>">-</span>
						<span class="product-title"><?php esc_html_e( get_the_title( $meal ) ); ?></span>
						<div class="more-info">?
							<div class="tooltip">
								<?php the_field( 'tooltip', $meal ); ?>
							</div>
						</div>

					</li>
				<?php } // endforeach $meals as $meal ?>
			</ul>
		</div>

<?php
}

?>
<div class="cote-content-header" data-delivery-id="<?php the_id(); ?>">
	<h2>It's Time To Order</h2>
	<p>Order By: <?php the_field( 'cote_order_by_date' );?> @ 11PM</p>
	<p>Delivery Date: <?php the_field( 'cote_delivery_date' );?></p>
	<a href="#">Need to cancel your order?</a>
</div>

<div class='cote-select-meals'>
	<?php cote_meals( 'cote_meals', 'cote_meals_section_title', 'cote_meals_image' );?>
	<?php cote_meals( 'cote_soups', 'cote_soups_section_title', 'cote_soups_image' );?>
	<?php cote_meals( 'cote_snacks', 'cote_snacks_section_title', 'cote_snacks_image' );?>

	<br style="clear: both;"  />
</div>

<div class="cote-order-bar">
	Order total: <input id="total-order-items" type="text" value="0 items" readonly />
	<input id="total-order-cost" type="text" value="$0" readonly />
	<button id="mealCheckout">Checkout</button>
</div>