3

In custom theme how to customize a sidebar by our requirement in product detail page.

please refer the screen shot enter image description here

3

Use this code in your /app/design/frontend/[Vendor]/[Themename]/Magento_Catalog/layout/catalog_product_view.xml to add additional sidebar in your product details page

<referenceContainer name="sidebar.additional">
    <block class="Magento\Catalog\Block\Product\View" name="product_view_custom_block" before="-" template="Magento_Catalog::product/view/custom_block.phtml"/>
</referenceContainer>

And customized it using following way

<move element="catalog.product.related" destination="sidebar.additional" after="product_view_custom_block"/>
<referenceBlock name="catalog.compare.sidebar" remove="true" />
<referenceBlock name="wishlist_sidebar" remove="true" />
| improve this answer | |
  • I will check and update you in few mins @aasim – divya sekar Jan 30 '19 at 5:56
  • Please don't forget to clear cache after change in layout xml files – Aasim Goriya Jan 30 '19 at 6:02
2

There are different solution of customising sider of product page.

First you need to create a module or check catalog catalog_product_view.xml in your module or theme frontend layout folder.

Exact location layout files:

For Module: app\code\Vendor\Module\view\frontend\layout\catalog_product_view.xml For theme: app\design\frontend\Vendor\theme\Magento_Catalog\layout\catalog_product_view.xml

Now if you want to remove existing block from sidebar:

<?xml version="1.0"?>
<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="catalog.compare.sidebar" remove="true" />
        <referenceBlock name="wishlist_sidebar" remove="true" />
    </body>
</page>

Now if you want remove block and add new phtml file for customization it will look like this.

<?xml version="1.0"?>
<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="catalog.compare.sidebar" remove="true" />
        <referenceBlock name="wishlist_sidebar" remove="true" />
        <referenceContainer name="sidebar.additional">
            <block class="Magento\Framework\View\Element\Template" name="product_view_custom_block" before="-" template="Magento_Catalog::product/view/custom_block.phtml"/>
        </referenceContainer>
    </body>
</page>

You are also able to add static block to so that you are able to manage this block from admin for this you xml look like this.

<?xml version="1.0"?>
<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="catalog.compare.sidebar" remove="true" />
        <referenceBlock name="wishlist_sidebar" remove="true" />
        <referenceContainer name="sidebar.additional">
            <block class="Magento\Cms\Block\Block" name="custom_block">
                <arguments>
                    <argument name="block_id" xsi:type="string">custom_block</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

Note: custom_block is block identifier (Admin->Content->Block) you need to create new block with this identifier.

| improve this answer | |
1

if file exist then open below file otherwise create

/app/design/frontend/{Vendor}/{Themename}/Magento_Catalog/layout/catalog_product_view.xml

and just add

<referenceBlock name="catalog.compare.sidebar" remove="true" />
<referenceBlock name="wishlist_sidebar" remove="true" />
| improve this answer | |
  • its simple and works – divya sekar Jan 30 '19 at 6:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.