HTML TXT For Back Button in header in Woocommerce

December 4, 2023 - Instruction Guides

Just add the following code in HTML TXT.

<button id="hdr_bck_btn" onclick="goBack()"><i class="fas fa-arrow-left"></i></button>

<script>
    function goBack() {
        window.history.back();
    }
</script>

For Custom CSS use this:

#hdr_bck_btn {
    background-color: #fff;
    color: black;
    padding: 0px 0px; /* Adjust the padding values as needed */
    font-size: 16px;
}

Make Sure font awesome library is enable in your website.

Note: If the Font awesome icon is not supported it will just show the code empty.

Final HTML Code for Back Button.

<button id="hdr_bck_btn" onclick="goBack()"><i class="fas fa-arrow-left"></i></button>

<script>
    function goBack() {
        if (document.referrer) {
            // If there is a referrer (previous page), go back
            window.history.back();
        } else {
            // If there is no referrer, redirect to the specified link
            window.location.href = "https://jwala.shop";
        }
    }
</script>

This Final Html Code will add a back button in header and it checks if document.referrer is truthy, indicating that there is a referrer. If there is, it will go back using window.history.back(). If not, it will redirect to “https://jwala.shop”. This approach is more reliable in determining whether there is a previous page in the browser history.