I want to add a div container with class around the compare ul in the header.

How can I achieve that inside my custom default.xml file?

1 Answer 1


The way to do this, is to remove the element from it's original container, and creating a new container that holds the compare.

This is all done through XML in either files, or if you are on a CMS page, you can use the admin and fill in the layout_update_xml value.

First step would be to find the reference name of the current block, for two reasons. 1. you need the name to remove, and 2, you can copy it so you can use it in another place.

In a custom module you will need to have a view/frontend/layout folder path, and then create a file in it named default.xml

The contents of the file would be something like this:

    <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

            <remove name="[catalog.compare]" />

            <referenceContainer name="[content]">
                <container name="my.new.container" as="my_new_container" htmlTag="div" htmlClass="my-wrapper-class">
                    <block class="[Magento\Cata....\Compare]" name="[catalog.compare]" after="-" template="[template]" />

Where you replace the things between [] with the right values, which you can trace back through enabling showing of template locations, or doing some digging directly in your vendor folder, where the magento-catalog likely holds this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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