En este tutorial, te guiaré a través del proceso para crear un formulario de donaciones utilizando Elementor Pro y Dynamic Content. Lo emocionante de este proceso es que los comentarios dejados en el formulario de donaciones se publicarán automáticamente en la página del evento de donaciones.
Creación de un Custom Post
Comencemos diferenciando las donaciones de otros contenidos. Para ello, instalaremos el plugin gratuito «CPTUI» que nos permitirá crear un tipo de contenido personalizado para las donaciones.
- Instalación de CPTUI: Encuentra el plugin en el repositorio de WordPress y actívalo.
- Crear un Tipo de Contenido Personalizado: Accede a la pestaña generada por el plugin y configura un nuevo tipo de contenido llamado «Donaciones». Define sus atributos y características según tus necesidades.
Creación de Tablas para Importe y Evento de Donación
Para visualizar de manera organizada el importe donado y el evento correspondiente, crearemos dos tablas nuevas utilizando código personalizado.
- Instalación de Code Snippets: Utiliza el plugin gratuito «Code Snippets» desde el repositorio de WordPress.
- Agregar Código Personalizado: Copia y pega el código proporcionado en el tutorial en un nuevo fragmento de código. Esto generará las tablas necesarias en la sección de donaciones.
Configuración de Pagos con Stripe
Si optas por utilizar Stripe para procesar los pagos, asegúrate de configurar las API Keys correctamente en la sección de integraciones de Dynamic Content.
- Configuración de API Keys: Accede a la sección de integraciones de Dynamic Content y proporciona las claves pública y secreta generadas desde la herramienta de desarrolladores de Stripe.
- Guardar Configuración: Una vez ingresadas las claves, guarda la configuración para habilitar los pagos a través de Stripe.
Diseño de la Página del Evento de Donación
Ahora, crearemos el diseño de la página del evento donde se mostrarán los detalles del mismo y el formulario de donación.
- Creación de la Entrada del Evento: Crea una nueva entrada y personaliza su contenido con Elementor.
- Estructura de la Página: Utiliza Elementor para diseñar la estructura de la página, organizando los elementos de acuerdo a tus preferencias y necesidades.
Creación del Formulario de Donación
Finalmente, configuraremos el formulario de donación utilizando Elementor y Dynamic Content para recopilar los datos necesarios y procesar los pagos.
- Configuración del Formulario: Utiliza Elementor para diseñar y personalizar el formulario de donación, asegurándote de incluir los campos necesarios como importe a donar y detalles de la tarjeta de crédito.
- Configuración de Guardado de Datos: Utiliza Dynamic Content para configurar la redirección y guardar los datos del formulario, incluyendo el importe donado y el evento correspondiente.
- Personalización de Mensajes: Asegúrate de personalizar los mensajes de confirmación y éxito para proporcionar una experiencia óptima al usuario.
¡Y eso es todo! Con estos pasos, estarás listo para crear y gestionar formularios de donaciones de manera efectiva utilizando Elementor y Dynamic Content. Si tienes alguna pregunta, ¡no dudes en dejarla en los comentarios!
Recuerda apoyar el contenido dando like, suscribiéndote al canal y activando las notificaciones para futuros tutoriales. ¡Gracias por tu interés y apoyo!
// Agregar columnas personalizadas después del título
function agregar_columnas_personalizadas($columns) {
$new_columns = array();
foreach ($columns as $key => $value) {
$new_columns[$key] = $value;
// Insertar la nueva columna 'importe_donado' después de la columna 'title'
if ($key === 'title') {
$new_columns['importe_donado'] = 'Importe Donado';
}
}
// Agregar otra columna 'id_evento' después de la columna 'importe_donado'
$new_columns['id_evento'] = 'Evento de donación';
return $new_columns;
}
add_filter('manage_donaciones_posts_columns', 'agregar_columnas_personalizadas');
// Mostrar los valores de las metaetiquetas en las nuevas columnas
function mostrar_valores_metaetiquetas($column, $post_id) {
// Verificar si la columna es 'importe_donado'
if ($column === 'importe_donado') {
// Obtener el valor de la metaetiqueta 'importe' para este post
$importe_donado = get_post_meta($post_id, 'importe', true);
// Agregar ' euros' al valor
$importe_donado_with_euros = $importe_donado . ' euros';
// Mostrar el valor en la columna
echo $importe_donado_with_euros;
}
// Verificar si la columna es 'id_evento'
elseif ($column === 'id_evento') {
// Obtener el valor de la metaetiqueta 'id_evento' para este post
$id_evento = get_post_meta($post_id, 'evento', true);
// Mostrar el valor en la columna
echo $id_evento;
}
}
add_action('manage_donaciones_posts_custom_column', 'mostrar_valores_metaetiquetas', 10, 2);
<script>
var elementosH3 = document.querySelectorAll('h3.elementor-post__title');
elementosH3.forEach(function(h3) {
var enlace = h3.querySelector('a');
if (enlace) {
enlace.removeAttribute('href');
}
});
</script>
