[Resolved] CSS solution in the woocommerce cart

[Leonardo]

Hey!

Can you help me with a CSS solution in the woocommerce cart?

On desktop and tablet is OK. But on mobile, the link to the account and cart are above each other. I wish they were next to each other. For this you will also need to reduce the size of the cart on the mobile.

Note: they were created in Widget -> Header.

I’m sending the site privately.

Thank you very much.

[Ying]

Hi Leonardo,

The 2 Grid Containers are set to 100% in width on mobile by default so they can stack vertically.

Can you try setting their width to 50% for mobile?

And make sure the vertical alignment of the Grid block is set to centeron mobile.

[Leonardo]

It worked out!

Do you know how I can decrease the icon size on mobile specifically?

I have another question that came up now… In the user (next to Cart) I created an icon and a simple text “Enter or register”. However, how do I make it so that when a user logs in to the site their name and photo, if any, appear? Is there any woocommerce widget that does this automatically?

[Ying]

Do you know how I can decrease the icon size on mobile specifically?

You should be able to set different icon sizes within the buttonblock for mobile.
For more info about GB buttons block: https://docs.generateblocks.com/article/buttons-overview/#icon

But the cart icon will need custom CSS.

However, how do I make it so that when a user logs in to the site their name and photo, if any, appear? Is there any woocommerce widget that does this automatically?

The user name should be showing after logging in, it’s Woocommerce’s default setting.
If you want to add user photo, you might need custom solution or a plugin.

[Leonardo]

I managed to fix the size for mobile x desktop tablet using:

@media (max-width: 768px) {
.wc-block-mini-cart__button {
font-size: 12px;
}
}

@media (min-width: 769px) {
.wc-block-mini-cart__button {
font-size: 16px;
}
}

I think it’s correct, right?

The user name should be showing after logging in, it’s Woocommerce’s default setting.
If you want to add user photo, you might need custom solution or a plugin.

So, just that… That there I put as an icon and a simple text, and added the link to the page my account. Therefore, both the icon and the text are static.

I would like to know how do I add the page my account there as a woocommerce widget, understand?

Thank you!!!

[Ying]

I would like to know how do I add the page my account there as a woocommerce widget, understand?

Not really, I don’t understand what you mean.

Can you explain a bit more?

[Author]

Posts