By using’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Wordpress and Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor

    Join us!
elementor official

Question Editor to live view mismatch - Woocommerce Pages



New Member
Hey there,

I'm new to using Elementor and have had a great time putting together the skeleton to the site i'm making for myself.

I have just started to put together the product page templates and i've noticed there's discrepancies when viewing via the editor, and then viewing the live version on one part im doing, and it's gotten quite frustrating. This doesn't seem to have happened with the regular pages i've built so far.

I've added the "add to basket" and "price" widgets on a 2 column inner widget, and when it pulls the price, it's coming in slightly above the line of the buttons (so not straight). I have used margins in advanced to compensate for this, but then when i push it live it looks wonky. I then moved the margins around to make it look ok live, but natually it's looking wrong in the editor now.

Am i doing something wrong here, or is there a way to compensate another way than using the margin in advanced? It feels a bit counter intuitive to make my edit look wrong for the live version to look right.

I have attached images of the edit Vs live that achieves it looking correct live.




  • Screenshot 2020-02-26 at 13.11.44.png
    Screenshot 2020-02-26 at 13.11.44.png
    49.2 KB · Views: 93
  • Screenshot 2020-02-26 at 13.21.23.png
    Screenshot 2020-02-26 at 13.21.23.png
    49.5 KB · Views: 96

Latest Resources

Other Elementor Resources

elementor official