Paddings on Mini-Cart not showing

[fabiofava]

Hey there, some time ago I had an issue on the Mini-Cart’s padding not showing. I did what I was oriented to do, but the Mini-Cart Paddings are still not being shown on my site https://staging.voelivre.net/ (this is the Staging of it, actually being accessed by ThemeCo Support Staff for other reasons). I’d like to discover how to have paddings appearing there, thanks!

[marc_a]

Hey @fabiofava,

Thanks for reaching out!

I check your website and I don’t see any paddings on it! To add a padding you need to set it in your dropdown element.

Hope that helps.

[fabiofava]

Thank you @marc_a

I’ve done on the Customize area (as oriented by the Themeco Staff). It was on the element before, triggering other types of errors. Please try removing the Custom CSS added by another Themeco Supporter, add them on that Padding Settings, and check the results.

I’ve tried all ways, and the results are always no padding, or mis-arrangemenrt on the mini-cart. When it gets solved, just after the no-paddings or errors are there again. I’m starting to become frustrated, since each Supporter tells me to do other thing. All no results.

[tristup]

Hi @fabiofava,

You have a separate problem and that is why the different solutions are given. I have checked your Mini Cart and found it is showing proper padding if any product is already added to it. If that is empty, it does not shows any padding. If that is the case you are referring to, you need to add the following code to the Header CSS.

.x-mini-cart .widget_shopping_cart_content p.woocommerce-mini-cart__empty-message
{
    margin:15px !important;
}

NOTE: I went ahead and added the above code to your staging server and it worked perfectly fine.

Hope it helps.
Thanks

[fabiofava]

Thanks @tristup I had this from another supporter instead:

$el.x-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart
{
    padding:15px !important;
}

Should I keep the old one and add the new one, or remove the old one and keep just the one you’ve suggested? Thanks!

[fabiofava]

Hey @tristup

With your custom CSS, when something is added to the cart, the mini-cart shows no padding around the mini-cart (there should be some padding around the buttons and the whole mini-cart)…

I’ll keep looking forward to some final solution, to have padding at the mini-cart, being the shopping cart empty or not. I hope we can find some final code that works on every situation (empty cart or not).

Thank you very much for your support

[tristup]

Hi @fabiofava,

You need to keep all those custom CSS codes as those are for different purposes. And by adding the last CSS code the padding around the buttons is applied.

I would suggest you check once by clearing all types of cache including the Style Cache from Cornerstone > Settings > System > Clear Style Cache and check in the incognito/private mode of the browser.

Thanks

[fabiofava]

Hey @tristup sorry but I couldn’t understand what you say the first image is too small I can’t see nothing there. The Clear Style Cache doesn’t change anything unfortunately.

I had the CSS I placed above, as Custom CSS at the Mini-Cart Element. The CSS you’ve added as I could see, it’s on the Global CSS of the Header. Anyway there’s nothing I can do to have padding around the Mini-Cart Buttons.

And I’d prefer those Custom CSS to be added to the Mini-Cart Element, or its container, unless the only way is at Global CSS, then everything placed there will make more sense to me. Please let me know what’s possible. After it, please let me know how do I replicate the good results on the Live site (what’s Global CSS and what’s Element CSS and in what Element/s).

Thank you very much for your support, cheers,

[ruenel]

Hello @fabiofava,

Do you want the mini cart to display like this?

If this is the case for you, please do the following:

1.) Remove any custom CSS related to the mini-cart.

2.) Apply the padding to the Mini-Cart element as pointed out by @Marc_a in his reply above.

Kindly let us know how it goes.

[fabiofava]

Thanks @ruenel I’ll do it but I have a question: the Global CSS added for the empty cart, would be possible to add that on the Mini-Cart Element or it’s container? Global CSS should be only for the header not for particular elements, right? I’ll keep looking forward from you clearing that before I touch the Live site. Thanks!

[tristup]

Hi @fabiofava,

Sorry for the confussion here, you can move the custom CSS code from Global CSS to the Drop-Down Cart > Customize and you need to modify the code a little.

$el.widget_shopping_cart_content p.woocommerce-mini-cart__empty-message
{
    margin:15px !important;
}

And the code is added only to show the padding for the Empty Message. If you are pointing to the Button padding as mentioned by my colleague, you need to add the padding to the Drop-Down Cart > Mini Cart > Button Container.

Hope it helps.
Thanks

[fabiofava]

It’s just getting more and more confusing… Can’t understand what I need to have and where. Sorry but it’s getting ultra confusing… Both the Mini-Cart and its Container have Custom CSS, I assume it’s a big mess…

[fabiofava]

I’ve copied exactly the same from the Staging to the Live Site, cleared Style Cache and WP Cache, and I still can’t see margins around the mini cart when there’s something on it.

Please make the test adding something at https://voelivre.net/ and check there’s no padding around the mini-cart there. It’s 100% exactly copied from the Staging site.

[tristup]

Hi @fabiofava,

It is a bit confusing to us too. I have checked your staging site again and found the code I suggested in my previous comment has been added to the Mini Cart > Customize > Element CSS( as shown in the given screenshot) which has to be added with some modification to the Drop-Down Cart > Customize > Element CSS. Also, the padding for the Mini Cart > Button Container has been completely removed.

For summing up all the things for you, I am explaining the steps again. Please follow the same and let us know if that works for you in your live server.

1. Add the following custom CSS code to Drop-Down Cart > Customize > Element CSS to set padding for the Empty Cart.

    $el.x-mini-cart .widget_shopping_cart_content p
    {
            margin:15px !important;
    }
   

2. Add the following custom CSS code to Drop-Down Cart > Mini Cart > Customize > Element CSS to add the padding to the content of the cart.

    $el.x-mini-cart .widget_shopping_cart_content .woocommerce-mini-cart
    {
            padding:15px !important;
    }
   

3. Set padding to the Drop-Down Cart > Mini Cart > Button Container as shown in the previous post to set the padding to the Buttons

Hope it helps.
Thanks

[fabiofava]

Hey there, thank you all folks! I was just missing the padding around the buttons. The proper codes were already on the proper CSS custom settings for the Mini-Cart and its Dropdown.

I assume we can close this ticket, as it’s back working like a charm.

[tristup]

Hi @fabiofava,

Glad that we are able to help you.

Thanks