®Magento Tutorials

Magento how to make product description in full width and manage tabs

To make the product description in full width in Magento, you can edit the layout of the product view page in your theme. This can typically be done by editing the “catalog_product_view.xml” file in the “app/design/frontend/[YOUR_PACKAGE]/[YOUR_THEME]/Magento_Catalog” directory.

You can use the following code to adjust the layout and make the product description full width:


<referenceContainer name=”content”>
<container name=”product.info.main” htmlTag=”div” htmlClass=”product-info-main” before=”-“>
<container name=”product.info.price” label=”Product info auxiliary container” htmlTag=”div” htmlClass=”product-info-price” after=”product.info.review”/>
<block class=”Magento\Catalog\Block\Product\View” name=”product.info.description” template=”Magento_Catalog::product/view/description.phtml” after=”product.info.price”>
<argument name=”at_call” xsi:type=”string”>getShortDescription</argument>
<argument name=”at_code” xsi:type=”string”>short_description</argument>
<argument name=”css_class” xsi:type=”string”>description</argument>
<argument name=”at_label” xsi:type=”string”>none</argument>
<argument name=”title” translate=”true” xsi:type=”string”>Details</argument>

To manage tabs in product view page, you can edit the template file “catalog_product_view.phtml” located in the “app/design/frontend/[YOUR_PACKAGE]/[YOUR_THEME]/Magento_Catalog/templates/product” directory.
You can use the following code to create new tab and add your information,


<div class=”product data items” data-mage-init='{“tabs”:{“openedState”:”active”}}’>
<?= $block->getChildHtml(‘info_tabs’) ?>
<div data-role=”content”>
<div class=”product-new-tab-content”>
<?= __(‘Your Custom Content’) ?>

You need to clear the cache after making any changes to the layout or template files.

Regarding the discount, you can create a shopping cart price rule in the Magento admin panel. Go to “Marketing” > “Promotions” > “Shopping Cart Price Rules”. Click on “Add New Rule” and set the conditions and actions for the rule, such as a percentage discount and customer group.

About zohaibk

We develop useful addons for #E-Commerce and #CRM software to provide extra features.#PrestaShop,#Magento,#SugarCRM,#Vtiger & #Android #apps
View all posts by zohaibk →