Or, embed this snippet using GenerateWP WordPress Plugin.

Download

Clone

Product Loop Custom Sorting Shortcode

Shortcode to call product archive loop sorted by ACF date field.

// Add Shortcode
function custom_shortcode() {

	  <?php
	  //args
	   $today = date( 'Ymd' );
	   $args = array(
		'product_cat' => 'classes-events',
		'post_type'		=> 'product',
		'orderby'     => 'meta_value',  // sort by the event_date
		'order'       => 'asc',         // ascending, so earlier events first
		'meta_query' => array(
		array('key'		=> 'class_date',
		'compare'=> '>=',
		'value'	=> $today,
		
		// optional 'type' => 'date',
	   )
		)
		
	);
	$the_query = new WP_Query( $args );
	?>
	<?php if( $the_query->have_posts() ): ?>
		<div style="
	  max-width: 83.125rem;
	    margin-right: auto;
	    margin-left: auto;
	    display: flex;
	    flex-flow: row wrap;" class="row align-middle">
	<h2>Upcoming Classes</h2>
		<?php while( $the_query->have_posts() ) : $the_query->the_post(); ?>
			
		<div id="" style="display:block;background:#ebeaea !important;color:gray !important; height:2px !important;width:100%; margin:10px">
	  </div>
	  <div class="row">
	
	<div id="class-date-lg-template-custom" class="col-sm-12 col-md-2 col-lg-1 col-xl-1">
						<span style="font-weight:bold;font-size:14px;margin-right:-10px"><?php echo get_field('class_date') ;?></span>
						</div>
	<div class="col-sm-12 col-md-7 col-lg-8 col-xl-8">
						
					<h2 class="" style="font-size:22px;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
					<!-- Get Categories -->
					<p><?php the_excerpt(); ?></p>
					<a style="margin-bottom:5px;" class="ul-linked-txt" href="<?php the_permalink(); ?>">More Info</a>
	</div>
						
	<div class="col-sm-12 col-md-3 col-lg-3 col-xl-3">
	<a href="<?php the_permalink(); ?>">  <img style="width:100%;height:auto;margin-top:10px" src="<?php the_post_thumbnail_url('large'); ?>" /></a>
	</div>
	
	</div> <!-- End Row -->
		<?php endwhile; ?>
	</div> <!-- End Container -->
	<?php endif; ?>
	
	<?php wp_reset_query();	 // Restore global post data changed by the_post(). 

}
add_shortcode( '', 'custom_shortcode' );