Cómo lanzar una superposición desde otros botones o enlaces

Este artículo detalla la adición de código personalizado a su sitio de WordPress y está destinado a desarrolladores. Aunque no ofrecemos servicios de desarrollo personalizado, si necesita ayuda, recomendamos encarecidamente Seahawk Media.

Los fragmentos de código personalizados se proporcionan tal cual y no hay garantía de que sigan funcionando en múltiples versiones de WP Simple Pay.

Paso 1: Actualizar la URL del botón

Para lanzar un formulario de pago de Stripe Checkout o overlay a través de un enlace de botón personalizado, necesitas cambiar la URL del enlace del botón. El ajuste de la URL del enlace del botón dependerá de cómo estés editando tu contenido. Actualiza la URL a la siguiente:

#form-176

Reemplaza 176 con el ID del formulario de pago que deseas lanzar. Puedes encontrar el ID de tu formulario de pago en la pantalla de edición del formulario. El ID del formulario es la parte numérica del shortcode de Simple Pay, como se muestra a continuación.

A continuación, inserta el shortcode del formulario de pago de WP Simple Pay en tu página como lo harías normalmente: . Esto hará que el formulario de pago se muestre en la página, pero lo ocultaremos en los siguientes pasos para asegurar que solo el enlace del botón personalizado sea visible.

Paso 2: Añadir JavaScript personalizado

Hay muchas maneras de añadir código JavaScript personalizado a tu sitio web de WordPress. Consulta nuestra guía recomendada para añadir fragmentos de código. Recomendamos que añadas JavaScript al pie de página de tu tema usando el plugin gratuito WP Code. Ve a Fragmentos de código → Encabezado y Pie de página, y luego añade el Javascript personalizado a la sección de Pie de página como se muestra a continuación.

<script>
( function( $ ) {
	// Update comma separated list with payment form ID(s) to launch.
	var ids = [ '123' ];

	// Do not modify.
	ids.forEach( function( id ) { 
		$( 'a[href~="#form-' + id + '"]' ).click( function( e ) {
			e.preventDefault(); 
			$( '.simpay-form-' + id + ' .simpay-payment-btn' ).click();
			$( '#simpay-modal-control-' + id ).click(); 
		}); 
	});
})( jQuery );
</script>

Reemplaza el 123 en la línea 4 con el ID de tu formulario de pago. Si estás creando varios botones en una página, puedes añadir una lista separada por comas de los IDs de formularios de pago que deseas poder lanzar.

Paso 3: Añadir CSS personalizado

Hay muchas maneras de añadir código CSS personalizado a tu sitio web de WordPress. Hemos descrito algunas formas en nuestra documentación. Recomendamos que añadas CSS al encabezado de tu tema usando el plugin gratuito WP Code. Ve a Fragmentos de código → Encabezado y Pie de página, y luego añade tu CSS a la sección Encabezado:

<style>
body:not(.simpay-form-preview) .simpay-form-wrap {
  display: none;
} 
</style>

Esto ocultará la salida predeterminada del shortcode , por lo que solo será visible el enlace del botón personalizado.