In this tutorial, I will walk you through the process of creating a donation form using Elementor Pro and Dynamic Content. The exciting thing about this process is that the comments left on the donation form will automatically be posted on the donation event page.
Creating a Custom Post
Let’s start by differentiating donations from other content. To do this, we will install the free plugin “CPTUI” that will allow us to create a custom content type for donations.
- Installing CPTUI: Find the plugin in the WordPress repository and activate it.
- Create a Custom Content Type: Go to the tab generated by the plugin and configure a new content type called “Donations”. Define its attributes and characteristics according to your needs.
Creating Tables for Donation Amount and Event
To display the donated amount and the corresponding event in an organized manner, we will create two new tables using custom code.
- Installing Code Snippets: Use the free plugin “Code Snippets” from the WordPress repository.
- Add Custom Code: Copy and paste the code provided in the tutorial into a new code snippet. This will generate the necessary tables in the donations section.
Setting up payments with Stripe
If you choose to use Stripe to process payments, make sure to set up your API Keys correctly in the Dynamic Content integrations section.
- API Keys Configuration: Go to the Dynamic Content integrations section and provide the public and secret keys generated from the Stripe developer tool.
- Save Settings: Once you have entered the keys, save the configuration to enable payments through Stripe.
Donation Event Page Design
Now, we will create the event page layout where the event details and donation form will be displayed.
- Creating the Event Ticket: Create a new post and customize its content with Elementor.
- Page Structure: Use Elementor to design the structure of the page, organizing the elements according to your preferences and needs.
Creating the Donation Form
Finally, we will set up the donation form using Elementor and Dynamic Content to collect the necessary data and process payments.
- Form Settings: Use Elementor to design and customize your donation form, making sure to include the necessary fields such as donation amount and credit card details.
- Data Saving Settings: Use Dynamic Content to set up the redirect and save the form data, including the donation amount and the corresponding event.
- Message Personalization: Be sure to customize confirmation and success messages to provide an optimal user experience.
And that’s it! With these steps, you’ll be ready to effectively create and manage donation forms using Elementor and Dynamic Content. If you have any questions, feel free to leave them in the comments!
Please remember to support the content by liking, subscribing to the channel, and turning on notifications for future tutorials. Thank you for your interest and support!
// 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>
