No one seems to have the answer to this. I literally just want to move my cart from the default header position in the RWD theme into my navigation instead. How can this be done? thank you

up vote 2 down vote accepted

You will need to do a bit of restyling with CSS and possibly make HTML changes to the cart template but here is how you can move the cart to the end of the navigation in Magento RWD theme.

In your theme's layout file add the following:

<default>
    <reference name="header">
        <action method="unsetChild">
            <name>minicart_head</name>
        </action>
    </reference>
    <reference name="catalog.topnav">
        <action method="insert">
            <name>minicart_head</name>
        </action>
    </reference>
</default>

This will move the block from the header block into the navigation block. You then need to copy the template "page/html/topmenu.phtml" into your theme and output the "minicart_head" child block within an li.

<?php $_menu = $this->getHtml('level-top') ?>

<?php if($_menu): ?>
    <nav id="nav">
        <ol class="nav-primary">
            <?php echo $_menu ?>
            <li class="header-minicart">
                <?php echo $this->getChildHtml('minicart_head'); ?>
            </li>
        </ol>
    </nav>
<?php endif ?>

See below screenshot of it working in RWD. As mentioned you will need to make some CSS changes.

enter image description here

  • Everything is working fine but I was wondering you you could recommend any css. Heres how my nav looked before: dl.dropboxusercontent.com/u/171478031/… And here it is after moving the cart: dl.dropboxusercontent.com/u/171478031/… I just want it to sit all the way on the right at the same width and height as all of the other nav items as seen in the first image. Thanks – Oli Tuck Mar 24 '16 at 10:46
  • Well without seeing the page I am gonna have a rough guess. You would need to style .header-minicart element and remove the background colour. You would also need to set label colour to white and possibly fix the line height. You might also want to check on mobile. – Colin Murphy Mar 24 '16 at 12:56
  • dl.dropboxusercontent.com/u/171478031/… I ended up getting this. I didnt have to change line height though for some reason as soon as i did float:right it went over to the right and changed into the correct height – Oli Tuck Mar 24 '16 at 13:24
  • So its working ? :) – Colin Murphy Mar 24 '16 at 13:32
  • 1
    What you need to do is edit the CSS where the #nav element is hidden and do something like #nav li:(not:.header-mini-cart) { display: none; } – Colin Murphy Mar 24 '16 at 17:42

Put below code in your catalog.xml layout file where navigation layout is defined or wherever you want to show the header cart details.

            <block type="checkout/cart_sidebar" name="minicart_content" template="checkout/cart/minicart/items.phtml">
                <action method="addItemRender"><type>default</type><block>checkout/cart_item_renderer</block><template>checkout/cart/minicart/default.phtml</template></action>
                <action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/minicart/default.phtml</template></action>
                <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/minicart/default.phtml</template></action>
                <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/minicart/default.phtml</template></action>

                <block type="core/text_list" name="cart_sidebar.cart_promotion" as="cart_promotion" translate="label" module="checkout">
                    <label>Mini-cart promotion block</label>
                </block>
                <block type="core/text_list" name="cart_sidebar.extra_actions" as="extra_actions" translate="label" module="checkout">
                    <label>Shopping Cart Sidebar Extra Actions</label>
                </block>
            </block>

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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