For QR CODE ICON TXT/HTML (no need for CSS) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">…
HOME - HTML TXT For Back Button in header in Woocommerce
HTML TXT For Back Button in header in Woocommerce
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.
Recent Comments
In case if you there is nothing in back page and want to redicrect the back button to home page:…
Just Use this code in html text: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Back Button…
ADD CODE :
// Function to handle the "Go Back" button click function goBack() { // Check if there is a referrer (previous…
// Function to handle the “Go Back” button click
function goBack() {
// Check if there is a referrer (previous page)
if (document.referrer) {
// If there is a referrer, go back in the browser’s history
window.history.back();
} else {
// If there is no referrer, redirect to the specified link
window.location.href = “https://jwala.shop”;
}
}
ADD CODE :
Just Use this code in html text:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Back Button Example</title>
<!– Include Font Awesome for the arrow icon –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css”>
<style>
/* CSS for styling the arrow icon */
#hdr_bck_btn {
background: none;
border: none;
cursor: pointer;
font-size: 24px;
color: black; /* You can change the color as needed */
}
#hdr_bck_btn:hover {
color: #007bff; /* Optional: Change color on hover */
}
</style>
</head>
<body>
<!– Back button element with arrow icon –>
<button id=”hdr_bck_btn” onclick=”goBack()”>
<i class=”fas fa-arrow-left”></i>
</button>
<script>
function goBack() {
window.history.back();
}
</script>
</body>
</html>
In case if you there is nothing in back page and want to redicrect the back button to home page:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Back Button Example</title>
<!– Include Font Awesome for the arrow icon –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css”>
<style>
/* CSS for styling the arrow icon */
#hdr_bck_btn {
background: none;
border: none;
cursor: pointer;
font-size: 24px;
color: black; /* You can change the color as needed */
}
#hdr_bck_btn:hover {
color: #007bff; /* Optional: Change color on hover */
}
</style>
</head>
<body>
<!– Back button element with arrow icon –>
<button id=”hdr_bck_btn” onclick=”goBack()”>
<i class=”fas fa-arrow-left”></i>
</button>
<script>
function goBack() {
if (window.history.length > 1) {
window.history.back();
} else {
window.location.href = “https://jwala.shop”;
}
}
</script>
</body>
</html>
For QR CODE ICON TXT/HTML (no need for CSS)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>QR Code Icon</title>
<!– Font Awesome CDN link –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css” integrity=”…”>
</head>
<body>
<!– QR Code Icon using Font Awesome –>
<a href=”https://jwala.shop/qr-code-scanner/”>
<i class=”fas fa-qrcode” style=”font-size: 30px;”></i>
</a>
</body>
</html>