Modify Single Product Page to Move the Add to Cart Form

[jessebrito]

Hello, on a client’s website I want to modify the single product page template to move the Add to Cart form (which also includes the variations form) out of the product summary. Is this possible with the Pro theme?

Reason is on this website we are expecting to have a lot of product customization options by using variations and third-party plugins like YITH Product Add-ons (which is restricted to placing their options inside that form), and we will need more space for display than that is offered by the product summary’s column. We are also letting the customers create and submit quotes via YITH Request a Quote.

I reached out to WooCommerce support and they said since the Pro theme already has a lot of overridden templates I should check with the theme developers.

Ideally I want to move that form below the summary, before the product tabs (which I am also thinking of removing in favour of a unstructured layout).

Is this possible without breaking anything like saving those options to the cart/quote? How can we achieve this?
Please let me know Thank you!

[ruenel]

Hello @jessebrito,

Thanks for writing in!

Assuming that the child theme is set up, please add the following code in your child theme’s functions.php file

// Relocate Add to cart form below the product image and summary
// =============================================================================
function form_start(){
  echo '<div id="form-container" class="x-container mtl mbn" style="clear: both;">';
}

function form_end(){
  echo '</div>';
}

add_action( 'after_setup_theme', 'relocate_addtocart', 11 ); 
function relocate_addtocart() {
  remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
  add_action( 'woocommerce_after_single_product_summary', 'form_start', 1);
  add_action( 'woocommerce_after_single_product_summary', 'woocommerce_template_single_add_to_cart', 2 );
  add_action( 'woocommerce_after_single_product_summary', 'form_end', 3);
}
// =============================================================================

And you’ll have the final layout looks like this:

We would love to know if this has worked for you. Thank you.

[jessebrito]

Hello, thank you for your response! I actually figured out how to do it but didn’t add a div container surrounding it like you have. I shall update my code. Thank you!

[Prasant]

You are most welcome.