Return to previous page

Moving cross sell products in advanced multistep layout.

This topic has 8 replies, 2 voices, and was last updated 13 hours, 2 minutes ago ago by Luca Rossi

ziga32

Participant

November 12, 2024 at 13:46

I’m using and loving your advanced Cart/Checkout layout (Multistep).

But I hava a question regarding Cross sell products. They are hidden / almost invisible in cart.
You need to scroll down to see them, which nobody is going to do.
https://tinyurl.com/29cn3mgn

How can I move them up
https://tinyurl.com/22bazcqt
Here
https://tinyurl.com/26o5fjgn

#422941 Copied Theme version: 9.4.2

7 Answers
Luca Rossi

Support staff

November 13, 2024 at 04:43
Hi @ziga32,

You can use the static block to achieve that. Please add this custom code under functions.php file locates in your child theme:
```
add_action('woocommerce_after_cart_table', 'n2t_woocommerce_cart_collaterals', 999);
function n2t_woocommerce_cart_collaterals(){
    echo do_shortcode('[block id="3289"]');
}
```
The static block should contain the Cross-sell Products element: https://prnt.sc/knz7vSZa0uNU.

Hope it helps!
#423055 Copied
ziga32

Participant

November 13, 2024 at 11:15

It’s working, but I have it set to 4 items, and if a product has 4 items the cross sell in cart is wider than it should be and it does this
https://tinyurl.com/2y45w6az

If I remove one cross sell item it is ok (with an empty slot)
https://tinyurl.com/24p79sv4

#423116 Copied
Luca Rossi

Support staff

November 13, 2024 at 16:17
Hi @ziga32,

Please try adding this custom CSS codes under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
@media (min-width: 980px){
    .woocommerce-cart .etheme-elementor-cart-checkout-page-column.etheme-elementor-cart-page-table.first {
        width: 65%;
    }
    
    .woocommerce-cart .etheme-elementor-cart-checkout-page-column.etheme-elementor-cart-page-totals.last {
        width: 35%;
    }
    
    .woocommerce-cart.cart-checkout-advanced-layout .content-page .products-title {
        margin-top: 0;
    }
}
```
Hope it helps!
#423184 Copied
ziga32

Participant

November 13, 2024 at 16:28

works great on desktop, but mobile version has a huge gap
https://tinyurl.com/27kdaf65

#423191 Copied
Luca Rossi

Support staff

November 13, 2024 at 16:33
Hi @ziga32,

Please also add this custom CSS:
```
@media (max-width: 600px){
    .woocommerce-cart .etheme-elementor-cart-checkout-page-column.etheme-elementor-cart-page-table.first {
        width: 100%;
    }
}
```
Let us know how it goes!
#423194 Copied
ziga32

Participant

November 13, 2024 at 16:46

perfect, many thanx.
maybe you could include this in the next update?

#423198 Copied

Luca Rossi

Support staff

November 14, 2024 at 04:52

Dear @ziga32,

We hope this message finds you well.

If you would like to request the addition of new features or options, we kindly invite you to submit your suggestion on our Taskboard at the following link: https://www.8theme.com/taskboard/. Should your request receive sufficient support from other customers, our development team will carefully consider including it in one of our future updates.

Thank you for your continued support.

Best regards,
The 8Theme Team

#423272 Copied
Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘Moving cross sell products in advanced multistep layout.’' has been successfully resolved, and the topic is now closed for further responses

Moving cross sell products in advanced multistep layout.

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection