0

I want to move the cross sell products in 'view cart' (Magento 1.9.1.0) from the bottom of the right column to the bottom (below the cart contents) of the left column. How can I do this?

2

This can be done in 2 steps:

  1. Move the call to get the crosssell html to the proper place
  2. Update the CSS

Step 1: Look at line 176 in the following file:

app\design\frontend\rwd\default\template\checkout\cart.phtml

You will notice the call to get the crosssell html:

<?php echo $this->getChildHtml('crosssell') ?>

Just cut that code and paste it around line 153 like so:

 </table>
    <script type="text/javascript">decorateTable('shopping-cart-table')</script>
</form>  

<!--paste crosssell here-->
<?php echo $this->getChildHtml('crosssell') ?>

<?php echo $this->getChildHtml('shopping.cart.table.after'); ?>

Obviously do this in your own copy of the file in your custom theme (if you care about updates braking the design in the future)

Step 2: Update the css (either override the current rules or change the current rules and then recompile the scss). currently the css looks like this:

.cart-forms, .cart-totals-wrapper, .crosssell {
  float: right;
  clear: right;
  width: 40%;
  padding-left: 20px;
}

Remove .crosssell from the rule. Add a new rule for .crosssell as follows:

.crosssell {
float: left;
width: 60%;
}
1

My solution, for Magento 1.9:

Just modify the styles.css file (located at /skin/frontend/{your theme}/default/css) removing the .crosssell class from here

 .cart-forms, .cart-totals-wrapper, .crosssell {
  float: right;
  clear: right;
  width: 40%;
  padding-left: 20px;
}

and moving it here

.crosssell {
clear:right;
width:60% !important;
}

Of course, you can modify the .crosssell class according to your needs.

Hope it helps!

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.