In magento 2 How to customize a sidebar additional in product details page?

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

please refer the screen shot
enter image description here

edited 43 mins ago

Rakesh Donga

731111

asked 1 hour ago

divya sekar

579

add a comment |

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

please refer the screen shot
enter image description here

edited 43 mins ago

Rakesh Donga

731111

asked 1 hour ago

divya sekar

579

add a comment |

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

please refer the screen shot
enter image description here

edited 43 mins ago

Rakesh Donga

731111

asked 1 hour ago

divya sekar

579

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

please refer the screen shot
enter image description here

magento2 product-view

edited 43 mins ago

Rakesh Donga

731111

asked 1 hour ago

divya sekar

579

edited 43 mins ago

Rakesh Donga

731111

asked 1 hour ago

divya sekar

579

edited 43 mins ago

Rakesh Donga

731111

edited 43 mins ago

Rakesh Donga

731111

edited 43 mins ago

Rakesh Donga

731111

asked 1 hour ago

divya sekar

579

asked 1 hour ago

divya sekar

579

asked 1 hour ago

divya sekar

579

add a comment |

3 Answers
3

active

oldest

votes

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="MagentoCatalogBlockProductView" 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" />

edited 51 mins ago

answered 56 mins ago

Aasim Goriya

3,1251734

I will check and update you in few mins @aasim

– divya sekar
49 mins ago

Please don't forget to clear cache after change in layout xml files

– Aasim Goriya
43 mins ago

Its works @aasim thanks

– divya sekar
43 mins ago

add a comment |

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: appcodeVendorModuleviewfrontendlayoutcatalog_product_view.xml
For theme: appdesignfrontendVendorthemeMagento_Cataloglayoutcatalog_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="MagentoFrameworkViewElementTemplate" 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="MagentoCmsBlockBlock" 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.

answered 39 mins ago

Aman Alam

933519

Thanks @aman alam

– divya sekar
37 mins ago

add a comment |

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" />

answered 33 mins ago

Rakesh Donga

731111

its simple and works

– divya sekar
27 mins ago

add a comment |

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f259730%2fin-magento-2-how-to-customize-a-sidebar-additional-in-product-details-page%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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="MagentoCatalogBlockProductView" 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" />

edited 51 mins ago

answered 56 mins ago

Aasim Goriya

3,1251734

I will check and update you in few mins @aasim

– divya sekar
49 mins ago

Please don't forget to clear cache after change in layout xml files

– Aasim Goriya
43 mins ago

Its works @aasim thanks

– divya sekar
43 mins ago

add a comment |

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="MagentoCatalogBlockProductView" 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" />

edited 51 mins ago

answered 56 mins ago

Aasim Goriya

3,1251734

I will check and update you in few mins @aasim

– divya sekar
49 mins ago

Please don't forget to clear cache after change in layout xml files

– Aasim Goriya
43 mins ago

Its works @aasim thanks

– divya sekar
43 mins ago

add a comment |

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="MagentoCatalogBlockProductView" 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" />

edited 51 mins ago

answered 56 mins ago

Aasim Goriya

3,1251734

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="MagentoCatalogBlockProductView" 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" />

edited 51 mins ago

answered 56 mins ago

Aasim Goriya

3,1251734

edited 51 mins ago

answered 56 mins ago

Aasim Goriya

3,1251734

answered 56 mins ago

Aasim Goriya

3,1251734

answered 56 mins ago

Aasim Goriya

3,1251734

I will check and update you in few mins @aasim

– divya sekar
49 mins ago

Please don't forget to clear cache after change in layout xml files

– Aasim Goriya
43 mins ago

Its works @aasim thanks

– divya sekar
43 mins ago

add a comment |

I will check and update you in few mins @aasim

– divya sekar
49 mins ago

Please don't forget to clear cache after change in layout xml files

– Aasim Goriya
43 mins ago

Its works @aasim thanks

– divya sekar
43 mins ago

I will check and update you in few mins @aasim

– divya sekar
49 mins ago

Please don't forget to clear cache after change in layout xml files

– Aasim Goriya
43 mins ago

Its works @aasim thanks

– divya sekar
43 mins ago

add a comment |

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: appcodeVendorModuleviewfrontendlayoutcatalog_product_view.xml
For theme: appdesignfrontendVendorthemeMagento_Cataloglayoutcatalog_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="MagentoFrameworkViewElementTemplate" 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="MagentoCmsBlockBlock" 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.

answered 39 mins ago

Aman Alam

933519

Thanks @aman alam

– divya sekar
37 mins ago

add a comment |

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: appcodeVendorModuleviewfrontendlayoutcatalog_product_view.xml
For theme: appdesignfrontendVendorthemeMagento_Cataloglayoutcatalog_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="MagentoFrameworkViewElementTemplate" 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="MagentoCmsBlockBlock" 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.

answered 39 mins ago

Aman Alam

933519

Thanks @aman alam

– divya sekar
37 mins ago

add a comment |

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: appcodeVendorModuleviewfrontendlayoutcatalog_product_view.xml
For theme: appdesignfrontendVendorthemeMagento_Cataloglayoutcatalog_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="MagentoFrameworkViewElementTemplate" 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="MagentoCmsBlockBlock" 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.

answered 39 mins ago

Aman Alam

933519

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: appcodeVendorModuleviewfrontendlayoutcatalog_product_view.xml
For theme: appdesignfrontendVendorthemeMagento_Cataloglayoutcatalog_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="MagentoFrameworkViewElementTemplate" 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="MagentoCmsBlockBlock" 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.

answered 39 mins ago

Aman Alam

933519

answered 39 mins ago

Aman Alam

933519

answered 39 mins ago

Aman Alam

933519

answered 39 mins ago

Aman Alam

933519

Thanks @aman alam

– divya sekar
37 mins ago

add a comment |

Thanks @aman alam

– divya sekar
37 mins ago

Thanks @aman alam

– divya sekar
37 mins ago

add a comment |

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" />

answered 33 mins ago

Rakesh Donga

731111

its simple and works

– divya sekar
27 mins ago

add a comment |

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" />

answered 33 mins ago

Rakesh Donga

731111

its simple and works

– divya sekar
27 mins ago

add a comment |

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" />

answered 33 mins ago

Rakesh Donga

731111

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" />

answered 33 mins ago

Rakesh Donga

731111

answered 33 mins ago

Rakesh Donga

731111

answered 33 mins ago

Rakesh Donga

731111

answered 33 mins ago

Rakesh Donga

731111

its simple and works

– divya sekar
27 mins ago

add a comment |

its simple and works

– divya sekar
27 mins ago

its simple and works

– divya sekar
27 mins ago

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Magento Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Sstrhsrtj