[Resolved] Having trouble customizing woocommerce cart for mobile.

[Anthony]

I keep getting the default cart being displaying content on top of each other rather than inline. Is there a way to change this?

[Elvin]

Hi,

I keep getting the default cart being displaying content on top of each other rather than inline. Is there a way to change this?

Can you link us to the site in question so we could take a closer look?

You can provide the site details on the Private Information text field. Thank you.

[Anthony]

I found a thread that helped me out a bit but the code didn’t fix my solution

https://generatepress.com/forums/topic/mobile-friendly-woocomerce-cart-layout/

[Leo]

Try this CSS:

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

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Anthony]

I tried it alone and with the other code and tweaking it but nothing is giving me the result I want.

[Leo]

I’m not seeing my CSS being added.

When I add it using the browser inspector tool, this is what I see:
https://www.screencast.com/t/BQQuzxJE0hC

You are also using Elementor to add that section so have you checked with their support team first?

[Anthony]

I found this and it really gave me a result i am happy with. Is there a way to add the price of the product right under the name? There is also a small square being cut out of the table heading do you know why that is?

@media (max-width:768px) {
	.woocommerce table.shop_table_responsive thead,
	.woocommerce-page table.shop_table_responsive thead,
	.woocommerce table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive tr {
		display: table-row;
	}
	/*Hide price and subtotal headers in cart table*/
	.shop_table th.product-price,
	.shop_table th.product-subtotal {
		display: none;
	}
	/*Tweaking the layout of the cart table's header in mobile*/
	.shop_table th.product-name {
		text-align: left;
		width: 100%;
	}

	.shop_table th.product-quantity {
		text-align: right;
	}
	/*Avoid woocommerce message links overlaping the whole thing */
	.woocommerce-message {
		display: flex;
		flex-direction: column-reverse;
	}
	/*Avoid woocommerce info links overlaping the whole thing */
	.woocommerce-info {
		display: flex;
		flex-direction: column;
	}

	/*Tweaking the layout of the Coupon Area on cart*/
	.am-cart-coupon input#coupon_code,
	.am-cart-coupon .button {
		width: 100%;
		margin-bottom: 10px;
	}

	/*Tweaking the layout of Coupon Area on checkout*/
	.checkout_coupon.woocommerce-form-coupon .form-row.form-row-first,
	.checkout_coupon.woocommerce-form-coupon .form-row.form-row-last,
	.checkout_coupon.woocommerce-form-coupon button {
		float: none;
		width: 100%
	}

	.checkout_coupon.woocommerce-form-coupon p,
	.woocommerce-form.woocommerce-form-login.login p {
		margin-bottom: 8px;
	}

	/*Bringing back item's image on cart table*/
	.woocommerce #content table.cart .product-thumbnail,
	.woocommerce table.cart .product-thumbnail,
	.woocommerce-page #content table.cart .product-thumbnail,
	.woocommerce-page table.cart .product-thumbnail {
        display: block;
        text-align: left !important;
    }

	/*Resizing that image*/
    .woocommerce-cart table.cart img {
        width: 75px;
    }
	
	/*Removing other ::before elements on cart item descriptions*/
	td.product-thumbnail:before, 
    td.product-name:before, 
    td.product-price:before, 
    td.product-quantity:before {
        content: "" !important;
    }
	/*Remove border bottom from cells in product items on cart*/
    tr.woocommerce-cart-form__cart-item.cart_item td{
    	border-bottom: none!important;
    }
	/*The css grid magic begins here:*/
    tr.woocommerce-cart-form__cart-item.cart_item {
    	display: grid!important;
    	border-bottom: 1px solid rgba(0,0,0,0.2);
    	grid-template-columns: 80px auto 100px;
	}
	/*Absolute positioning of the remove-item "X" button*/
	tr.woocommerce-cart-form__cart-item.cart_item td.product-remove {
    	position: absolute;
	}
	/*Resetting the text align of the product name on cart item*/
	tr.woocommerce-cart-form__cart-item.cart_item td.product-name {
    	text-align: left!important;
	}

	/*This is the mobile product price we added on cart.php @ line 86*/
	.am-mobile-product-price{
		display: block;
	}
	
	/*Vertically centering the increase/decrease quantity buttons on cart items*/
	tr.woocommerce-cart-form__cart-item.cart_item td.product-quantity{
		align-self: center;
	}

	/*Hiding product price and subtotal cells from each table item*/
	tr.woocommerce-cart-form__cart-item.cart_item td.product-price,
	tr.woocommerce-cart-form__cart-item.cart_item td.product-subtotal {
    	display: none!important;
	}
	/*remove the alternate row shading*/
	.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
	.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td{
		background: transparent!important;
	}

}

[Leo]

I’m seeing a bunch of code interfering from Elementor and a plugin called Jet Woo Builder.

Were you able to check with their support first?

[Anthony]

I tried with jet woobuilder but their support team said they couldn’t help, for the most part it just allows styling of the colors on the cart table. The elementor support team has yet to respond to multiple questions. Im adding the css through simple css and its giving me the same result as the guy who was using just generatepress

[Leo]

Can you disable Elementor and Jet Woo Builder so we can have a clean look at what’s going on?

[Anthony]

Okay i went ahead and disabled them and added the code from my previous reply

[David]

Hi there,

to display the Price below the product title in the Cart page, try this CSS:

@media(max-width: 768px) {
    .woocommerce-cart table.shop_table_responsive tr {
        position: relative;
    }
    .woocommerce-cart tr.woocommerce-cart-form__cart-item.cart_item td.product-price {
        display: block !important;
        position: absolute;
        left: 80px; 
        bottom: -15px;
    }
    .woocommerce-cart tr.woocommerce-cart-form__cart-item.cart_item td.product-name {
        padding-bottom: 30px !important;
    }
}

Its about the only viable solution when dealing with tables, but it I would suggest you test thoroughly to make sure it doesn’t cause any unintended behaviour.

The small square cutting the heading – i am not seeing that? Do you have a screenshot of the problem.

[Anthony]

This looks great, I think the issue was being caused by the other plugins code. Do you know where i could find the selectors to add custom css to the coupon and update cart buttons?

[David]

Tom provides some CSS here for the Update Cart button:

https://generatepress.com/forums/topic/refresh-cart-button-style/#post-1051671

To style the Apply Coupon button:

.woocommerce-page table.cart td.actions .coupon .input-text+.button {
    /* Coupon Button Style */
}

[Anthony]

Thank you so much!

[Author]

Posts