In this Elementor tutorial, I’ll show you how to create a custom print button with full control over what gets printed and how it looks. This was a recent client request, so I wanted to share the exact solution I used.
The best part is you’re not relying on plugins and you can control the layout, styling, and specific sections that print. This setup uses lightweight JavaScript and CSS making it simple and flexible for any Elementor site.
Timestamps:
- 0:00 Intro / Demo
- 1:22 Page Setup and Assign CSS IDs
- 4:26 Add JavaScript Code
JavaScript Code
<button onclick="printRecipe()">Print Recipe</button>
<script>
function printRecipe() {
const img = document.querySelector('#recipe-image');
const title = document.querySelector('#recipe-title');
const ingredients = document.querySelector('#ingredients');
if (!img) return;
const imageEl = img.tagName === 'IMG' ? img : img.querySelector('img');
if (!imageEl) return;
const w = window.open('');
w.document.write(`
<html>
<head>
<style>
body {
font-family: Georgia, serif;
}
img {
width: 100%;
border-radius: 8px;
margin-bottom: 20px;
}
h1 {
font-size: 42px;
margin-bottom: 10px;
}
h2 {
font-size: 32px;
border-bottom: 2px solid #eee;
padding-bottom: 5px;
margin-top: 25px;
}
}
</style>
</head>
<body>
${title ? title.outerHTML : ''}
<img decoding="async" src="${imageEl.src || imageEl.dataset.src}">
${ingredients ? ingredients.outerHTML : ''}
<script>
window.onload = function() {
window.print();
window.close();
};
<\/script>
</body>
</html>
`);
w.document.close();
}
</script>
