Changing "Digital product" block's payment type text

n3verw1nt3r · November 11, 2023

Hi! I can't find a way to change this through customization menus, so I think the Code section is the right one for my question.

So, I add a "Digital Product" block on a product landing page to show one of the existing pricing plans. My site is not in English language by default, but this block always shows fixed payment options in English such as "One time" or "Subscription". This stands out from the rest of the page, but I can't find a way to change it. Could anyone please help me solve this?

paul2009 · November 11, 2023

55 minutes ago, n3verw1nt3r said:

My site is not in English language by default, but this block always shows fixed payment options in English

@n3verw1nt3r Have you set the language correctly in Settings > Language & Region > Site Languages?

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

n3verw1nt3r · November 12, 2023

22 hours ago, paul2009 said:

@n3verw1nt3r Have you set the language correctly in Settings > Language & Region > Site Languages?

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

Yes, I have set my preferred language as default and English as a translation language in Site Languages.

However, I found out that the line I want to translate is affected by Site Language and Region Format setting.

Here's an illustration: I switched the Site Language and Region Format setting to German, and it is now "Einmalig" instead of "One time", although there is no German in Site Languages whatsoever. Unfortunately Site Language and Region Format setting has a rather limited number of languages to choose from, so it looks like I don't have many options other than to override it with some kind of code.

Edited November 12, 2023 by n3verw1nt3r

paul2009 · November 12, 2023

1 hour ago, n3verw1nt3r said:

I switched the Site Language and Region Format setting to German, and it is now "Einmalig" instead of "One time", although there is no German in Site Languages whatsoever.

I'm a little confused about the issue and which language you are trying to use. Can you help me to understand?

Which language do you want to use? On Squarespace 7.1, you can use:

Danish
Dutch
English
Finnish
French
German
Italian
Norwegian
Portuguese
Spanish
Swedish

Also, please provide a link to the page on the site where we will see this issue. If the site isn’t live, please see How to Post a Forum Question for guidance on how to provide a link to your site.

n3verw1nt3r · November 15, 2023

On 11/12/2023 at 5:47 PM, paul2009 said:

I'm a little confused about the issue and which language you are trying to use. Can you help me to understand?

Hi Paul, of course. My client's main site language is Russian which obviously isn't in the list of the supported languages. It is translated into English with Weglot now. The plan is to also add Ukrainian & Baltics translations using Weglot later, and I'd like to make sure that there won't be any issues with them either.

Please follow this link, the password is "300600!".

If you scroll down the cyrillic part till the price block, you will see that the type of the payment "One time" is in English, and from where I'm standing there is no obvious way to change that.

Please also find attached the screenshot of the regional and language settings of the site.

n3verw1nt3r · November 24, 2023

Well, I understand that "Russian" is a stop-word here even though the business is Lithuania-based and is supposed to work across the Baltics. Anyway, I have found a solution myself.

For all those who use Lithuanian, Latvian, Estonian, Ukrainian, Polish, Russian or any other language Squarespace pretends doesn't exist as their main website language, you may change any uneditable hardcoded text with CSS.

You will need to know:

The ID of the section/block that contains the object you need to edit. You can find this using an addon for your browser called Squarespace ID Finder. Available for Chrome and Firefox.
Blocks IDs look like this: #block-a72b4f2f714d79fd041b
The ID of the object you need to edit within that block. You can get it by turning console on in your browser (usually with the F12 key), switching to the "Pick" tool (Ctrl + Shift + C in Firefox or Chrome), hover over the object to be edited and click it.

The ID you need will be displayed by your pointer:

Then the console will jump to and highlight the respective source line for the object:

The part in blue on the top screenshot (.pricing-plan-price-billing-period) by the cursor or the part after the "class" on the bottom screenshot in the console is what you need. Keep in mind that a preceding full stop is obligatory to address an object (see example below).

Now go to Website > Website Tools > Custom CSS, then write this in the editor, changing the IDs to yours:

//You can keep these comments for your convenience.
//First you must hide the original text
<your Block ID> <your ID of the object with preceding full stop>
{visibility:hidden;}

//Then you should add your own text using ":before" after the ID
<your Block ID> <your ID of the object with preceding full stop>:before
{
    visibility:visible;
    content:"<Your Text Here>";
}

Here's an example:

//I hide the original text which I don't want to be shown anymore
#block-a72b4f2f714d79fd041b .pricing-plan-price-billing-period
{visibility:hidden;}

//Then I add my own text before it instead:
#block-a72b4f2f714d79fd041b .pricing-plan-price-billing-period:before
{
    visibility:visible;
    content:"Vienas mokėjimas";
}

Click Save, refresh your page, see that your text is now shown instead.

If you want to apply your changes to this exact class site-wide, don't use the block ID in your CSS code.
E.g. in my case if I delete the block ID, the "One time" line in the price block will be translated on all pages. With the block ID in the code it only applies to one block, since it has unique ID across the website.

I'm sure there's a better way to do it, and maybe some pro volunteers to drop in, but this method works. Its downside is that the original text remains there, albeit invisible, thus occupying some space.

Edited November 24, 2023 by n3verw1nt3r

Changing "Digital product" block's payment type text

Recommended Posts

n3verw1nt3r

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

paul2009

Link to comment

n3verw1nt3r

Link to comment

paul2009

Link to comment

n3verw1nt3r

Link to comment

n3verw1nt3r

Link to comment

Create an account or sign in to comment

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources