Checkout Page UI

Hi,
By default, the WooCommerce checkout page displays the billing details and order review sections side by side. If you’re using the [woocommerce_checkout] shortcode and the sections are displaying one below the other, there might be some CSS conflict or customization in your theme affecting the layout.

If you identify any conflicting CSS, you can try adding custom CSS to your theme to adjust the layout. For example:

cssCopy code

/* Example CSS to display billing and order sections side by side */ .woocommerce-checkout .col-1 { width: 50%; float: left; } .woocommerce-checkout .col-2 { width: 50%; float: right; }

Make sure to adjust the CSS according to your theme’s structure and styling.

Is there any way i can check which CSS properties are conflicting?

I also created a new page in which i used the same shortcode, and in that it is coming side by side. [but that page was made using wordpress] and the one where i am getting the details and order section one after the other, that is made using elementor.

Is there any way i can find out what the difference is between the two layouts.

Hi @pundirabhishek

To identify conflicting CSS properties, you can use the browser’s built-in developer tools. Here’s how you can do it:

1. Open your webpage in a browser.
2. Right-click on the element that you think has conflicting CSS and select ‘Inspect’ or ‘Inspect Element’.
3. This will open the developer tools panel, where you can see the HTML of your webpage on the left and the CSS on the right.
4. In the CSS panel, you can see which CSS rules are being applied to the selected element. If there are conflicts, the overridden properties will be struck through.

This process should help you find any conflicting CSS properties.

To find out the exact differences, you may want to compare the HTML and CSS of the two pages. Look for differences in the HTML structure and the applied CSS rules. This should give you an idea of what’s causing the difference in the layouts.