31
January
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:
Drupal uses Twig templates to render product pages. The most relevant template for product pages is:
commerce-product--[product-type].html.twig
commerce-product--t-shirt.html.twig
commerce-product.html.twig
Copy the template from:
core/modules/commerce/templates/commerce-product.html.twig
or your theme’s templates/commerce
folder.
Place it in your theme’s folder:
themes/custom/yourtheme/templates/commerce/commerce-product--[product-type].html.twig
Modify the file as needed. Example:
twig
{{ product.title }}
{{ product.field_image }}
{{ product.price }}
{{- product|without('variation_attributes') -}}
Clear the cache:
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
.
© 2023.ZedAngle. All Rights Reserved.