How can I change the css style on Wordpress Woocomerce checkout form?


How can I change the css style on Wordpress Woocomerce checkout form?



I would not ask before prior research to my question, I have looked everywhere and I can not find anything to solve my problem.



I want to be able to make the billing details div to 50% page width and the pay form to be on the other 50% of the page.



Here are some screenshots to give a better idea..



enter image description here



As you can see "Detalles de facturacion" are occupying whole page width.



enter image description here



As you can see, below that is "Tu pedido" which would be your order resume and I would want it to be right next to the billing details.



Thank you all for your help!


<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">


get_checkout_fields() ) : ?>












<?php endif; ?>









<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
</div>
</div>







Just a quick research and I could find lots of sources. I would stick with the Official documentation: docs.woocommerce.com/document/css-structure
– caiovisk
Jul 3 at 3:13





Possible duplicate of Changing WooCommerce Checkout form input text CSS style
– caiovisk
Jul 3 at 3:13





I can not edit de css of woocommerce checkout form layout. Any ideas? Thanks
– Matias Ulrich
Jul 3 at 18:43









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

api-platform.com Unable to generate an IRI for the item of type

How to set up datasource with Spring for HikariCP?

Display dokan vendor name on Woocommerce single product pages