First of all, you should find out which file is responsible for displaying the SKU on the product page. The following layout file for the “catalog_product_view.xml” of the Catalog module is responsible for this:
/view/frontend/layout/catalog_product_view.xml
/view/frontend/layout/catalog_product_view.xml
In order to change this file, you need to copy it to the folder with your theme. It is not good to change the original module files; instead, always copy them into your theme. Otherwise, if you update the module, your changes may be deleted:
/Magento_Catalog/layout/catalog_product_view.xml
/Magento_Catalog/layout/catalog_product_view.xml
In this file, we can find a block with the name “product.info.sku”. This block also adds SKU to the product page. It looks the following way:
getSku sku sku default itemprop=”sku”
getSku sku sku default itemprop=”sku”
In order to move any block or container to another place on the page, you need to add the following code to the layout file of your theme:
where
– the name of the element that we want to move (the element can be both a block and a container);
– the name of the element that we want to move our element into.
For example, in order to move the SKU before the product name, you need to use the following code in the layout catalog_product_view.xml file of your theme:
where
before – is an argument that indicates before which element at the destination to insert a portable block (in this case, “-” means that the block will be added before all the elements at the destination). Instead of “before” you can use “after”, which indicates after which element at the destination to insert the portable block.