How to Disable the Checkout Button When Your Store is Closed

In this article, I’m going to show you how to make your WooCommerce store’s checkout button inactive when your store is closed. This ensures that customers can’t place orders during off-hours, providing you better control over your store operations. Let’s dive right in!

 

Step 1: Create the HTML Structure

First, you need to create some HTML. If you’re using Elementor, you can simply put an HTML element into your page. If you’re not using Elementor, add the HTML in a way that suits your setup.

 

Step 2: Insert the Script

In the HTML section, you’ll paste a script that handles the enabling and disabling of the checkout button based on your store’s operating hours. Here’s a sample script for reference:

				
					<script>
	var observer = new MutationObserver(function () {
		var now = new Date();
		var day = now.getDay();
		var hour = now.getHours();
		var minute = now.getMinutes();
		if (minute > 59) {
			hour++;
			minute -= 60;
		}



		// Opening and closing times for each day
		var openingTimes = {
			0: { open: 12, close: 21 }, // Sunday
			1: { open: 11, close: 21 }, // Monday
			2: { open: 11, close: 21 }, // Tuesday
			3: { open: 11, close: 21 }, // Wednesday
			4: { open: 11, close: 21 }, // Thursday
			5: { open: 11, close: 21 }, // Friday
			6: { open: 12, close: 21 }  // Saturday
		};

		var openingTime = openingTimes[day].open;
		var closingTime = openingTimes[day].close;

		if (
			(hour < openingTime || hour > closingTime)
		) {
			disableCheckout = true;
		} else {
			disableCheckout = false;
		}

		var checkoutButton = document.querySelector('.button.alt');
		checkoutButton.style.display = 'flex';
		checkoutButton.style.flexDirection = 'row';
		var existingClosedText = document.querySelector('.closed-text');

		if (disableCheckout) {
			if (checkoutButton) {
				checkoutButton.style.display = 'flex';
				checkoutButton.style.flexDirection = 'row';
				checkoutButton.style.backgroundColor = 'gray'; // Change the background color
				checkoutButton.style.borderColor = 'white';
				checkoutButton.style.color = 'white'; // Change the text color
				checkoutButton.style.cursor = 'not-allowed';
				checkoutButton.style.fontSize = '0px';
				checkoutButton.addEventListener('click', function (event) {
					// Prevent the default behavior of the link element
					event.preventDefault();
				});

				if (!existingClosedText) {
					var closedText = document.createElement('div');
					closedText.className = 'closed-text';
					closedText.style.fontSize = '20px';
					closedText.style.color = 'white';
					closedText.style.fontWeight = '900';
					closedText.textContent = 'CLOSED';

					checkoutButton.appendChild(closedText);
				}
			}
		} else {
			if (checkoutButton) {
				checkoutButton.style.display = 'block';
				checkoutButton.style.backgroundColor = ''; // Reset the background color
				checkoutButton.style.color = ''; // Reset the text color
				checkoutButton.style.cursor = ''; // Reset cursor

				// Remove the closed text if checkout is open
				if (existingClosedText) {
					existingClosedText.remove();
				}
			}
		}
	});

	observer.observe(document, { childList: true, subtree: true });
</script>

 

Step 3: Customize the Script

Store Hours

In the script, you can see the opening and closing hours for each day of the week. Modify these values to match your store’s schedule:

				
					var openingTimes = {
			0: { open: 12, close: 21 }, // Sunday
			1: { open: 11, close: 21 }, // Monday
			2: { open: 11, close: 21 }, // Tuesday
			3: { open: 11, close: 21 }, // Wednesday
			4: { open: 11, close: 21 }, // Thursday
			5: { open: 11, close: 21 }, // Friday
			6: { open: 12, close: 21 }  // Saturday
		};

Button Selector

Ensure you target the correct checkout button by inspecting the element on your site. Right-click the checkout button, select ”Inspect”, and find its class. Replace .button.alt in the script with the correct class:

				
					var checkoutButton = document.querySelector('.button.alt');

 

Final Notes

  1. Ensure Specificity: Make sure the class you target is specific to avoid affecting other elements.
  2. Testing: Test the script during both open and closed hours to ensure it works as expected.
  3. Adaptation: Adapt the script to your needs, especially if you’re using a different checkout system or theme.

That’s it! By following these steps, you’ll have a checkout button that only functions during your store’s operating hours, preventing orders from being placed when your store is closed. Happy hacking.

Webreach