Instalar WordPress

Guía de Instalación

Optimizar WordPress

Optimización y Velocidad

Seguridad de WordPress

Guía de Protección

Ampliar campos de dirección en formulario de finalización de compra en WooCommerce

Cómo Ampliar Campos de Dirección en WooCommerce

WooCommerce es el plugin más popular de WordPress cuando se trata de crear una tienda virtual para vender casi todo tipo de productos en internet, para todos los países del mundo, con un formulario de finalización de compra bastante bueno, sin embargo, algunos usuarios les gusta ver el campo de dirección más amplio, ocupando todo el espacio posible. Hoy te explicaremos cómo ampliar campos de dirección en WooCommerce

Ampliar Campos de Dirección

Cada vez que compras un producto en una tienda virtual, en este caso una tienda hecha con WooCommerce, es necesario rellenar un formulario, con los datos de la ubicación y dirección donde quieres recibir el producto.

Dos campos de dirección en formulario de finalización de compra en WooCommerce

En WooCommerce hay dos campos dedicados a la dirección de envío, que vienen uno después del otro. Normalmente estos dos campos no ocupan todo el espacio disponible en la página, y se ven relativamente ajustados, lo que podría resultar incómodo cuando un cliente escribe una dirección larga.

Además, estéticamente tiene una presentación dispareja respecto a los demás campos del formulario de finalización de compra en WooCommerce. Resolver esto es bastante sencillo.

add_filter('woocommerce_billing_fields', 'ampliar_campos_direccion_wc');
function ampliar_campos_direccion_wc( $fields ) {
     $fields['billing_address_1']['class'] = array( 'form-row-wide' );
     $fields['billing_address_2']['class'] = array( 'form-row-wide' );
     return $fields;
}

Antes que todo, te recomendamos crear un backup completo de tu sitio web y guardarlo en un lugar seguro, para preservar la integridad de tu WordPress.

Para ampliar campos de dirección en el formulario de compra, pegas el código que aparece arriba en el archivo functions.php que se ubica en el actual tema activo en tu sitio web.

Otra forma de hacer esto es crear un plugin personalizado donde almacenas todos los códigos que vas integrando en el ecosistema de tu WordPress. Esto te permite separar el código de las otras funcionalidades propias del tema. Cualquier posible error en el código automáticamente WordPress desactivará el plugin, y no afectará el funcionamiento normal de tu sitio web.

Básicamente lo que hace este código es añadir una clase CSS estilizada previamente, a los campos del formulario de finalización de compra, para ampliar campos de dirección en ese formulario.

Esto es todo, te invitamos a seguirnos en Facebook para recibir los últimos tutoriales de cómo optimizar el funcionamiento y mejorar la seguridad de tu WordPress. También puedes hacerlo por Twitter.

Deja un comentario

Si continúas utilizando este sitio significa que aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar