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?
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.Sign up to join this community
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
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
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"> <body> <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]" /> </container> </referenceContainer> </body> </page>
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.