Most Used Categories

Web Development , Learn Magento Framework

Magento2 product layout

Product layouts

Edit on GitHubLog an Issue

This topic provides information about product layouts files. Magento allows you to customize view pages for all product types in the common layout files. It is also possible to perform the customization for a particular product type or even for a concrete product page by Product Entity ID or SKU.

Product view page

LAYOUT FILEDESCRIPTION
catalog_product_view.xmlCommon layout. Affects all product types
catalog_product_view_type_bundle.xmlLayout from this file is applied to bundle product only
catalog_product_view_type_configurable.xmlLayout from this file is applied to configurable product only
catalog_product_view_type_downloadable.xmlLayout from this file is applied to downloadable product only
catalog_product_view_type_grouped.xmlLayout from this file is applied to grouped product only
catalog_product_view_type_simple.xmlLayout from this file is applied to simple product only
catalog_product_view_type_virtual.xmlLayout from this file is applied to virtual product only
catalog_product_view_id_{id}.xmlLayout from this file is applied to the specific product by Entity ID value. E.g. catalog_product_view_id_45.xml
catalog_product_view_sku_{sku}.xmlLayout from this file is applied to the specific product by SKU value. E.g. catalog_product_view_sku_24-WG080.xml

Customize product view pages

Use containers on the product page to structure content in the layout. You can reference the container and add blocks to it.

Containers assign content structure to a page using container tags within a layout XML file. A container has no additional content except the content of included elements. Examples of containers include:

  • product.info.main
  • product.info.price
  • product.info.stock.sku
  • product.info.form.content
  • product.info.extrahint
  • product.info.social
  • product.info.media

Example


<move element="product.info.social" destination="product.info.main" before="product.info.price"

Checkout cart configure page

LAYOUT FILEDESCRIPTION
checkout_cart_configure.xmlCommon layout. Affects all product types
checkout_cart_configure_type_bundle.xmlLayout from this file is applied to bundle product only
checkout_cart_configure_type_configurable.xmlLayout from this file is applied to configurable product only
checkout_cart_configure_type_downloadable.xmlLayout from this file is applied to downloadable product only
checkout_cart_configure_type_simple.xmlLayout from this file is applied to simple product only
checkout_cart_configure_id_{id}.xmlLayout from this file is applied to the specific product by Entity ID value. E.g. checkout_cart_configure_id_45.xml
checkout_cart_configure_sku_{sku}.xmlLayout from this file is applied to the specific product by SKU value. E.g. checkout_cart_configure_sku_24-WG080.xml
checkout_cart_item_renderers.xmlLayout from this file is applied to renderer’s cart page items

Wishlist item configure page

LAYOUT FILEDESCRIPTION
wishlist_index_configure.xmlCommon layout. Affects all product types
wishlist_index_configure_type_bundle.xmlLayout from this file is applied to bundle product only
wishlist_index_configure_type_configurable.xmlLayout from this file is applied to configurable product only
wishlist_index_configure_type_downloadable.xmlLayout from this file is applied to downloadable product only
wishlist_index_configure_type_grouped.xmlLayout from this file is applied to grouped product only
wishlist_index_configure_type_simple.xmlLayout from this file is applied to simple product only
wishlist_index_configure_id_{id}.xmlLayout from this file is applied to the specific product by Entity ID value. E.g. wishlist_index_configure_id_45.xml
wishlist_index_configure_sku_{sku}.xmlLayout from this file is applied to the specific product by SKU value. E.g. wishlist_index_configure_sku_24-WG080.xml

For setting a custom layout on specific category, product, and CMS pages, see Common layout customization tasks.

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *