Add Customized Tab on Product Web page Magento 2

Right here, we’ll see easy methods to add new customized tab on product view web page for full width design structure choices in Magento 2.

When you have set the full width choices for design structure in your product web page settings, then this weblog will probably be helpful for you. In case you’ve got set choices apart from full width in your product web page settings, then you’ll be able to comply with our different weblog by clicking right here.
Please test the under screenshot for extra clarification:

Earlier than engaged on this, we must find out about Web page Layouts. For clarify examine about web page layouts, you’ll be able to click on right here.

The structure of every web page in your retailer consists of distinct sections, or containers, that outline the header, footer, and content material areas of the web page. Relying on the structure, every web page might need one, two, three columns, or extra. You possibly can consider the structure because the flooring plan of the web page, and assign a particular structure for use because the default for CMS, product, and class pages.

Configure default product layouts

1. On the Admin sidebar, go to Shops > Settings > Configuration.
2. Within the left panel below Common, select Internet.
3. Increase the Default Layouts part.Default Layouts
4. Select the Default Product Format that you simply wish to use for product pages.This setting determines the structure that’s utilized by default for product pages.
   • No structure updates – Format updates should not accessible for product pages.
   • Empty – Makes use of a clean structure for product pages.
   • 1 column – Makes use of a single column structure for product pages.
   • 2 columns with left bar – Makes use of a two-column structure with the sidebar on the left for product pages.
   • 2 columns with proper bar – Makes use of a two-column structure with the sidebar on the appropriate for product pages.
   • 3 columns – Makes use of a three-column structure with sidebars on the left and proper for product pages.

   When Web page Builder is enabled, there are further full width choices accessible. You possibly can then use the Web page Builder content material instruments to design the structure in your product pages.

   • Web page -- Full Width – Makes use of the Web page – Full Width structure for product pages.
   • Class -- Full Width – Makes use of the Class – Full Width structure for product pages.
   • Product -- Full Width – (Really useful) Makes use of the Product – Full Width structure for product pages.
5. When full, click on Save Config.

Steps so as to add customized tab on product web page magento 2

• First, create web page structure file.
  File Path: app/code/Webkul/Take a look at/view/frontend/page_layout/product-full-width.xml

<?xml model="1.0"?>
<structure xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Format/and many others/page_layout.xsd">
   <referenceContainer identify="product.information.particulars.after.wrapper.primary">
        <block class="MagentoFrameworkViewElementTemplate" identify="product.attachments.wrapper" earlier than="product.attributes.wrapper" template="Magento_PageBuilder::catalog/product/view/section_wrapper.phtml">
            <arguments>
                <argument translate="true" identify="title" xsi:kind="string">Demo Tab</argument>
                <argument identify="section_id" xsi:kind="string">demotab</argument>
            </arguments>
            <block class="MagentoCatalogBlockProductView" identify="demo.tab" template="Webkul_Test::demo_tab.phtml" />
        </block>
    </referenceContainer>
</structure>

• Now, create phtml file.
  File Path: app/code/Webkul/Take a look at/view/frontend/templates/demo_tab.phtml

<?php
    // get present product
    $product = $block->getProduct();
    echo $product->getName();
    // Use product in keeping with your requirement
?>

Akash Panwar
1 Badges

16 Might 2023