Edit Availability button

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


  • 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?

  • 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;

    /* 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 {
    content: "BOOK NOW";
    display: block;
    line-height: initial;
  • Thank you! :)
Sign In or Register to comment.