[Resolved] Mini Cart

Home Forums Support Mini Cart

  • This topic has 15 replies, 3 voices, and was last updated 4 months ago by Tom.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1174870
    Kobi

    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

    #1175305
    David
    Staff
    Customer Support

    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.

    #1175336
    Kobi

    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

    #1175807
    Tom
    Lead Developer
    Lead Developer

    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?

    #1175902
    Kobi

    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

    #1176624
    Tom
    Lead Developer
    Lead Developer

    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?

    #1176673
    Kobi

    Hey Tom
    screenshot

    View post on imgur.com

    #1176801
    Tom
    Lead Developer
    Lead Developer

    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.

    #1177064
    Kobi

    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

    #1177775
    Tom
    Lead Developer
    Lead Developer

    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.

    #1189184
    Kobi

    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

    #1189794
    Tom
    Lead Developer
    Lead Developer

    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?

    #1189812
    Kobi

    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!

    #1190208
    Tom
    Lead Developer
    Lead Developer
    #1190951
    Kobi

    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 =)

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.