{"id":2113,"date":"2024-11-05T15:57:39","date_gmt":"2024-11-05T13:57:39","guid":{"rendered":"https:\/\/plumrocket.com\/learn\/?p=2113"},"modified":"2024-11-05T17:11:44","modified_gmt":"2024-11-05T15:11:44","slug":"how-to-customize-product-page-layout-in-magento-2","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/learn\/magento-2-customize-product-page","title":{"rendered":"How to Customize Product Page Layout in Magento 2"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Often, websites need tailored design solutions to create a user-friendly website that makes sales. However, pre-built modules or themes can\u2019t always fulfill all the website\u2019s needs and create a seamless user experience. In such cases, the best decision is customization.<\/p>\n\n\n\n

One of the most frequent requests is to customize the Magento 2 product page. This can be done in two ways: by creating a custom module or a custom theme. While both methods are useful and effective, this tutorial will focus on the second method. Using a custom theme is often the best option if the primary goal is to alter the arrangement, style, and general look of your product pages.<\/p>\n\n\n\n

\n

Unlock the full potential of your store with tailored Magento development services<\/a> that meet your unique needs.<\/p>\n<\/div><\/div>\n\n\n\n

Step 1. Create Custom Theme in Magento 2<\/h2>\n\n\n\n

So, let’s create a custom theme to customize the product page.<\/p>\n\n\n\n

  1. Create directories with the following path: app\/design\/\/<\/code>.<\/li>
  2. Create two files in the directory: theme.xml and registration.php<\/code><\/li><\/ol>\n\n\n\n

    Here is the code for the theme.xml file<\/code>:<\/p>\n\n\n\n

    <\/div>
    <?xml version=\"1.0\"?>\n<theme xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Theme\/etc\/theme.xsd\">\n    <title>Custom Theme<\/title>\n    <parent>Magento\/luma<\/parent>\n<\/theme>\n<\/code><\/pre><\/div>\n\n\n\n
    Below is the code for the registration.php<\/code> file:<\/p>\n\n\n\n
    <\/div>
    <?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n    \\Magento\\Framework\\Component\\ComponentRegistrar::THEME,\n    'frontend\/Plumrocket\/Custom_Theme',\n    __DIR__\n);\n<\/code><\/pre><\/div>\n\n\n\n
    1. Execute the following command:<\/li><\/ol>\n\n\n\n
      <\/div>
      php bin\/magento setup:upgrade.<\/code><\/pre><\/div>\n\n\n\n
      1. Apply the new custom theme by going to Content -> Configuration<\/strong> in the admin panel and selecting the desired store view.<\/li><\/ol>\n\n\n\n
        \"Step<\/figure>\n\n\n\n
        Step 2. Enable Template Path Hints<\/h2>\n\n\n\n
        First of all, in order to customize the Magento 2 product page, you need to enable path hints. Path hints is a debugging tool that visually displays the paths to the layout and templates files used to render a page. This significantly reduces the time spent searching for the desired layout\/template file.<\/p>\n\n\n\n
        You can enable path hints by following these steps:<\/p>\n\n\n\n
        1. In the Magneto admin panel, go to Stores > Configuration > Advanced > Developer<\/strong>. <\/strong><\/li>
        2. Under the \u2018Debug\u2019 tab, set the \u201cEnable Template Path Hints for Storefront\u201d <\/strong>to Yes<\/em>.<\/li>
        3. Click the Save Config button. <\/em><\/li>
        4. Clear the cache via System > Cache Management > Flush Cache Storage<\/strong> or by using the php bin\/magento cache:flush<\/code> command.<\/li><\/ol>\n\n\n\n
          This is what the product page will look like with path hints enabled:<\/p>\n\n\n\n
          \"Step<\/figure>\n\n\n\n
          Step 3. Customize Product Page in Magento 2 Using Layout File<\/h2>\n\n\n\n
          There are 2 methods to customize the Magento 2 product page using the layout file: override the existing layout or create a custom product layout file.<\/p>\n\n\n\n
          Depending on the product pages you need to customize, both methods require you to create xml files, and their names may contain a specific product type: catalog_product_view_type_<em>product_type<\/em>.xml<\/code>. Instead of product_type<\/code>, you need to enter the product type you’re customizing. Possible options: simple, configurable, grouped, downloadable, bundle, virtual.<\/p>\n\n\n\n
          However, you can modify the product page not only by its type but also by ID or SKU. All you need to do is specify this ID\/SKU in the file name. For example, to customize the product page with SKU MH07, you need to create a file named catalog_product_view_sku_MH07.xml<\/code>, and for the product page with ID 10, the file name would be catalog_product_view_id_10.xml<\/code>.<\/p>\n\n\n\n
          Method 1. Overriding layout to customize product page<\/h3>\n\n\n\n
          Let’s move from theory to practice. Let\u2019s customize product page for all products, placing the Add to Cart button near the product price and removing the Add to Wish List and Add to Compare buttons:<\/p>\n\n\n\n
          1. Create the file app\/design\/frontend\/Plumrocket\/Custom_Theme\/Magento_Catalog\/layout\/catalog_product_view.xml<\/code>:<\/li><\/ol>\n\n\n\n
            <\/div>
            <?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <move element=\"product.info.addtocart.additional\" destination=\"product.info.main\" after=\"product.info.price\" \/>\n        <referenceBlock name=\"product.info.addto\" remove=\"true\" \/>\n    <\/body>\n<\/page>\n<\/code><\/pre><\/div>\n\n\n\n
            1. Clear the cache and check the result. <\/li><\/ol>\n\n\n\n
              Here is the page before customization:<\/p>\n\n\n\n
              \"Step<\/figure>\n\n\n\n
              Below the page after customization:<\/p>\n\n\n\n
              \"Step<\/figure>\n\n\n\n
              1. To remove the Add to cart button for the product with SKU MH07, you should create the file app\/design\/frontend\/Plumrocket\/Custom_Theme\/Magento_Catalog\/layout\/catalog_product_view_sku_MH07.xml<\/code>:<\/li><\/ol>\n\n\n\n
                <\/div>
                <?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <referenceBlock name=\"product.info.addtocart.additional\" remove=\"true\" \/>\n    <\/body>\n<\/page>\n<\/code><\/pre><\/div>\n\n\n\n
                1. Clear the cache and check the result:<\/li><\/ol>\n\n\n\n
                  \"Step<\/figure>\n\n\n\n
                  Method 2. Creating custom layout to customize product page from admin panel<\/h3>\n\n\n\n
                  This method involves creating a custom layout that can be enabled\/disabled from the admin panel. This allows the administrator to flexibly customize the product page directly from the admin panel. All you have to do is to create the app\/design\/frontend\/Plumrocket\/Custom_Theme\/Magento_Catalog\/layout\/catalog_product_view_selectable__.xml<\/code> file.<\/p>\n\n\n\n
                  For example, let\u2019s customize the product page with SKU MP03:<\/p>\n\n\n\n
                  1. Create  the app\/design\/frontend\/Plumrocket\/Custom_Theme\/Magento_Catalog\/layout\/catalog_product_view_selectable_MP03_custom.xml<\/code> file:<\/li><\/ol>\n\n\n\n
                    <\/div>
                    <?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <referenceBlock name=\"product.info.review\" remove=\"true\"\/>\n    <\/body>\n<\/page>\n<\/code><\/pre><\/div>\n\n\n\n
                    1. Go to Catalog > Products<\/strong> and go to the product settings with SKU MP03. A new option has appeared in the \u201cCustom Layout Update\u201d field under the Design section.<\/li><\/ol>\n\n\n\n
                      \"Step<\/figure>\n\n\n\n
                      If you don\u2019t see it, try changing the Scope to the one that your custom theme applies to.<\/p>\n\n\n\n
                      \"Step<\/figure>\n\n\n\n
                      1. Let’s change the value of the Custom Layout Update field to custom<\/em>:<\/li><\/ol>\n\n\n\n
                        Now, you can go to a storefront and see the result. Here is the Product page view without the custom layout update:<\/p>\n\n\n\n
                        \"Step<\/figure>\n\n\n\n
                        Here is the Product page view with a custom layout update:<\/p>\n\n\n\n
                        \"Step<\/figure>\n\n\n\n
                        I hope you found this tutorial helpful! If you need any assistance with custom Magento development<\/a>, feel free to reach out to us.<\/p>\n","protected":false},"excerpt":{"rendered":"
                        Often, websites need tailored design solutions to create a user-friendly website that makes sales. However, pre-built modules or themes can\u2019t always fulfill all the website\u2019s needs and create a seamless user experience. In such cases, the best decision is customization.<\/p>\n
                        One of the most frequent requests is to customize the Magento 2 product page. This can be done in two ways: by creating a custom module or a custom theme. While both methods are useful and effective, this tutorial will focus on the second method. Using a custom theme is often the best option if the primary goal is to alter the arrangement, style, and general look of your product pages.<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[125,121,123],"tags":[],"yoast_head":"\nHow to Customize Product Page Layout in Magento 2<\/title>\n<meta name=\"description\" content=\"Follow this step-by-step tutorial on how to customize product page layout in Magento 2 to tailor website design to your unique needs and boost sales.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/learn\/magento-2-customize-product-page\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Customize Product Page Layout in Magento 2\" \/>\n<meta property=\"og:description\" content=\"Follow this step-by-step tutorial on how to customize product page layout in Magento 2 to tailor website design to your unique needs and boost sales.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/learn\/magento-2-customize-product-page\" \/>\n<meta property=\"og:site_name\" content=\"Magento Tutorials for Beginners & Professionals\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-05T13:57:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-05T15:11:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/customize-product-page-layout-1-1024x384.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2113"}],"collection":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/comments?post=2113"}],"version-history":[{"count":12,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2113\/revisions"}],"predecessor-version":[{"id":2172,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2113\/revisions\/2172"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/media?parent=2113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/categories?post=2113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/tags?post=2113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}