Change the cart page layout

[Leon]

Hi,

Current cart page has a huge picture for product, also product name, size and other information take a lot places. If customer has several products in the cart, they have to take a while to get the bottom of the page. We want to make the cart page looks similar to checkout page, which means smaller picture and layout for product name, size…etc. Make the page more funcional. Could you please help us with that?

Thank you.

[Harry]

Hi,

Please add below code to CLaue > Theme Option > General Layout > Custom CSS

@media only screen and (min-width: 1280px) {
.woocommerce-cart .jas-page > .jas-col-md-12 > .woocommerce {
	width: 80%;
margin: 0 auto;
}}
@media only screen and (min-width: 1366px) {
.woocommerce-cart .jas-page > .jas-col-md-12 > .woocommerce {
	width: 70%;
}}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Leon]

Hi Harry,

It does make the picture smaller but is that possible to make the section looks like checkout page? We don’t want the Picture, Name and Price take three rows which means more space.

Thank you.

[Harry]

Could you take a screenshot where you want remove?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Leon]

Hi Harry,

Sorry the issue happened again. I wonder maybe due to the update, the code you mentioned doesn’t work any more. Now we have a huge product image again.

And for another question about the vertical layout of each product, we actually want them change to horizontal layout. I mean make the product information shows in one row to save more page space. Is that possible?

Thank you.

[Leon]

Sorry, I forgot to mention all the issue we want to fix is based on using Mobile devices.

Please check the picture, we don’t want it shows as 1st picture(aaa.jpg), we want it keep showing as the 2nd(bbb.jpg)

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Leon,

On mobile the width of device small and content of table product will overlap the screenshot and some content cut off so WooCommerce team change layout like 1st screenshot.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Leon]

Thank for the reply. In this case, how can we make the picture 50% of the size?

[Harry]

please add below code to Claue > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 736px) {
.woocommerce-cart .size-woocommerce_thumbnail {
	max-width: 50%;
}}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Leon]

Thanks a lot for the help, it works fine!

[Author]

Posts