Edit Availability button

Is there some way to either edit the 'Availability' button to say 'Book Now' or delete it altogether?

Comments

  • Yes, you can play around with your css.
    Manage - Layout - Booking Page - CSS Editor

    You can also use the Translation area to change the text very easilly.
    Manage - Languages - Checkfront Translations
  • I understand the Availability button can be customised using the CSS editor but when I inspect the element I'm not sure exactly how to change the wording of the button from 'Availability' to 'Book Now'.
    It seems like the element that needs changing is .cf-item-status but what is the code to change the button?

  • This here should get you started. This is my current setup on https://rentadriver.checkfront.com/reserve/

    However I have been having a small problem with the Sidebar Wrap. For some reason in SAFARI, every time I scroll down with my mouse, then the content of the page jumps to the Right  :(  Is there anyone here who knows why the #sidebar-wrapper { display:none !important; } is not working properly in SAFARI.

    -----------------------------------------------------------

    /* This removes the calendar sidebar */
    #sidebar-wrapper { display:none !important; }


    /* This removes the "Apply Promo or Voucher" */
    .cf-add-discount { display:none !important; }


    /* This removes the price summary in the "Book Now" Tab */
    .cf-rate-info { display:none !important; }


    /* This removes the "Book Now" button from the item list */
    .cf-btn-book.res-btn.ct { display:none !important; }


    /* This removes the price from the item list */
    .cf-price { display:none !important; }


    /* This removes current status availability from the item list */
    .cf-btn-calendar { display:none !important; }


    /* This changes the layout and hides orginal text of the STATUS button */
    .cf-item-status.AVAILABLE, .cf-item-status.SOLDOUT, .cf-item-status.ERROR {
        text-align: center;
        color: white;
        background-color: #2c97de;
        border-radius: 5px;
        text-transform: capitalize;
        font-size: 1.1em;
        font-weight: bold;
        text-indent: -9999px;
        line-height:0;
    }


    /* This changes the layout of the STATUS button on HOVER */
    .cf-item-status:hover, .cf-item-status.SOLDOUT:hover, .cf-item-status.CLOSED:hover, .cf-item-status.ERROR:hover {
        color: white;
        background-color: #4fa8e3 !important;
    }


    /* This adds a new icon and text to the STATUS button. This will be the new BOOK NOW button */
    .cf-item-status.AVAILABLE:after, .cf-item-status.SOLDOUT:after, .cf-item-status.ERROR:after {
    text-indent:0;
    font-family: 'FontAwesome';
            content: "\f14a\00a0\ Book Now";
    display: block;
    line-height: initial;
    }


    /* This changes the layout of the DETAILS button */
    .cf-btn-summary {
        text-align: center;
        color: black;
        background-color: #eee;
        border-radius: 5px;
        text-transform: capitalize;
        font-size: 1em;
    }


    /* This adds some helping text to the availability status shown on the "Book Now" Tab */
    .cf-item-available:before {
            content: "The selected period is: ";
    display: block;
    }

  • edited December 2017
    Thanks, that was exactly what I needed. The only change needed for the status button were for when it was set to available. On our Birding and Wildlife site this is the set up now:

    /* This removes the "Apply Promo or Voucher" */
    .cf-add-discount { display:none !important; }

    /* This removes the "Book Now" button from the item list */
    .cf-btn-book.res-btn.ct { display:none !important; }

    /* This changes the layout and hides orginal text of the STATUS button */
    .cf-item-status.AVAILABLE {
        text-align: center;
        border-radius: 5px;
        text-transform: capitalize;
        font-size: 1.1em;
        font-weight: bold;
        text-indent: -9999px;
        line-height:0;
    }

    /* This changes the layout of the STATUS button on HOVER */
    .cf-item-status:hover, .cf-item-status.SOLDOUT:hover, .cf-item-status.CLOSED:hover, .cf-item-status.ERROR:hover {
        color: #358E41;
        background-color: #D4F296 !important;
    }

    /* This adds a new icon and text to the STATUS button. This will be the new BOOK NOW button */
    .cf-item-status.AVAILABLE:after {
    text-indent:0;
    content: "BOOK NOW";
    display: block;
    line-height: initial;
    }
  • Happy to help  :)
Sign In or Register to comment.