[Resolved] Mini Cart

[Jacob]

hey all
There are some problems with the mini cart.

1. I’m adding a picture to what I want to change/fix

View post on imgur.com

2. I added some CSS to design the mini cart
The design of the mini cart also works on the mobile.
The problem is that it only works on the (shop) page
On the home page it doesn’t work. As seen because of the elementor.
I designed the header in elementor.
But even so when I click on the shopping cart. (Built in elementor)
Only on the page (shop) it looks the same. On the home page. It looks different
I’m adding a picture Home Page Mobile

View post on imgur.com

Many thanks to the assistants

[David]

Hi there,

can you provide a link to your site so we can take a look at whats required for #1.

You can edit your original topic and add your link to the Site URL field to share it privately.

#2 The GP Mini cart relies on the GP Navigation to be present, if you have replaced it with Elementor then there isn’t anything we can do about that.

[Jacob]

Hi David
I do not want to replace GP Navigation
Like I said above .. on the (Shop) page. The mini cart works great
On the homepage everything is messy. I’m talking about the display on Mobile

[Tom]

Hi there,

This should help to add the border and move the image to the right:

#wc-mini-cart .woocommerce ul.cart_list li img {
    position: absolute;
    right: 0;
}

.woocommerce.widget_shopping_cart .cart_list li:not(last-child) {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
}

Our mini cart doesn’t work/display on mobile. It looks like you’re using Elementor to build an off canvas panel?

[Jacob]

hey Tom
This CSS Makes me a problem.

#wc-mini-cart .woocommerce ul.cart_list li img {
    position: absolute;
    right: 0;
}

But this CSS fixes that

#wc-mini-cart .woocommerce ul.cart_list li img {
    position: static;
	float: right;
}

“*mini cart doesn’t work/display on mobile*”
I understand that. But how does it make sense that it only works on a page (Shop) on Mobile?
by the way. You need to look at the site on RTL
I don’t think you can see the difference in LTR

-looks like you’re using Elementor to build an off canvas panel?-
Yes is on off.
i use Elementor to build the header. but i use code snippets to snippe elementor templates

View post on imgur.com

[Tom]

Hi there,

It shouldn’t work at all on mobile. Right now, when I view your Shop page on mobile, I can see the cart icon in the header. When I tap the icon, it opens the off canvas panel.

Can you maybe show me a screenshot of the issue you’re seeing on mobile right now so I can see where to tap/what to look for?

[Jacob]

Hey Tom
screenshot

View post on imgur.com

[Tom]

Have you checked with Elementor on this? It looks like some of their CSS isn’t loading. GeneratePress itself doesn’t have any effect on their Off-Canvas panel/the standard WooCommerce mini cart widget.

[Jacob]

Yes I contacted their support. Before I turned to support here.
No matter how much I sent them screenshots.
They tell me that it looks the same. On both the home page and the Shop page.
They sent me pictures of what it looked like. And in the screenshots they sent me it didn’t look the same.
I feel like Make me laugh.
And I told them that

All the CSS I did only works on the Shop Mobile page
It is understandable to me why it should be this way

[Tom]

It looks good to me right now – is it still an issue for you?

Unfortunately, I don’t know the inner-workings of the Elementor code, so it’s very hard for me to debug.

[Jacob]

Sorry for the late response. Thanks Tom
In the end I was able to solve it.
Everything looked great. I rebuilt the mini cart on both the Shop page and the Home page. I added a lot of CSS
But still, I need help
product title limitation
For example, I did

font-weight: normal;
    text-transform: none;
    line-height: 2.5ex;
    height: 5ex;
    overflow: hidden;
    font-size: 20px;

The intention is to limit the product title in a mini cart
In addition to this I wanted to know, is it possible to add a mini cart plus / minus to the quantity

Thank you very much for your patience and help

[Tom]

It would require quite a bit of custom development to add the plus/minus to the mini cart, unfortunately. I’ll look to see how complicated it would be to add as an option in the plugin.

As for the product title limiting, that CSS look good – what about it isn’t working?

[Jacob]

Yes is working but only on the page
unfortunately its not working on mini cart title limiting

I replaced the CSS code with PHP

add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );
function shorten_woo_product_title( $title, $id ) {
    if ( ! is_singular( array( 'product' ) ) && get_post_type( $id ) === 'product' ) {
        return wp_trim_words( $title, 10, '...' ); // change last number to the number of words you want
    } else {
        return $title;
    }
}

It works great!

[Tom]

Nice! Thanks for sharing 🙂

[Jacob]

Hey Tom
I was able to solve the problem.
I leave here what I did. For those looking for an answer

Woocommerce title product PHP (snippet code)

add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );
function shorten_woo_product_title( $title, $id ) {
    if ( ! is_singular( array( 'product' ) ) && get_post_type( $id ) === 'product' ) {
        return wp_trim_words( $title, 10, '...' ); // change last number to the number of words you want
    } else {
        return $title;
    }
}

Woocommerce title product Mini-Cart CSS

#wc-mini-cart .woocommerce-mini-cart-item a{
    font-size: 15px;
    text-transform: uppercase;
    font-weight:bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Done =)

[Author]

Posts