Move Cross Sells Below Basket Totals

Support
#1

Hi there,

I’ve just updated this site: http://macangusdesigns.com and now the cross sells in the cart are displaying above the basket details and proceed to checkout button.

Can you please help me move them below?
Many thanks,
Matthew

#2

Hi Matthew

Please provide a screenshot to clarify the issue.

Thank you

#3

Hi thanks for your quick response. I took two screenshots because I’ve also just noticed the upsells are displaying full size in one column, rather than small in a three column row.

So can I move the basket totals and 'proceed to checkout 'button above the upsells and put the upsells into one row please?
Thanks for your help.
Cheers,
Matt


#4

Hi there,

Thanks for writing in.

Looks like you updated your Wordpress and Woocommerce but the theme and cornerstone remain in 4.0 which is a bit cold. Usually, if you update any on your site, you will have to update other features to prevent compatibility issue, so you have two options.

  1. Restore your site so it will still use the compatible Wordpress and Woocommerce for your existing X 4.0
  2. Or, update your X theme and cornerstone as well

But if you choose option 2, there is no assurance that it will work without any issue. That’s because you’re jumping from very old version to the latest one where there is the great gap between features. This is the reason you shouldn’t update your site without testing, it could cause many issues. But since you already updated your Wordpress and Woocommerce, then there is no going back unless you’ll restore your site.

Once this is okay, we can then proceed with the initial issue. That’s because fixing has no use if you’re going to update your theme due to other incompatibilities.

Thanks!

#5

Hi there,

Okay, makes sense. I’ll speak to the client.
Thanks for your help.
Cheers,
Matthew

#6

For anyone else who has this issue, this code when placed in functions.php will switch off the cross sells, because the customiser options don’t when using an old X with a new Wordpress:

// Remove cross-sells at cart
 remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
#7

You’re welcome Matthew :slight_smile:

#8

Hi there,

So I’ve updated X and Cornerstone, but I still have the same issues:

  • the upsells in the cart are appearing as full size images in separate rows rather than small and on one row
  • the upsells in the cart appear above the cart details and the Proceed to Checkout button, I would like to move them to below if possible
  • as a side note, the upsells, cross sells etc were all turned off in Customiser though this didn’t switch them off, any idea why?

Here’s the link: http://macangusdesigns.com/cart/
Thanks for your help.
Cheers,
Matt

#9

Hi there,

I couldn’t login with or without asterisks. It says password is incorrect. And please update your theme first, cornerstone is updated but not the theme.

Plus, looks like the issue is caused by custom code that wraps the item with link. Please provide your FTP login credentials as well.

Thanks!

#10

Hi Rad,

Thanks for your reply. Your secure notes won’t display asterisks so I had to change the password to exclamation marks. I’ll post the updated password in a new secure note.
Thanks,
Matt

#11

Okay, updated X now — I was thinking validating the new version would upgrade it automatically. Sorry about that.

So that’s fixed two of the issues, if it is possible to move the cross-sells to below the cart details and Proceed to Checkout button, I’d be grateful.

Thanks for your help.
Cheers!
Matt

#12

Hi Matt,

Please try to follow the suggestion here:

Hope this helps.

#13

Thanks Jade, but that didn’t work. Any other ideas?
Thanks for your help.
Cheers,
Matt

#14

Hey Matt,

To do this, just add the following script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.woocommerce-cart .cross-sells').insertAfter('.woocommerce-cart .cart_totals');
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#15

Perfect, thanks very much Nabeel, that’s awesome.

Can I ask another question please?

On the home page of the same site ( http://macangusdesigns.com/ ), the first product should say Commissions underneath it, but it’s obscured somehow and I can’t work out why. Could you have a look please?

Thank you,
Matt

#16

Hi Matt,

Please add this CSS code:

.woocommerce li.product {
    overflow: initial;
}

Let us know how it goes.

Thanks.

#17

Awesome, thanks Bappi, that did the trick.

I’m also having another issue at another site with this blog post: http://flowfabrications.com/project-1/ where the gallery items aren’t displaying in a tight grid, three items per row. I added this code which has worked before on other sites, but now it doesn’t seem to on this one, perhaps now it’s updated:

.gallery .gallery-item .gallery-icon{
    max-height: 250px;
    overflow: hidden;
}

And I’ve just noticed that the main blog post page isn’t displaying the two posts tight on one row, the first post is larger ( http://flowfabrications.com/recent-flow-fabrications-projects/ ). Can you help me with this too please?

Your help hugely appreciated as ever, thank you.
Matt

#18

Hello Matt,

Please add this CSS code:

.gallery .gallery-item .gallery-icon{
    height: 250px !important;
    overflow: hidden;
}
.gallery .gallery-item .gallery-icon img{
    height:100% !important;
}

Let us know how it goes.

Thanks.

#19

Brilliant, thanks Bappi. That fixed the gallery items — do you have a fix for the recent posts page too:

Thank you!
Matt

#20

Hi There,

Please try adding the following CSS rule.

.blog .entry-featured img {
    max-height: 250px;
}

Thanks!