Web Invitations
for your wedding

Interactive and dynamic invitations.

What we will achieve:

We are going to add the + and – buttons on each side of the input number in both the Product Detail and the Shopping Cart:

Add buttons to numerical input

And in the shopping cart we will add the function for the automatic update:

How do we do it?

To achieve this we are going to add the following script in our custom.js (or the javascript sheet you manage in your child theme):

The .pi-addCart class is the class we put on the Elementor widget in the Product Detail template. You can replace the class with the class of your choice.

				
					(function($) {
	$(document).ready(function() {

// **************************************************
// AÑADIR + Y - EN QUANTITY
// **************************************************

	if ($('.pi-addCart').length || $('.shop_table').length) {
		attachQtyButtons();
		if ($('.shop_table').length) {
			$(document.body).on("updated_cart_totals", function () {
				attachQtyButtons();
			});
		}
	}

	let updateCartTimeout;

	function attachQtyButtons() {
		const inputs = document.querySelectorAll(".input-text.qty");

		inputs.forEach((input) => {
			const decrementButton = document.createElement("button");
			decrementButton.textContent = "-";
			decrementButton.classList.add("decrement-button");

			const incrementButton = document.createElement("button");
			incrementButton.textContent = "+";
			incrementButton.classList.add("increment-button");

			input.insertAdjacentElement("beforebegin", decrementButton);
			input.insertAdjacentElement("afterend", incrementButton);

			decrementButton.addEventListener("click", function (e) {
				e.preventDefault();

				if (e.pointerType === "mouse" && input.value > input.min) {
					input.value = parseInt(input.value) - 1;
					$(input).change();
					updateCartAfterDelay(e);
				}
			});

			incrementButton.addEventListener("click", function (e) {
				e.preventDefault();
				if (input.max != ' ' || parseInt(input.value) < parseInt(input.max)) {
					input.value = parseInt(input.value) + 1;
					$(input).change();
					updateCartAfterDelay(e);
				}
			});
		});

		function updateCartAfterDelay(e) {
			if (updateCartTimeout) {
				clearTimeout(updateCartTimeout);
			}

			updateCartTimeout = setTimeout(() => {
				updateCartProducts(e);
			}, 1000); // Espera 1 segundo antes de ejecutar la actualización del carrito
		}
	}

	function updateCartProducts(e) {
		let cartForm = $('form.woocommerce-cart-form');

		if ($(cartForm).length) {
			$('[name="update_cart"]').click();
			e.preventDefault();
		}
	}
	
		}); //Cerrar function
})(jQuery); //Cerrar jquery
				
			

Now, let’s add some simple styles:

				
					/* ***************************************** */
/* BOTONES DE CANTIDAD */
/* ***************************************** */

.quantity input.qty{
    border: none !important;
}
.quantity{
	display: flex;
	gap: 0px;
	padding-right: 20px;
	align-items: center;
}
.quantity input{
	display: block !important;
	text-align: center !important;
	width: 40px !important;
	height: 10px !important;
	padding: 0px !important;
	font-size: 16px !important;
	background: red;
	pointer-events: none !important;
}
.quantity button{
	color: #000 !important;
	background: transparent !important;
	border: none !important;
	min-width: auto !important;
	width: auto !important;
	padding: 0px !important;
	margin: 0px !important;
	font-family: var(--e-global-typography-0c26c95-font-family), Sans-serif  !important;
	font-size: 28px !important;
	font-weight: normal !important;
	text-align: center !important;
}
.quantity button.increment-button{
	font-size: 19px !important;
}
.quantity input[type=number]::-webkit-inner-spin-button, 
.quantity input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none; 
	margin: 0; 
}
.quantity input[type=number] { 
    -moz-appearance:textfield;
}


				
			

That’s it!

Do you want to reverse your purchase?

1. General

Our Return Policy sets out the terms and conditions under which we offer refunds or exchanges for virtual products purchased on our website. By making a purchase, you agree to this policy in its entirety.

2. Eligibility for Returns

  1. Request Period: Return requests must be made within 5 days of purchase.
  2. Return Conditions: No refunds will be issued once the virtual product has been published to a production domain or if the pre-design has been approved by the client.
  3. Error Payments: In the event of a payment being made in error, refunds will only be permitted if no more than 2 business days have passed. If more days have passed, 5% of the amount will be retained as compensation for commission expenses.

3. Refund Process

  1. Request: To initiate a return, contact our customer service team at [email/contact] with the order number and a detailed description of the issue.
  2. Request Review: We will review your request and notify you of the status of the return within 10 business days.
  3. Refund Time: The refund process will take a minimum of 10 business days. The total refund time will also depend on the processing times of each banking institution.

4. Exceptions and Refunds

  1. Exceptions: In cases of technical defects or errors attributable to us, which prevent the proper functioning of the product, a correction or replacement will be considered, instead of a return.
  2. Refunds: Refunds will not be issued once the product has been published on a production domain or if the design has been previously approved. For payments in error, a 5% retention will be applied if more than 2 business days have passed.

5. Exchanges

Instead of a refund, you may choose to request modifications or adjustments, subject to evaluation and mutual agreement.

6. Contact

For any questions or concerns about our returns policy, please contact our customer service team at ventas@graphica.pe.

Note: We reserve the right to update this policy at any time, and any changes will be effective immediately upon posting on this page.

Pay safely with izipay

Secure payments with the izipay platform.

The izipay Terms and Conditions apply.

 

Your privacy is our priority

By purchasing products here, you agree to our Terms and Conditions.