woocommerce offtopic - Checkout form looks terrible

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

Im currently building my first ever wordpress theme however the checkout form just looks messy. I have tried changing some bits around with css but It all just looks our of line.

I have tried changing the css styles for the form but it wont line up for my attempts by using margins and positions yet sadly no luck. Any help would be great :D

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

Im currently building my first ever wordpress theme however the checkout form just looks messy. I have tried changing some bits around with css but It all just looks our of line.

I have tried changing the css styles for the form but it wont line up for my attempts by using margins and positions yet sadly no luck. Any help would be great :D

• woocommerce-offtopic
• css

Share Improve this question asked Feb 13, 2019 at 14:27 BrandonBrandon 1322 bronze badges 1

• you need to figure out what styles are causing the issues and then how specific are the selectors so you can override them. Use the inspector to debug this issue, it may take a while of looking through elements to find the right one and figure out what styles are the culprits but it's very doable. – mrben522 Commented Feb 13, 2019 at 15:46

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

It sounds like there's a CSS conflict with your theme or another plugin.

To troubleshoot the issue, deactivate each plugin, one at a time, to establish which one may be causing the problem. If that doesn't work, activate a different theme to see if that solves it.

If it's your theme causing the issues, you'll need to use your browsers developer tools to identify which CSS is responsible. You can then override it via your own CSS.

Alternatively, try and add this line to functions.php:

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

This will strip all styles from WooCommerce so you can build your own.

This is how I usually tackle WooCommerce styling as it allows me to have full control of the design. It's time consuming, but you can re-use your styles for future builds.