Book Now Button Is Not Sending through to page, appears to just be CSS Element

The Book now button on our homepage @ drbasil.com.au is not linking correctly to https://centaurportal.com/d4w/org-392/search as it should. Appears to be only a CSS element, but previously used to work as a button.

  • Adam Czajczyk
    • Support Gorilla

    Hello @James,

    I hope you're well today and thank you for your question!

    I took a look at the site and I assume it's the red "Book online now" button that you're referring to, correct?

    I checked it and it's indeed just a CSS element, not even linked to anywhere. Furthermore, the way it is added to the site it cannot be "directly" linked via HTML so I'm guessing it might have been using some sort of JS to handle that redirect/link before, right?

    Were there any changes made to the site recently? How this button was originally added to the site? Let me know please.

    Could you also, please, enable support access to the site so I could take a closer look at that? You can do it on "WPMU DEV -> Support" page in your site's back-end.

    Best regards,
    Adam

  • James
    • WPMU DEV Initiate

    Hi Adam,

    Thanks for the fast response, yes, that is the button,, the last change was done by your team actually. Before I believe it was just code in the header/css (i could be wrong) using just a standard ahref to link.

    Support access has been granted.

  • Predrag Dubajic
    • Support

    Hi James,

    I was looking at some of your previous chats and found one about this button where you chatted with Ash and the button was added via CSS, there was no mention of linking that button as you had to leave the chat early.

    I was checking your site now and can see that this button is added in CSS of your child theme so there's no really a way to link it if it's added like that.
    What we can do is use a little script to add a button with the link and that should do the trick.

    I tried adding it myself and it worked when I added it in Insert Headers and Footers script, but then I needed to add bit of CSS to place it in correct spot but after that it stopped loading my new button.
    I'm not sure what's going on, if it's caching or something like that.

    So I will provide you with a code that will do this for you and you can try clearing any caching after you add it and see if that does the trick for you.

    First thing is to add that small script to place the button in header, and this will do just that:

    <script type="text/javascript">
    	jQuery( document ).ready(function() {
    	    jQuery( 'h2.site-description' ).after( '<a class="book-online-button" href="https://centaurportal.com/d4w/org-392/search"><img src="https://www.drbasil.com.au/wp-content/uploads/2017/08/shutterstock_220044130-min.jpg" alt="book online now"/></a>' );
    	});
    </script>

    This should work by adding it in header of footer via Insert Headers and Footers plugin.

    And after that all you need to do is push the button to right side with a CSS like this:

    .book-online-button {
        float: right;
    }

    You can add this in your child theme CSS and remove the old CSS code for the button and that should do the trick.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.