My wife is working on moving her practice to a new site, and she wanted me to add SquareUp Scheduling to her Wordpess site. She likes the simplicity of the scheduling system and of course, having the payments managed in the same service is nice. The quickest and easiest way was to create a page and edit the HTML directly. Since WordPress really wants you to use the visual editor and blocks, switching to the code editor isn’t obvious.
When you create the page, it will default to the visual editor. Go ahead and enter any text or anything that you want here, but to add the embed code that you got from SquareUp, you’ll need the code editor. To switch, look for the 3 dots in the upper right corner of the editor just to the right of the Publish button. Click that and choose Code Editor. It will still show the blocks, but now you can enter HTML code. Note: You may be able to use the Embed block type, but I couldn’t get that to work.
Now in the HTML editor, paste in the embed code, save and that’s it. However, this will most likely cause a scroll bar in the iframe that’s created. There is no way to directly change the size of the iframe, but you can use a little CSS to change its dimensions. To do this, you’ll have to open the site HTML editor. This can be found by going to the dashboard, clicking on Appearance, and selecting Customize. This will bring up the site customization tool. Click Additional CSS, enter the following code into the editor, and click Publish.
The CSS I used here was found in a post on the wordpress.org forum.
Ravenous Raven Design (@ravenousravendesign)
oh wow, I’m not the only one here pissed off they make people scroll on height when they could just set it to auto??? ugh….
For anyone else wondering, here is a universal piece of code you can use to edit the iframe portion of that Square embedd code so you can increase the height. Just put this inside the wordpress customizer. Hopefully it’s the only iframe you have. If it’s not, trying using the class OR ID of ember-application. Modify your height code to your personal needs.
iframe{ max-width: 100%; min-height: 100px; height: 1200px !important; vertical-align: top; min-height: 1200px !important; }from WordPress.org support forum
- This reply was modified 2 years ago by Ravenous Raven Design.
I’m sure there are other ways of doing this. There are always other ways. But this is how I did it. You could probably enter the CSS directly in the page using the <script> tag. If you have other iframes, you might be able to use as a class or id for the CSS. Who knows. Go nuts.