Return to previous page

Formatting of Promo Popup - by littlest - on WordPress WooCommerce support

This topic has 20 replies, 3 voices, and was last updated 8 years, 7 months ago ago by Jack Richardson

littlest

Participant

February 22, 2016 at 13:42

We have previously used the promo popup on site successfully. We recently took it down to run a short term promotion and now would like to put it back up. However when we set it back up (using the same settings as when we took it down) there are now major styling issues that mean the form is now outrunning the popup box and the font has changed. Are you able to help me correct this? Even trying to insert a simple image (sized to the same dimensions as the popup box) it still runs outside the promo box.

Here is the static block I am using:
http://pasteboard.co/1KaX8bzh.png

Here’s what it looks like (with the haywire formatting):
http://pasteboard.co/1Kb4sc8y.png

And even trying to use a simple image – it still shows haywire formatting:
http://pasteboard.co/1Kb0OZzu.png

#114194 Copied Theme version: 2.8 WooCommerce version: 2.2.5

19 Answers

Eva Kemp

Support staff

February 22, 2016 at 18:55

Hello,

Please provide us with wp-admin panel url and login credentials.

Thank you.
Regards,
Eva Kemp.

#114283 Copied

littlest

Participant

February 22, 2016 at 20:04

Details in private content –

Please, contact administrator
for this information.

#114297 Copied
Jack Richardson

Support staff

February 23, 2016 at 10:12
Hello,

I’ve added this code in Theme Options > Custom CSS > Custom CSS for desktop:
```
#etheme-popup pre {
    white-space: nowrap;
    height: 500px;
}
```
Check your popup form now.

Best regards,
Jack Richardson.
#114360 Copied
littlest

Participant

February 23, 2016 at 12:40

Thanks Jack, but it’s still showing as a box (with scroll bars) within the box?
http://pasteboard.co/1LDEqlVn.png
That’s even after I tried to reduce the size by taking out the field labels.

#114394 Copied
Eva Kemp

Support staff

February 23, 2016 at 12:53
Hello,

Please add this code in Custom CSS for desktop:
```
#etheme-popup pre {
    overflow: none !important;
}
```
Regards,
Eva Kemp.
#114396 Copied
littlest

Participant

February 25, 2016 at 13:13

Thanks Eva, I have done this – but sorry I am still having formatting issues.
I have tried with an image and without, and selecting NONE for boarder styles, and white for background colour – but I still get the grey boarder and the scroll bar along the bottom, seen in the screenshots:
http://pasteboard.co/1OIu3yYV.png
http://pasteboard.co/1OIw1F8a.png

Even on the confirmation page (of the pop up), the font runs off screen.
http://pasteboard.co/1OIri80T.png
And I can’t control the font either – which I want to be in line with the rest of the site.

Is there anything else I can try.
Thanks, Tara

#114824 Copied
Eva Kemp

Support staff

February 25, 2016 at 14:35
Hello,

I’ve changed the code in Custom CSS for dekstop to:
```
#etheme-popup pre {
    white-space: nowrap;
    height: 500px;
    overflow: hidden !important;
}
```
Clear browser cache and check popup window.

Regards,
Eva Kemp.
#114867 Copied
littlest

Participant

February 28, 2016 at 09:06

Thanks Eva. It’s looking better, but it still has the grey shading and the line boarder, and I still have no control over the default fonts.

See- http://pasteboard.co/1T1ehLiv.png

All I want is a white box (no shading and no line boarder), and the fields using the fonts of the theme. This was how it used to look before we temporarily took it down. And when we put it back up we didn’t make any changes, but lost all formatting.

#115203 Copied
Jack Richardson

Support staff

March 1, 2016 at 14:49
Hello,

Please try the following css code:
```
#etheme-popup pre {
  background-color: white !important;
  border: none !important;
}

.white-popup-block {
  background-image: none !important;
  border: none !important;
}
```
Best regards,
Jack Richardson.
#115648 Copied
littlest

Participant

March 3, 2016 at 11:33

Thanks Jack.
It has fixed the boarder issue, but the font is still default – is there anyway to control this?

Also – the pop up on the mobile site is now also not responsive. How do I fix this – see screenshot of what’s it is displaying as on mobile: – http://pasteboard.co/1Zg66Sa8.png

Whereas on the desktop it’s showing as:
http://pasteboard.co/1ZfZeHJ9.png

Thanks, Tara

#115952 Copied
Jack Richardson

Support staff

March 3, 2016 at 19:25
Hello,

I’ve added the css code for mobile sections in Theme Options > Custom CSS:
```
#etheme-popup {
    height: auto !important;
}
```
Please clear browser cache and check the site.

but the font is still default – is there anyway to control this

Please specify which part of popup text you want to customize.

Best regards,
Jack Richardson.
#116037 Copied
littlest

Participant

March 4, 2016 at 10:11

Thanks Jack, in the old version the copy reduced on mobile view to fit the screen, whereas at the moment it’s staying as is (very large) is there anyway to control this.
And also it’s the font within the fields that I want to change.

#116111 Copied

littlest

Participant

March 4, 2016 at 11:00

Sorry also, how do I add “Do not show this message again” to the pop up? I can’t see it in the documentation. Or how do I stop the pop up from appearing on every single page the user clicks to (in one session)?

#116134 Copied
Jack Richardson

Support staff

March 4, 2016 at 14:27
Hello,

Add this css code in Theme Options > Custom CSS > Custom CSS for desktop to style fonts in popup fileds:
```
.mc4wp-form-theme input {
    font-family: Arial !important;
    font-size: 14px !important;
}
```
Set the values to your needs.

Regarding your other questions please provide us with FTP credentials in private content.

Best regards,
Jack Richardson.
#116175 Copied
littlest

Participant

March 5, 2016 at 02:34

Thanks Jack.
FTP details in private content now.

Please, contact administrator
for this information.

#116238 Copied

littlest

Participant

March 7, 2016 at 11:30

Hi Jack,
I can see that the “don’t show again” tick box has been added thanks.
It has changed the formating of the email field though, so it’s smaller than the other fields.
See – http://pasteboard.co/25kZs1Ia.png

And also, can you tell me what files you edited/changed to add this? As the whole header of the site has now changed – and I am trying to work out why?

The live site is now showing like – http://pasteboard.co/25l4TFU2.png
But it should (and was today) looking like this – http://pasteboard.co/25l5WRcP.png

#116393 Copied

Jack Richardson

Support staff

March 7, 2016 at 12:42

Hello,

I’ve commented your custom code in the /wp-content/themes/littlestyles-woopress-child/functions.php file in lines 100-128 to display “don’t show again” box.

And also, can you tell me what files you edited/changed to add this? As the whole header of the site has now changed – and I am trying to work out why?

The live site is now showing like – http://pasteboard.co/25l4TFU2.png
But it should (and was today) looking like this – http://pasteboard.co/25l5WRcP.png

Don’t worry as it’s because I switched theme to parent and then back to child. Now your site is displaying correctly.
Please clear browser cache and check again.

Best regards,
Jack Richardson.

#116416 Copied

littlest

Participant

March 26, 2016 at 07:26

Thanks for all your help.

#118994 Copied

Jack Richardson

Support staff

March 26, 2016 at 09:36

Hello,

You’re welcome.
We’d be thankful if you leave a comment on ThemeForest site http://themeforest.net/item/woopress-responsive-ecommerce-wordpress-theme/9751050/comments .

Thank you.
Best regards,
Jack Richardson.

#119012 Copied
Tagged: best selling, formatting, persuasive, promo popup, themes, woocommerce
Viewing 20 results - 1 through 20 (of 20 total)