Theming drupal commerce product page in Drupal 10

Theming drupal commerce product page in Drupal 10

By: Anonymous | Published On: Fri, 01/31/2025 - 18:47

Theming a Drupal Commerce product page involves customizing the Twig templates, CSS, and possibly preprocess functions to control the look and feel of the product display. Here’s a structured approach:

Identify the Template to Override

Drupal uses Twig templates to render product pages. The most relevant template for product pages is:

commerce-product--[product-type].html.twig 

• If your product type is "t-shirt", the template would be:

  commerce-product--t-shirt.html.twig

• The generic fallback template is:

  commerce-product.html.twig

 

Override the Template

 

1. Copy the template from:

   core/modules/commerce/templates/commerce-product.html.twig

   or your theme’s templates/commerce folder.

2. Place it in your theme’s folder:

   themes/custom/yourtheme/templates/commerce/commerce-product--[product-type].html.twig

3. Modify the file as needed. Example:

   twig

   	
   
   	  
   {{ product.title }}
   	  
   {{ product.field_image }}
   	  
   {{ product.price }}
   	  
   {{- product|without('variation_attributes') -}}
   	
   	

4. Clear the cache:

Modify Product Variations Display

If using Product Variations, you may need to override:

commerce-product-variation.html.twig

Modify it similarly to show fields like SKU, Stock, Attributes, etc..

To customize how variations are selected (dropdowns, radio buttons, etc.), you might need to edit:

commerce-product--default.html.twig

Or, override the Commerce Variation Field Widget in commerce-product-variation-add-to-cart-form.html.twig.