Jump to content

Changing "Digital product" block's payment type text

Go to solution Solved by n3verw1nt3r,

Recommended Posts

Posted

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?

Screenshot 2023-11-11 163725.png

  • Replies 5
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

Posted
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  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Posted (edited)
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.

Screenshot 2023-11-12 154410.png

Edited by n3verw1nt3r
Posted
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. 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Posted
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.

Screenshot 2023-11-15 172104.png

  • 2 weeks later...
  • Solution
Posted (edited)

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:

  1. 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
     
  2. 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:
Screenshot2023-11-24155534.thumb.png.af677dbf188b151e9e3359e5105c6d0f.png

Then the console will jump to and highlight the respective source line for the object:
Screenshot2023-11-24155552.thumb.png.24da24ec9e38936690d622cd766a29a7.png

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.

Screenshot2023-11-24163517.png.7da57a85398badcc33d73783e0c474e7.png

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 by n3verw1nt3r

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.