logo

Theming drupal commerce product page in Drupal 10

31
January

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.

Need Help ?