How to change the Courses text for ‘Start Course’, ‘Lesson’ and more - Squarespace 7.
Want to edit the “Start Course” button or change the phrase of the “lessons” within the relatively new Courses functionality?
We’ve found that people want to use this new functionality for different purposes, and so want the ability to change the text.
Well using the code below, this is now possible. This code does a lookup on the exact word and the replaces it with another word.
Add the following code to Website Tools > Code Injection > Footer
<!-- Courses Text replacer --> <script> document.addEventListener('DOMContentLoaded', function() { // Replace 'LESSONS' with 'VIDEOS' in the side nav var elements = document.getElementsByClassName('course-item__side-nav-chapter-metadata'); for (var i = 0; i < elements.length; i++) { elements[i].textContent = elements[i].textContent.replace('LESSONS', 'VIDEOS'); } // Customize button texts on the Course Overview page elements = document.getElementsByClassName('course-item__course-action-button-text'); for(var i = 0; i < elements.length; i++) { var buttonText = elements[i].textContent.trim(); if(buttonText === 'Start Course') { elements[i].textContent = 'Start the Video'; // Change to desired text } else if(buttonText === 'Continue Course') { elements[i].textContent = 'Continue the Video'; // Change to desired text } else if(buttonText === 'Retake Course') { elements[i].textContent = 'Retake the Video'; // Change to desired text } } // Customize next lesson/video texts on the lesson pages elements = document.getElementsByClassName('course-item__next-lesson-text--incomplete'); var elements2 = document.getElementsByClassName('course-item__next-lesson-text--complete'); for(var i = 0; i < elements.length; i++) { if(elements[i].textContent.trim() === 'Complete & Continue') { elements[i].textContent = 'Continue'; // Change to desired text } } for(var i = 0; i < elements2.length; i++) { if(elements2[i].textContent.trim() === 'Next Lesson') { elements2[i].textContent = 'Next Video'; // Change to desired text } } // Replace 'Lesson' with 'Video' in the Course Overview elements = document.querySelectorAll('.course-item__side-nav-chapter-metadata, .course-list__list-chapter-item-chapter-meta span:first-child'); for(var i = 0; i < elements.length; i++) { elements[i].textContent = elements[i].textContent.replace('Lesson', 'Video'); } }); </script>
Format | Output | Description |
---|---|---|
YY | 18 | Two-digit year |
YYYY | 2018 | Four-digit year |
M | 1-12 | The month, beginning at 1 |
MM | 01-12 | The month, 2-digits |
MMM | Jan-Dec | The abbreviated month name |
MMMM | January-December | The full month name |
D | 1-31 | The day of the month |
DD | 01-31 | The day of the month, 2-digits |
d | 0-6 | The day of the week, with Sunday as 0 |
dd | Su-Sa | The min name of the day of the week |
ddd | Sun-Sat | The short name of the day of the week |
dddd | Sunday-Saturday | The name of the day of the week |
H | 0-23 | The hour |
HH | 00-23 | The hour, 2-digits |
h | 1-12 | The hour, 12-hour clock |
hh | 01-12 | The hour, 12-hour clock, 2-digits |
m | 0-59 | The minute |
mm | 00-59 | The minute, 2-digits |
s | 0-59 | The second |
ss | 00-59 | The second, 2-digits |
SSS | 000-999 | The millisecond, 3-digits |
Z | =+05:00 | The offset from UTC, ±HH:mm |
ZZ | 500 | The offset from UTC, ±HHmm |
A | AM PM | |
a | am pm |