Introducción
¿Le gustaría personalizar las etiquetas de los formularios de pago eliminando el guión que aparece cuando elige mostrar el precio después de la etiqueta? El comportamiento por defecto de los campos de pago incluye un guión entre la etiqueta y el precio mostrado, lo que no siempre se ajusta a sus preferencias de diseño.
¡No tema! En este tutorial, le guiaremos a través del proceso de personalización de las etiquetas de los campos de pago. Tanto si desea eliminar el guión por completo como sustituirlo por un carácter diferente, tenemos todo lo que necesita. Descubra dos métodos, uno sin fragmentos de código y otro basado en PHP, para conseguir sin esfuerzo la etiqueta y el precio que mejor se adapten a la estética de su formulario.
Creación del formulario
Para empezar, vamos a crear un formulario de pedido estándar con todos nuestros campos obligatorios que aceptará pagos. Si necesitas ayuda para crear este tipo de formulario, consulta esta útil guía.
Supresión del guión
Método 1: Sin fragmentos
Como le prometí, si desea cambiar o simplemente eliminar el guión por completo pero seguir mostrando el precio en el campo, escriba manualmente la etiqueta exactamente como desea que aparezca.
Usted notará que para este método, no hay necesidad de ningún fragmento de código y también nos hemos asegurado de que el Mostrar precio después de las etiquetas de los artículos está desactivado. Sólo tienes que escribir la etiqueta exactamente como desea que aparezca en el formulario que puede ser sin el guión o la sustitución del guión con dos puntos como lo hicimos en este ejemplo.
Método 2: basado en PHP
Si desea utilizar PHP para eliminar o cambiar este guión, primero tendrá que hacer clic en sus campos de Pago y en la pestaña Avanzado de cada campo, haga clic para activar Mostrar precio después de las etiquetas de los artículos para que el formulario coloque automáticamente su etiqueta y el precio del artículo separados por el guión.
Una vez guardado el formulario, es hora de añadir el fragmento. Sólo tienes que copiar y pegar este fragmento en su sitio.
/**
* Remove or change hyphen payment form labels
*
* @link https://wpforms.com/developers/how-to-customize-payment-form-labels/
*/
function wpf_remove_hyphen_separator() {
?>
<script>
document.addEventListener( 'DOMContentLoaded', function() {
// The querySelectorAll targets all Payment fields:
// .wpforms-image-choices-label is for Multiple / Checkbox Items with image choices turned on
// .wpforms-icon-choices-label is for Multiple / Checkbox Items with icon choices turned on
// .wpforms-field-payment-checkbox input + .wpforms-field-label-inline is for Checkbox Items without icon or image choices - in this case we know the label follows the checkbox input which allows us to target it only for this case
// .wpforms-field-payment-multiple input + .wpforms-field-label-inline is for Multiple Items without icon or image choices - same as above
// .wpforms-field-payment-select option is for Dropdown Items (both Classic and Modern)
var labelElements = document.querySelectorAll( ".wpforms-image-choices-label, .wpforms-icon-choices-label, .wpforms-field-payment-checkbox input + .wpforms-field-label-inline, .wpforms-field-payment-multiple input + .wpforms-field-label-inline, .wpforms-field-payment-select option" );
labelElements.forEach(function(labelElement) {
labelElement.textContent = labelElement.textContent.replace(' – ', ' : ');
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_remove_hyphen_separator', 10 );
Este fragmento buscará cualquier campo de pago y sustituirá el guión ( - ) por dos puntos ( : ).
¡Y eso es todo lo que necesitas para personalizar las etiquetas de los formularios de pago! ¿Desea realizar este cambio también para las notificaciones por correo electrónico? Eche un vistazo a nuestro artículo sobre Cómo cambiar el delimitador de pago dentro de las notificaciones por correo electrónico.
Relacionado
Acción de referencia: wpforms_wp_footer_end
PREGUNTAS FRECUENTES
P: ¿Qué utilizaría si no quisiera ningún separador?
R: Para dejar sólo un espacio entre la etiqueta y el precio, utilice este fragmento.
/**
* Remove or change hyphen payment form labels
*
* @link https://wpforms.com/developers/how-to-customize-payment-form-labels/
*/
function wpf_remove_hyphen_separator() {
?>
<script>
document.addEventListener( 'DOMContentLoaded', function() {
// The querySelectorAll targets all Payment fields:
// .wpforms-image-choices-label is for Multiple / Checkbox Items with image choices turned on
// .wpforms-icon-choices-label is for Multiple / Checkbox Items with icon choices turned on
// .wpforms-field-payment-checkbox input + .wpforms-field-label-inline is for Checkbox Items without icon or image choices - in this case we know the label follows the checkbox input which allows us to target it only for this case
// .wpforms-field-payment-multiple input + .wpforms-field-label-inline is for Multiple Items without icon or image choices - same as above
// .wpforms-field-payment-select option is for Dropdown Items (both Classic and Modern)
var labelElements = document.querySelectorAll( ".wpforms-image-choices-label, .wpforms-icon-choices-label, .wpforms-field-payment-checkbox input + .wpforms-field-label-inline, .wpforms-field-payment-multiple input + .wpforms-field-label-inline, .wpforms-field-payment-select option" );
labelElements.forEach(function(labelElement) {
labelElement.textContent = labelElement.textContent.replace(' – ', ' ');
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_remove_hyphen_separator', 10 );
Observará que el único cambio en estos fragmentos es esta línea replace(' – ', ' : '); a este replace(' – ', ' ');Aquí sólo dejamos un espacio para el separador.