Fix: Elementor Single Product layout problem with too many add-on fields

Elementor’s Add To Cart element

If you use Elementor to customise your Single Product template, you probably use the Add To Cart element as your CTA. Usually, this is fine, but if you use many Add-on Fields, the layout becomes unreadable. Here’s how to fix it really easily.

Default layout is practically broken

How to fix

This can be fixed with some simple CSS code (assuming you’re using the Elementor version and not from another plugin e.g. Ultimate Addons). Just copypaste the below into the Advanced tab, under Custom CSS:

form.cart {flex-wrap:wrap !important;}
.woocommerce form .form-row {padding:0;margin:0;}
.wc-pao-addon-name {font-weight:bold;}
.wc-pao-addon-description {font-size:0.9em; font-style:italic;}
.woocommerce form .form-row label {font-weight:400 !important;}
.woocommerce select {padding:5px;}
Paste it here

Explanation of each line is as below, in case you want to customise it to your specific design:

  • form.cart {flex-wrap:wrap !important;} – This is the actual code that fixes this problem. The rest are optional. Basically this tells the browser to wrap the fields and move it to the next line instead of forcing it all in one.
  • .woocommerce form .form-row {padding:0;margin:0;} – Reduces the space between options.
  • .wc-pao-addon-name {font-weight:bold;} – Bolds the field label.
  • .wc-pao-addon-description {font-size:0.9em; font-style:italic;} – Reduces the description size and makes it italic.
  • .woocommerce form .form-row label {font-weight:400 !important;} – unBolds the options.
  • .woocommerce select {padding:5px;} – Reduces the “Select an option” dropdown box size.
Doesn’t this look SO much better?

That’s it! Super simple. Hope this helps you 🙂

Share via
Copy link
Powered by Social Snap