Cart customization for mobile

Hi there,
I’d like to change something on the cart from mobile phones. Is it possibile to:
1. Change the background color? I’d like to switch to white.
2. Change the size of the product image? I’d like to show it a bit large.
Thanks a lot.

Attachments:

You must be logged in to view attached files.

Hello,

Your current site is black and you show the grey background. Please provide the site admin access which you want to change.

Best Regards

You saw the other web site. This is the correct one.

Hello,

Add this code to the Theme Settigns > Custom CSS > Global

@media (max-width: 768px){
body .woocommerce table.shop_table_responsive tbody td {
    background-color: #ffffff;
}

body .cart-collaterals .cart_totals {
    background-color: #f8f8f8;
    background-image: none;
}
body .woocommerce table.shop_table_responsive .product-thumbnail img {
    max-width: 100%;
    min-width: 100%;
}
}

Best Regards

Now it works fine, thank you. Is there a way to replicate the same bars of desktop version on the responsive version? Or in alternative a border of 1 pixel on the row of the single product?

Hello,

If you want to have this style for all the devices remove the media inquiry

body .woocommerce table.shop_table_responsive tbody td {
background-color: #ffffff;
}

body .cart-collaterals .cart_totals {
    background-color: #f8f8f8;
    background-image: none;
}
body .woocommerce table.shop_table_responsive .product-thumbnail img {
    max-width: 100%;
    min-width: 100%;
}

Best Regards

I deleted

@media (max-width: 768px){

But the product image disappeared. Now I have only this:

/* Sfondo prodotti carrello da mobile */

@media (max-width: 768px){
body .woocommerce table.shop_table_responsive tbody td {
   background-color: #ffffff;
}

body .cart-collaterals .cart_totals {
   background-color: #f8f8f8;
   background-image: none;
}

/* Dimensione prodotti carrello mobile */ 

body .woocommerce table.shop_table_responsive .product-thumbnail img {
   max-width: 50%;
   min-width: 50%;
}

I deleted

body .cart-collaterals .cart_totals {
   background-color: #f8f8f8;
   background-image: none;
}

because I do not need to color that field. Is it referred to the cart total table, right?

Hello,

This CSS relates to the block you have shown on the screen. As soon as you decide what colors you want and were contact me.

Best Regards

I’m a bit confused right now. Let’s try to take a step back. I reduced the size of the thumbnail on the cart with:

body .woocommerce table.shop_table_responsive .product-thumbnail img {
   max-width: 50%;
   min-width: 50%;
}

And it is ok. I changed the background of the row that contains the product details on the cart with:

@media (max-width: 768px){
body .woocommerce table.shop_table_responsive tbody td {
   background-color: #ffffff;
}

And it is fine. The first question now is: what this CSS does?

body .cart-collaterals .cart_totals {
   background-color: #f8f8f8;
   background-image: none;
}

And the second question is: I would like to replicate the same effect of these lines that I see from desktop between products also on mobile version of the web site. How can I do it? How can I work on the border of the row?

Thanks a lot, Elise.

Hello,

Here is the answer to the first question http://prntscr.com/lhwk7w

Add the code to the Theme Settings > Custom CSS > Global to get the result on mobile.

body .woocommerce table.shop_table_responsive tbody td {
   background-color: #ffffff;
}

Best Regards

Dear Elise, I did not ask to color the background of the row, but only the border. I just would like to color the superior and the lower border for 1px. Just like you can see here.

Hello,

Add this code to the Theme Settings > Custom CSS > to all mobile devices:

.woocommerce-cart-form__cart-item {
    border-bottom:1px solid red!important;
}
.woocommerce-cart-form__cart-item:first-child{
    border-top:1px solid red!important;
}

Replace the “red” with your color.

Best Regards

It works perfectly. Thanks a lot Elise!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts