[Resolved] Cart in Menu

[Dan]

Hi There,

I have the problem with the Cart in Menu with WooCommerce. It’s work that will but not now. The display mini card sub-menu is not work tha well and when you try to clic on cart too.

Can you help me, please.

[Fernando]

Hi Dan,

Can you check if Shop, Cart, Checkout, and My Account pages are published in your wp-admin > Pages > All Pages.

Also check if the pages are set in WooCommerce > Settings > Advanced: https://share.getcloudapp.com/wbuz5NAQ

Kindly let us know how it goes. 🙂

[Dan]

Hi Fernando,

It’s work, thank you. I have other question, please: How can I fix the option +/- quantity will be more responsive in mobil or tablet?

[David]

Hi there,

what exactly is the +/- issue ? Can you link me to a product where I can see it ?

[Dan]

Hi David,

You can go to the site and chose the product (Créer et intégrer un contenu), go on cart and try to view them in mobile or tablet. The buttom + and – quantity section.

[Fernando]

How specifically would you like it to look like on specific views?

Do you want it to stack in one column for instance on mobile? Example: https://share.getcloudapp.com/Wnuyp466

If yes, kindly try adding this CSS in Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    .single-product form.cart {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .woocommerce div.product form.cart div.quantity {
        margin-bottom: 30px;
    }
}

Kindly modify 30px to your preferred spacing value. If you’re referring to something else, kindly let us know.

Hope this helps! 🙂

[Dan]

Not working.

[David]

How do you want it to look ?

[Dan]

Hi David,

I want to adjust the quantity buttons (+/-) to be more responsive on mobile and tablet @media (max-width: 768px or less) . The display of this is currently vertical, too big. And it is impossible to adjust in the padding or margin.

[Fernando]

Hi Dan,

Kindly try this CSS:

.product-quantity .quantity.buttons-added {
    display: flex;
}

@media (max-width: 768px) {
    /* CSS in here for mobile only */ 
    .product-quantity .quantity.buttons-added > * {
        width:20px !important;
    }

    .product-quantity .quantity.buttons-added {
        justify-content: flex-end;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */ 
    .product-quantity .quantity.buttons-added > * {
        width:30px !important;
    }
}

@media (min-width: 1025px) {
    /* CSS in here for desktop only */ 
    .product-quantity .quantity.buttons-added > * {
        width:40px !important;
    }
}

Modify the width values to your preference to make this specific element smaller.

Hope this helps! Feel free to reach out if further assistance is needed. 🙂

[Dan]

Hi Fernando,

It’s work that well.
Thank you so much for your help,

[Fernando]

You’re welcome Dan! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

[Author]

Posts