Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Sirvoy
  • Login
  • Contact
English (US)
US English (US)
FR French
DE German
ES Spanish
NL Dutch
SE Swedish
FI Finnish
NO Norwegian
DA Danish
  • Home
  • Booking Engines
  • Design & CSS

Customizing Booking Engine Texts with CSS

Written by johana

Updated at December 19th, 2024

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Getting Started
    Setup Guides Import Bookings
  • About Sirvoy
    General Technical Security & Backups
  • Rooms & Room Types
    Rooms & Room Types Categorizing Room Types Offer Add-Ons or Extras
  • Booking Engines
    Website Builder Installing on Your Website Adjusting the Booking Engine Design & CSS Input Fields Review Your Booking Feature Tracking
  • Channel Manager
    Setting Up New Channels Mapping Your Room Types General Rates & Availability Updates Overbookings
  • Financials
    Setting Up a Payment Solution Managing Payments Invoices & Receipts Accounting Taxes & Surcharges
  • Bookings
    Modify Booking View Bookings Message Templates & Automated Messaging Communication Scheduling Housekeeping and Tasks
  • Rates & Restrictions
    Rates & Discounts Restrictions Promotion & Coupon Codes
  • My Account
    Customize Your Account Subscription Statistics Export & API
+ More

Table of Contents

An Example of How to Change the “Search” Button Title

 

Sirvoy provides possibilities to change texts and translations on the admin pages for the booking engine, but in cases where there is no option you can modify some texts with CSS by targeting a specific element class.

Elements that have the class “sirvoy-flexible-text” can be modified from the custom CSS page. 

  1. Go to Settings -> Booking engines. 
  2. Click the three dots adjacent to the booking engine you want.
  3. In the drop-down list, click “Edit.”
  4. Click the “Custom CSS” tab.

All elements that have the class “sirvoy-flexible-text” also have a:

1.  Specific class “sft-trans-key-SPECIFIC-KEY”.
2.  Language-specific class to pinpoint a text change for a specific language, for example in English: “sft-lang-en”. (Each language is represented by a two-letter language code; English “-en”, French “-fr”, Swedish “-sv” etc.)

An Example of How to Change the “Search” Button Title

The markup for the “Search” button title is:
(notice the two classes “sft-lang-en” and “sft-trans-key-shared-button-search”)

<span class="
   sirvoy-flexible-text 
   sft-lang-en 
   sft-trans-key-shared-button-search 
   sft-initialized" 
   data-translation-key="shared.button.search">
            
   <div class="sft-text">
      Search
   </div>

</span>

To change the “Search” button title for English and Swedish you can do the following:

.sft-lang-en.sft-trans-key-shared-button-search .sft-text, .sft-lang-sv.sft-trans-key-shared-button-search .sft-text { 
  display: none !important;
}

.sft-lang-en.sft-trans-key-shared-button-search::after { 
  content: "My button title";
}

.sft-lang-sv.sft-trans-key-shared-button-search::after { 
  content: "Min knapptitel";
}

 

English version:

 

Swedish version:

The above principles for changing texts apply to any other text changes you would like to make in the booking engine in elements with the class “sirvoy-flexible-text”.

Note: Any custom CSS will only affect the embedded version of the booking engine and the WordPress plugin. It will not affect the booking engine on the Sirvoy Website Builder or on the standalone page.

 

 

reserving tailoring

Was it worth the read?

Yes
No
Spot something odd? Let us know.

Related Articles

  • Accepting Online Payments for Bookings
  • Accepting Payments with PayPal
  • Stripe Payment Methods
  • Editing CSS

Need a hand with Sirvoy?

You're in the right place.

  • Sirvoy
  • Login
  • Contact

    ©2025 Sirvoy . All Rights reserved.

    Knowledge Base Software by Helpjuice

    Expand