WooCommerce Checkout displaying incorrectly since update…

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

Problem: When Bootstrap 4 is active, there is a display issue on the WooCommerce checkout screen. The two columns of content are shrunk horizontally.

Solution: For a temporary fix, use the following CSS code:

.woocommerce-checkout .col-1, .woocommerce-checkout .col-2 {
  max-width: inherit;
}
.woocommerce-input-wrapper {
  width:100%;
}

This will resize the content columns and input fields as a temporary solution.

100% of people find this useful.

This support ticket is created hace 5 años, 5 meses. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Etiquetado: Views plugin

Este tema contiene 6 respuestas, tiene 3 mensajes.

Última actualización por andrewD-10 hace 4 años, 10 meses.

Asistido por: Christian Cox.

Autor

Mensajes

agosto 20, 2019 at 1:23 pm #1320151

Gavin

Hello

This appears to be a WooCommerce and Bootstrap 4.x issue so might not be able to be solved here - but is definitely relevant to Toolset developed sites!

I recently update to the latest version of WooCommerce and I have Bootstrap 4.x (4.3.1) being loaded by Toolset. At some point, however, the Checkout page started displaying incorrectly.

It appears to be a conflict with both WooCommerce and Bootstrap 4.x BOTH using the classes col-1 and col-2.

See screenshot... The two Billing/Address columns are all mucked up. See also the screenshot of the CSS being loaded!

Note: The Checkout displays correctly with Bootstrap 3.x.

Thanks

Gavin

P.S. I am on to WooCommerce support about this issue too.

agosto 20, 2019 at 2:03 pm #1320201

Gavin

The issue has been raised with WooCommerce here:

enlace oculto

agosto 21, 2019 at 4:43 pm #1321389

Christian Cox

Thanks for the report, I'm able to replicate this issue on my own local environment. It looks like this CSS will solve the problem locally:

.woocommerce-checkout .col-1, .woocommerce-checkout .col-2 {
	max-width: inherit;
}

I added that in Appearance > Customize > Additional CSS, and the problem seems to be fixed. Let me know if this temporary fix doesn't work and I can take a closer look.

agosto 22, 2019 at 10:28 am #1321983

Gavin

Thanks Christian...

Your CSS and also this to format the input fields:

.woocommerce-input-wrapper {
width:100%;
}

agosto 22, 2019 at 10:35 am #1321985

Gavin

Have fixed with the CSS above and added a comment to the WooCommerce support on GitHub to that effect.

marzo 18, 2020 at 2:16 pm #1554881

Christian Cox

For future reference our developers have determined this is an issue that should be resolved between WC and Bootstrap. There's nothing for us to do here.

agosto 28, 2020 at 9:19 pm #1760719

andrewD-10

Hi Christian,

Thank you very much for your css coding. It worked for me as well. One other area I noticed was on the my-account/edit-address. Is there any way you can provide the css code to fix here as well?

Link: enlace oculto

Thank you,
Andrew