Docs

[Dadparvar]

Hi,

When I add an item to cart, see how it looks in the cart page:
http://uupload.ir/files/t7py_2016-06-09_03-20-02.png

As you see:
1. product tab is so small, and the product name are wrapped in multiple lines
2. price tab is small so that the price itself appears below item count field.
3. product image is big
4. and there is a lot of free spaces until X button.

Isn’t it better to give some of those free spaces to other tabs so that they look better and neat?

How to do so?

Any opinion will be appreciated.

[Joao]

Hi There,

We can help you adjusting that with CSS

If you could provide a screenshot of how you would like it too look like that would be really helpful.

Also please provide us the URL to this page, we will use it as a reference but the CSS changes will be applied globally.

Thanks,

Joao

[Dadparvar]

This reply has been marked as private.

[Rad]

Hi there,

Please add this CSS as well,

.woocommerce-cart .product-thumbnail {
width: 130px;
}
.woocommerce-cart .product-name {
text-align: right;
}
.woocommerce .cart.shop_table .product-thumbnail img {
    width: 100%;
}

Cheers!

[Dadparvar]

Awesome.

Now it looks perfectly nice. Thanks a lot.

As the last question related to this topic, please see this screenshot:
http://uupload.ir/files/3tsp_2016-06-09_17-45-57.png

1. How I can remove that free space in Cart widget? (green arrow displays where I mean) I want it have the same width as its below part.
2. How to set products to have the same dimension product image? See how second product has bigger wrapper. (when they have the same size, they will look more neat)

Thanks in advance

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.rtl ul:not(.x-nav):not(.x-comments-list):not(.products), .rtl ol:not(.x-nav):not(.x-comments-list):not(.products) {
    margin: 0;
}

.woocommerce li.product .entry-featured {
    max-height: 184px;
}

Hope that helps.

[Dadparvar]

Perfect.

Thanks a lot 🙂

[Lely]

You’re welcome!

Cheers!

[Author]

Posts