Add to cart layout

Weird, that seems to be caused by a conflict with your theme, could you tell me which teme you are using? And could you change to another theme temporary just to see if the issue is indeed caused due a conflict with your theme please?

Hello @edgarrojas ,

Yes ofcourse, the theme we are using is the: Astra but it is not a problem, because when I choose template: theme it is working ok but some other things looks bad (not about this plugin).
We are also using the elementor builder and I think this causing the problem.

Please let me know if you need any further info.

Hello!

Looks like you fixed the issue already? i just checked the page again and the fields look fine now.

Regards!

Hello @edgarrojas ,

No I still have a problem. I just tried to show you that the problem is not with the theme but with the elementor. With the elementor we are using it stills look like that.

Please click the link again: https://www.onestopworktops.co.uk/product/tuscany-kitchens-door

Thank you in advanced.

Kind regards!

@edgarrojas Can you please help me with that ?

I have the same problem, with theme Betheme. Moreover, this problem appeared suddenly and I just can’t figure out how to track it down and where it could have come from.By the way, I don’t use Elementor.

• This reply was modified 3 years ago by onriver.

Temporary solution:

.woocommerce form.cart {
    display: contents;
    align-items: flex-end;
    width: 100%;
}

Did this get resolved because I have the same problem. Using Astra theme and Elementor.

The @onriver solution doesn’t work for me as my css editor complains that contents is not a valid parameter for display.

TIA

It is possible that the elementor overrides the css classes, really I don’t know. I think if you look at which class is responsible for the basket, then you can do the same. Maybe it makes sense to add !important.

Thanks.

@edgarrojas do you have any sneaky CSS tips you could share to sort this out?

For those who come after…

I think I’ve done it.

My set up is that I have products with variations which get an extra option. I have not tried this on products without variations, as I don’t have any ??

I have inserted the following CSS on my product pages:

.woocommerce div.product.elementor form.cart.variations_form .woocommerce-variation-add-to-cart, .woocommerce div.product.elementor form.cart:not(.grouped_form):not(.variations_form) {
    display: block;
}

Hello @graemeaustin thank you , your css works perfect on one of the website I am using. But on one website it is not working. Can you help me please ? Because I have no idea how to create css? the other website is this one:

https://www.onestopworktops.co.uk/product/classic-cornice-3050x76x63mm

Thank you in advance ??

Kind regards,
Stella

@crystella17 I just tried out stuff until it worked: I am no CSS expert myself.

I recommend using your browser’s element inspector to see what classes are applying to your cart etc and try changing some parameters.

Sorry I can’t help more Stella, but I was at the limit of my knowledge when I sorted out my own site.

Graeme

@graemeaustin Thank you very much again. Yes I understand it totally . If I will find what code is working for the other website I will mention it here .

Thank you again.

Kind regards, Stella