[Resolved] CSS Problems with the Woocommerce Seller Template on the Cart Page

[Frank Noack]

I have a CSS problem with the woocommerce seller template on the cart page when a product is in the cart. (See attachment) Maybe someone has already solved the problem or can give a little help.

Thanks a lot
Frank

PS:
https://dl.dropbox.com/s/pzdlti60ejig7qm/woo-seller%20Screenshot.png

[Jacob]

hey
CSS
.woocommerce .coupon .button {
color: #000;
background-color: #fff;
}

[Jacob]

.woocommerce button.button:hover{
color: #000;
background-color: #fff;
}

[Leo]

Hi there,

Can you try the button colors options in the Customizer > Colors > WooCommerce and see if that works for you?

Let me know 🙂

[Frank Noack]

Hello Leo,

I made a short video of it.

Thanks for your help.

Frank

[video src="https://dl.dropbox.com/s/kof9bejbiizjn6u/Generate%20Press%20Support.mp4" /]

[Tom]

Hi there – thanks for the video!

It looks like your cart is a little too wide for the amount of space it has.

You can:

a) Reduce the font size of your headings:

.woocommerce table.shop_table th {
    font-size: 14px;
}

b) Remove the sidebar on your cart and checkout.

As for the button, that’s the “disabled” state (so it can’t be clicked). Doesn’t look very good, we’re going to have to improve that in the next version.

For now, try this:

body.woocommerce button.button:disabled, 
.woocommerce button.button:disabled[disabled] {
    opacity: 1;
    color: #fff;
}

Let me know if that helps or not 🙂

[Frank Noack]

Hello, Tom,
Yes, this helps.
Thanks for your quick help.

Best regards from Germany
Frank

https://dl.dropbox.com/s/jd9t04sy26or2jd/CSS%20on%20Cart%20Page.gif

[Tom]

To fix that, go into “Customize > Additional CSS” and remove this CSS:

.woocommerce-cart table.cart input {
	line-height: initial;
}

.woocommerce #content table.cart td.actions .input-text, .woocommerce table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text {
	width: 175px;
	padding: 9px 15px;
	box-sizing: border-box;
}

Then add this CSS:

.woocommerce .coupon .button {
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
}

[Frank Noack]

Thanks a lot Tom
the problems are solved.

Best regards from Germany
Frank

[Tom]

Glad I could help 🙂

[Author]

Posts