Editing Afterpay text font and spacing?

Would anyone know how to edit Afterpay's text and spacing that reads: "or 4 interest-free payments of $34.50 with [Afterpay's logo]."  I understand the logo can't be changed. 

The text is right below the price of my item, without proper space and the font weight and type is an eye sore with the fonts that I use.  I've already reached out to Squarespace, and it was forwarded as suggestion to their development team, but in the meantime, I'm hoping there's a workaround someone knows? 

Looking to make it look more like this:

https://www.anthropologie.com/shop/smocked-ruffled-mini-dress?category=dresses&color=001&type=STANDARD&quantity=1

6 hours ago, Rit said:

Would anyone know how to edit Afterpay's text and spacing that reads: "or 4 interest-free payments of $34.50 with [Afterpay's logo]."  I understand the logo can't be changed. 

The text is right below the price of my item, without proper space and the font weight and type is an eye sore with the fonts that I use.  I've already reached out to Squarespace, and it was forwarded as suggestion to their development team, but in the meantime, I'm hoping there's a workaround someone knows? 

Looking to make it look more like this:

https://www.anthropologie.com/shop/smocked-ruffled-mini-dress?category=dresses&color=001&type=STANDARD&quantity=1

Can you share link to your site? We can check easier

Sure, thank you.

https://abeautifulprojection.com/shop/p/palette

On 10/20/2021 at 6:26 PM, Rit said:

Sure, thank you.

https://abeautifulprojection.com/shop/p/palette

 

Add to Design > Custom CSS

/* Afterpay text */
span.afterpayString {
    font-size: 20px;
}
[data-afterpay="true"] {
    margin-top: 40px !important;
}

Hi, Can I remove the text completely and just keep the afterpay logo?

Thanks

2 hours ago, TRDELUX said:

Hi, Can I remove the text completely and just keep the afterpay logo?

Thanks

 

Can you share link to a product? The links above doesn't exist

3 hours ago, TRDELUX said:

Can I remove the text completely and just keep the afterpay logo?

In answer to your specific question of can you hide just the text, the answer is that you could, but not with CSS. This is because the buttons ('Afterpay' and 'i') are descendents of the same span and would also be hidden). The only way to do this would be to use some JavaScript to remove the text nodes that are descendents of the .afterpayString span, without affecting the button elements.

That said, can you explain why you want to remove the text but leave the logo in place? Is there an issue with the language or the font? Without knowing the context of your question, it is difficult to know the best approach to solve your issue. If a client asked me to retain the logo without the explanatory text, it isn't something I would advise because it is likely to be more confusing for users (see below).

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi Paul2009, thanks for the prompt reply. The reason for removing the text is that we sell B2B and website product prices are displayed as excluding tax. Therefore the afterpay calculation over 4 payments is incorrect and misleading. Tax is applied in the cart, where they would then be prompted to pay the correct amount if selecting afterpay payment method.

@paul2009 - I would love to know if you can remove the entire AfterPay string - the wording and the logo - completely. I'd like it to hopefully still appear in the checkout process. But on the product page itself, I'd like to take it out completely. Is this possible? I have a Squarespace business account so using JavaScript to accomplish it would be okay.

Hello, I'm trying to solve the initial issue raised in this forum (the afterpay text overlapping/crowding onto my item price), and I am not very familiar with custom coding. I tried pasting the original solution posted by Paul2009 into both the header injection and the Custom CSS sections and it did not work. Please advise!