Add WhatsApp button to Your YouCan Store

add-whatsapp-button-in-youcan-store.html

<script>
	const phoneNumber = "+212600816818"; // change this with your store's phone number
	const buttonContent = "طلب عن طريق واتساب"; // change this with your button content
	const buttonColor = "#1cbfa2"; // change this with your button color
	const buttonOnRight = true; // if you want whatsapp icon inside button on right side, set this to true else set it to false
	let WhatsAppMessage = " مرحباً، أريد الحصول على هذا المنتج "; // change this with your message content that will be sent to your store's whatsapp number
	
	window.onload = function () {
		var buyButtonDiv = document.querySelector(
			'.product-section.add-to-cart-section'
		);
		WhatsAppMessage += location.href.split('?')[0];
		buyButtonDiv.insertAdjacentHTML('afterend', WhatsAppButton());
	};
	
	const WhatsAppButton = () => `
	<div class="product-section add-to-cart-section">
		<a
			href="https://wa.me/${phoneNumber}?text=${WhatsAppMessage}"
			class="button single-submit"
			style="background-color: ${buttonColor};
			display: flex;
			gap: 8px;
			flex-direction: ${buttonOnRight ? 'row' : 'row-reverse'};"
			><svg
				width="25"
				height="25"
				viewBox="0 0 25 25"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path
					d="M11.6496 0.0142822C5.12728 0.324837 -0.0197293 5.75664 5.68549e-05 12.2863C0.0060813 14.2751 0.486206 16.1522 1.33317 17.8109L0.0327779 24.1231C-0.0375664 24.4646 0.270389 24.7635 0.609589 24.6832L6.79487 23.2178C8.38396 24.0094 10.1689 24.4666 12.0579 24.4954C18.7243 24.5972 24.2829 19.3039 24.4907 12.64C24.7134 5.49671 18.8178 -0.327103 11.6496 0.0142822ZM19.0299 19.03C17.2185 20.8414 14.8101 21.839 12.2484 21.839C10.7484 21.839 9.31238 21.5024 7.97997 20.8387L7.11859 20.4096L3.32638 21.3081L4.12462 17.4331L3.70025 16.6021C3.00856 15.2475 2.65784 13.7827 2.65784 12.2484C2.65784 9.68665 3.65542 7.27829 5.46683 5.46682C7.26206 3.67159 9.70975 2.65777 12.2486 2.65777C14.8103 2.65783 17.2186 3.65541 19.03 5.46676C20.8414 7.27817 21.839 9.68653 21.839 12.2482C21.839 14.7871 20.8252 17.2348 19.0299 19.03Z"
					fill="white"
				></path>
				<path
					d="M18.1929 14.9045L15.8204 14.2233C15.5085 14.1337 15.1726 14.2222 14.9453 14.4538L14.3651 15.0449C14.1205 15.2941 13.7493 15.3742 13.4255 15.2432C12.3032 14.789 9.94228 12.6899 9.33936 11.64C9.16542 11.3371 9.19419 10.9584 9.40776 10.6821L9.91428 10.0268C10.1127 9.77002 10.1546 9.4252 10.0234 9.12841L9.02521 6.87084C8.78612 6.33012 8.09514 6.17271 7.64372 6.5545C6.98156 7.11453 6.1959 7.96558 6.1004 8.9084C5.93201 10.5707 6.6449 12.6661 9.34072 15.1822C12.4551 18.089 14.9491 18.473 16.573 18.0797C17.494 17.8566 18.23 16.9623 18.6946 16.23C19.0113 15.7307 18.7612 15.0677 18.1929 14.9045Z"
					fill="white"
				></path>
			</svg>
			${buttonContent}
		</a>
	</div>
	`;
	</script>