How to print the product variation separately from the submit/pay button in a Commerce add to cart form?

Question

I want to put the calculated product price between the "product variation" select widget and the "pay" button.

In commerce-product.html.twig (my products display an add to cart form on the product itself), I have this code:

<article{{ attributes }}>
  <h2>{{ product.title }}</h2>
  {{ product|without('title', 'variation_price' }}
  {{ product.variation_price }}
</article>

variation_price is the calculated price.

1. What is the name of the variable that contains the product variation select widget? Answer: product.variations
2. How can I place the submit/pay button separately from the variation type selection widget? Answer: ??

I tried using kint to debug but it broke my site. (And then people on this site kindly explained how to fix it.) So I now understand that the variable containing the widget that shows the variations is named product.variations, and this is actually the "Add to cart" form (since that is what I set the display widget to in the UI).

So I guess I need to print the "Add to cart" form twice, and in one instance show the submit button, and in the other instance show the select widget... But how do I do that?

I looked at the twig debug theme suggestions but they don't give me a template for the "Add to cart" form:

<!-- FILE NAME SUGGESTIONS:
   * field--commerce-product--variations--contenttype.html.twig
   * field--commerce-product--variations.html.twig
   * field--commerce-product--contenttype.html.twig
   * field--variations.html.twig
   * field--entity-reference.html.twig
   x field.html.twig

Answer 1

This is how I fixed this issue:

Added this preprocess function in my .theme file

function YOURTHEME_preprocess_commerce_product(&$variables) {

   // Get the commerce product.
   $product = $variables['elements']['#commerce_product'];
   // Pass the price.
   $variables['price'] = $product->variations->entity->getPrice();
}

And in my twig file I print the price like this:

{{ price|commerce_price_format }}

Answer 2

I couldn't figure out how to do this in a twig template, but it can be done in hook_form_alter():

/**
 * Implements hook_form_FORM_ID_alter().
 * If necessary, you can target specific products like this:
 * (product with ID of 2)
 * function MYMODULE_form_commerce_order_item_add_to_cart_form_commerce_product_2_alter(array &$form, FormStateInterface $form_state, $form_id) {
 */
function MYMODULE_form_commerce_order_item_add_to_cart_form_alter(array &$form, FormStateInterface $form_state, $form_id) {
  // Text shown between variations widget and submit buttons.
  $form['placeholder']['#markup'] = '<p>' . t('This is my message.') . '</p>';
}

Answer 3

Since the add to cart form is bundled with the product variations I have it working using the following in my commerce-product.html.twig template.

<article{{ attributes }}>
      {{ product.title }}
      {{ product.body }}
      {{ product.variation_price }}
      {{ product.variations }}  // show the add to cart button
</article>

Answer 4

I would further add that if you are adding custom attributes and wish to access those values in twig, follow the accepted answer and debug with kint like this from your theme/module_preprocess_template:

  ksm($product,'shows that we have one product to examine - notice array (1)');
  ksm($product->getVariationIds(),'this is $product->getVariationIds()');
  ksm($product->getVariations()[0]->getAttributeValues(),'this is $product->getVariations()[0]->getAttributeValues()'); 
  ksm($product->getVariations()[0]->getAttributeFieldNames(),' this is $product->getVariations()[0]->getAttributeFieldNames()'); 
  ksm($product->getVariations()[0]->getAttributeValue('my_target_attribute')->getName(),"found value at \$product->getVariations)[0]->getAttributeValue('my_target_attribute')->getName()");

Then proceed with assigning value to variables:

$variables['my_target_attribute'] = $product->getVariations()[0]->getAttributeValue('my_target_attribute')->getName();

You'd then be able to print my_target_attribute in your twig/template as:

{{ my_target_attribute }}