Substitute Pre-Registration for Add to Cart – WooCommerce + Gravity Forms + ACF

During an introductory phase, Masterclass products at GBES.com are offered to users with an option to pre-register – or “save their spot.” 

A Save Your Spot widget, enabled by template tag within a product-single template-part, coded separately replaces the default product-sidebar add-to-cart. On click, the screen animates to a position above a Pre-Registration Gravity Form.

The form is selectable via Advanced Custom Field. The same form must be emplaced where needed in product content for the widget to function as expected.

/** 
 * Get the "Reserve Your Spot" Add-to-Cart substitute for V5 MasterClass pre-sale 
 * Used in template-part product-single.php
 * @param object $product WooCommerce $product object
 * @note CSS styling included inline to override GBES theme styles for product-purchase sidebar
 */
function gbes_get_v5_masterclass_a2c( $product ) {
	
	$product_id = $product->get_id() ; 
	
	$form_target = get_field( 'pre-registration_form' ) ?: '' ; 
	
	ob_start() ;
	
	echo '<div id="masterclass-a2c" class="masterclass-a2c">' ;
	
	echo '<h4 style="text-align:center; text-transform:none;">Register Today &<br />Pay Later</h4>' ;

	woocommerce_template_single_price(); 
	
	echo '<a id="save-your-spot" href="#gform_wrapper_' . $form_target .'" class="masterclass-a2c__button button product_type_bundle add_to_cart_button ajax_add_to_cart add-to-cart-button-color" data-target="#gform_wrapper_' . $form_target .'">Save Your Spot</a>' ; 
	
	echo '<p class="masterclass-a2c__note" style="line-height: 1.2;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;">Limited Seats Available</p>' ; 
	
	echo '<hr>' ;
	
	echo '</div>' ;
		
	echo ob_get_clean() ; 
	
}

jQuery( document ).ready( function( $ ) { 
	
	$( '#save-your-spot' ).on( 'click', function(e) { 
	
		e.preventDefault();
		
		var offset = 400 ;
		var target = $( this ).data( 'target' ) ;
		
		window.location.hash = target;
		
		$('html, body').stop().animate({
			'scrollTop': $(target).offset().top - 400
		}, 500, 'swing' );
		
	});
	
});