Customize Woocommerce cart using CSS

Default Woocommerce pages may look outdated, and there’s nothing you can do about it. Page builders like Elementor can’t edit Woocommerce pages and that’s a thumbs down!

Woocommerce pages can still be customized using CSS, but it might sound difficult for beginners.  So, I’ve added some CSS code(s) that customize specific elements, you have to paste the desired code in the custom CSS section (which can also be done without Elementor). 

If you want to write another CSS code, you can do in the comments section to help others. 

*If there is a typo, mention it below. Thanks and let’s start!

To display product thumbnail in mobile cart view

To make product thumbnail visitble in mobile mode , paste the code below into CSS (cart)

 

CSS code: 

@media (max-width: 768px) {
.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;
}

.cart .product-thumbnail:before {
display: none;
}

.woocommerce-cart table.cart img {
width: 150px;
}
}

 

Change product title color and size

Remember to replace “hexcodehere” with the hex code of your desired color.
Example:
#00000;


*****CHANGE PRODUCT TITLE COLOR*****


.woocommerce .product-name a {
color: hexcodehere;
}

****CHANGE PRODCUT TITLE SIZE IN CART PAGE****

.woocommerce-cart form.woocommerce-cart-form {
font-size: 22px;
}

 

Change 'Cart totals' width to 100%

.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
float: none;
width: 100%;
text-align: left;
}

Remove 'cross sell' from cart page

This code below is NOT to be pasted inside the CSS, rather, it’s to be pasted in the fuctions.php file. WordPress users can go to Appearance > Theme editor. And then from the menu on the right side, they can click the ‘functions.php’ file and place the code there.

remove_action( ‘woocommerce_cart_collaterals’, ‘woocommerce_cross_sell_display’ );

Cart totals remove

Show 'cros sell' UNDER cart.

This code is also to be pasted in the functions.php file. Refer to the screenshot above to know where to paste it.

add_action( ‘woocommerce_after_cart_table’, ‘woocommerce_cross_sell_display’ );

Cart totals remove