Editing "Email Customer Care", "Shipping Information", etc. on checkout page

[David Martin – Support]

To move it up the page you would reduce the % value.

Example:

.modal.fade {
    top: 20% !important;
}

Thanks,
David.

[stoukan]

Hi David,

Yes but then the problem is I’m not able to click on the “Customer care” link – it doesn’t appear

Best,
Sarah

[stoukan]

To clarify, “Customer care” is written on the page, but you just can’t click on it

[David Martin – Support]

Hi,

You cannot click it when the popup is active, you will need to click out of the popup for it to fade, then click the link.

Thanks,
David.

[stoukan]

Hi David,

I don’t think you understand what I mean – you can’t click the customer care link at all, try here:
http://ferdos.co.uk/checkout/

Sarah

[David Martin – Support]

Is that after you close the model?

Try adding this:

.woocommerce .help-bar ul li a {
    z-index: 100;
    position: relative;
}

– David.

[stoukan]

Hi David,

I’m not sure what you mean. I added the code but nothing changed.

What I mean is that when I insert the code:

.modal.fade {
top: 20% !important;
}

The link “Customer Care” becomes unclick-able. If you hover over it, it doesn’t get underlined and the cursor doesn’t change. The modal link doesn’t pop up if you click it. You can visit the page http://ferdos.co.uk/checkout/ to see.

Thank you,
Sarah

[David Martin – Support]

I understand the issue. Please update to this:

.modal.fade {
    top: -25% !important;
}

.modal.fade.in {
    top: 10%;
    top: 40%!important;
}

Thanks,
David.

[stoukan]

Hmmm, for some reason that didn’t change anything. Any other ideas?

Thank you David,
Sarah

[David Martin – Support]

Hi,

Please add a WP login for me.

Thanks,
David.

[stoukan]

This reply has been marked as private.

[David Martin – Support]

Thanks, everything is working for me nicely now – take a look at this: https://dl.dropboxusercontent.com/u/16264105/model.gif.

Thanks.

[stoukan]

Thank you David, it looks like there aren’t any issues with the link anymore. Out of curiosity, how did you fix it?

I have one remaining question – I noticed my modal links don’t have an ‘X’ to close them, unlike the ones in the neighborhood theme website: http://neighborhood.swiftideas.com/checkout/. Is there a way I can add them?

Thank you,
Sarah

[David Martin – Support]

No problem, I fixed it as the original position of the hidden model was actually stopping the click event working on the link.

For the close link, please add this CSS:

.modal-dialog button.close i:before {
    content: "X";
    font-size: 14px;
}

Thanks.

[stoukan]

Hi David,

I realized I never followed up on this. It worked, thank you!

Sarah