Tuve el honor de hablar en WCEU 2020 Gracias a WooCommerce, quien me organizó en su pista de patrocinadores. Fue una charla corta y dulce del primer día (viernes), llamada «Personalizar el pago de WooCommerce para mejorar las conversiones“, Seguido de una sesión de codificación en vivo el sábado.
Aquí está la grabación de video de The Lightning Talk, así como algunos Fragmentos de PHP y CSS puede copiar/pegar Para mejorar su pago de WooCommerce e inmediatamente espere un aumento en la tasa de conversión. Entonces, ¡disfruta del video y luego prueba los fragmentos que encuentras a continuación!
Video: Personalización de la caja de WooCommerce para mejorar las conversiones
El pago de WooCommerce es la página más importante de su sitio web. Lo que significa que debes optimizarlo.
En esta presentación, eche un vistazo a los sitios web exitosos de comercio electrónico B2C y veo lo que hacen. Tal vez podamos identificar tendencias y debilidades y trabajar en eso.
Tenga en cuenta que hay Subtítulos disponibles. Simplemente haga clic en el «CC» botón en la parte inferior derecha del reproductor de video.
10 PHP y CSS WOOCOMMERCE PAGO DE CABAJE DE CABAJE Optimización de la tasa de conversión Fragmentos
En la sesión de seguimiento, compartí mi pantalla y comencé a codificar en vivo lo que aprendimos durante la charla de rayos. En pocas palabras, decidimos tomar medidas en los siguientes puntos:
- Retire el encabezado, la barra lateral, el pie de página para que no haya distracciones y el cliente esté completamente enfocado en la única llamada a la acción restante: el botón «PAGE»
- Mueva el resumen del pedido, el envío y la selección del método de pago al lado derecho para que siempre sea visible
- Dividir el diseño largo hecho de facturación, envío, notas de pedido, formulario de cupón, etc. en pasos visuales
- Mueva el formulario de cupón a la parte inferior para evitar el fraude de cupón
- Mantenga el formulario de envío siempre «abierto», ya que esa es la sección más importante para B2C
- Mueva el formulario de facturación debajo del formulario de envío
- Eliminar campos de facturación/envío innecesarios; ¡Cuantos más campos, menor sean su tasa de conversión!
- Hacer que la selección del método de envío se destaque más, porque el diseño predeterminado es bastante pobre
- Agregue un enlace «Editar carrito» para que los usuarios puedan volver a la página del carrito y editar su pedido
- Agregue insignias de seguridad / teléfono / preguntas frecuentes para que el cliente confíe en su negocio en línea
Pero antes de codificar, echemos un vistazo a la pila de herramientas.
Tema: Usé el tema oficial de WooCommerce, Escaparate. Esto ya viene con una personalización CSS incorporada para el pago. Otro favorito podría haber sido Tienda de tiendasUn tema creado para la velocidad y las conversiones de WooCommerce. De todos modos, porque uno de los fragmentos se trata de eliminar el encabezado y el pie de página de la página de pago, por lo tanto, usé mi Guía de gancho visual del tema del tema del escaparateasí que sé qué ganchos usar.
Manos: Además de usar mi guía de gancho visual para la tienda, también necesitamos conocer todos los ganchos de pago de WooCommerce. Mi Guía de gancho visual de WooCommerce para la página de pago es perfecto para lo que necesitamos.
Documento: WooCommerce tiene un buen documento que explica Cómo personalizar los campos de pago. En uno de los fragmentos eliminaremos algunos de los campos de facturación/envío, por lo que esta es una referencia imprescindible.
1. Fragmento de php: retire la página de pago de encabezado, barra lateral y pie @ wooCommerce
Este fragmento es válido para el Tema de la tienda SOLO. Deberá ajustar el código para su tema personalizado.
/** * @snippet Storefront Theme Remove Header Footer @ Checkout * @how-to businessbloomer.com/woocommerce-customization * @author Rodolfo Melogli, Business Bloomer * @testedwith WooCommerce 4.1 * @community https://businessbloomer.com/club/ */ add_action( 'wp', 'bbloomer_unhook_storefront_functions' ); function bbloomer_unhook_storefront_functions() { if ( is_checkout() ) { remove_all_actions( 'storefront_header' ); remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 ); remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 ); remove_action( 'storefront_footer', 'storefront_footer_widgets', 10 ); } }
En la tienda, una vez que retire la barra lateral con la llamada de eliminación anterior, el diseño no se ajustará automáticamente al ancho completo. La barra lateral desaparecerá, pero su «espacio» permanecerá allí y empujará el formulario de pago hacia la izquierda.
Eso significa que también necesitamos un poco de CSS para arreglar eso:
@media (min-width: 768px) { .woocommerce-checkout.right-sidebar .content-area { width: 100%; float: none; margin-right: 0; } }
¿Necesita una prueba visual? Haga clic aquí para ver la personalización de la página de pago de WooCommerce «antes» y «después» de capturas de pantalla.
2. Fragmento de CSS: mueva la revisión del pedido a la parte superior de la derecha @ WooCommerce Checkout Página
¡El tema de la tienda ya lo hace fuera de la caja! Entonces, parece que también estudiaron las tendencias de comercio electrónico y decidieron que esa era la elección correcta.
Por supuesto, la mayoría de los temas no lo hacen de forma predeterminada. Para inspiración, puede intentar copiar CSS de Storefront (es posible que deba cambiar algunos selectores):
@media (min-width: 768px) { /* Billing & Shipping @ Left */ .col2-set { width: 52.9411764706%; float: left; margin-right: 5.8823529412%; } /* Order Review @ Right */ #order_review_heading, #order_review { width: 41.1764705882%; float: right; margin-right: 0; clear: right; } }
Ahora, también me gustaría hacer que toda la revisión del pedido sea «Sticky». Lo que significa que, una vez que un usuario se desplaza hacia abajo para completar los campos de pago, por ejemplo, el cuadro de revisión de pedidos (ahora en la parte superior derecha) debe permanecer visible y «arreglado» en la parte superior del navegador.
He probado el siguiente CSS pero desafortunadamente no parece funcionar (Tema de la tienda). ¿Puedes ayudar tal vez?
#order_review { position: sticky; top: 0; }
¿Necesita una prueba visual? Haga clic aquí para ver la personalización de la página de pago de WooCommerce «antes» y «después» de capturas de pantalla.
3. Fragmento de php: mueva el formulario de cupón a la página de pago inferior @ WooCommerce
Podemos usar la guía de gancho visual para el pago de esto. Primero, lo eliminamos, luego lo leemos en la parte inferior.
/** * @snippet Move Coupon @ Checkout Bottom * @how-to businessbloomer.com/woocommerce-customization * @author Rodolfo Melogli, Business Bloomer * @testedwith WooCommerce 4.1 * @community https://businessbloomer.com/club/ */ remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 ); add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
¿Necesita una prueba visual? Haga clic aquí para ver la personalización de la página de pago de WooCommerce «antes» y «después» de capturas de pantalla.
4. Fragmento de PHP: mantenga el formulario de envío siempre «abierto» en la página de pago de WooCommerce
Afortunadamente, si mira el archivo de plantilla de shipping.php, WooCommerce nos da un filtro aquí:
apply_filters( 'woocommerce_ship_to_different_address_checked', 'shipping' === get_option( 'woocommerce_ship_to_destination' ) ? 1 : 0 )
Lo que significa que ahora puedo codificar un fragmento de PHP simple para anular ese comportamiento:
/** * @snippet Shipping Always Open @ Checkout * @how-to businessbloomer.com/woocommerce-customization * @author Rodolfo Melogli, Business Bloomer * @testedwith WooCommerce 4.1 * @community https://businessbloomer.com/club/ */ add_filter( 'woocommerce_ship_to_different_address_checked', 'bbloomer_open_shipping_checkout' ); function bbloomer_open_shipping_checkout() { return 1; }
¿Necesita una prueba visual? Haga clic aquí para ver la personalización de la página de pago de WooCommerce «antes» y «después» de capturas de pantalla.
5. Fragmento de CSS: mueva el formulario de facturación a continuación Formulario de envío @ WooCommerce Checkout Página
En primer lugar, los formularios de facturación y envío deben hacerse en todo el ancho. El tema de la tienda ya hace eso, así que en caso de que esté usando otro tema, intente con esto:
.col2-set .col-1, .col2-set .col-2 { float:none; width: 100% margin: 0; }
Una vez que tenga facturación y envío uno superior al otro, ahora queremos presentar el formulario de envío primero (arriba) y el formulario de facturación después (abajo). Es posible hacer esto con PHP, pero hay una forma mucho más ordenada de lograrlo: CSS Flex.
.col2-set { display: flex; flex-direction: column; } .col2-set > .col-1 { order: 2; } .col2-set > .col-2 { order: 1; }
En pocas palabras, estoy declarando que los detalles del cliente (contenedor de formularios de facturación y envío) se muestran como «flexión». De esta manera, puedo usar la propiedad de «pedido» y cambiar el orden vertical de los divs de facturación y envío.
¿Necesita una prueba visual? Haga clic aquí para ver la personalización de la página de pago de WooCommerce «antes» y «después» de capturas de pantalla.
6. Fragmento de PHP: divida el diseño largo hecho de facturación, envío, revisión de pedido en pasos visuales en la página de pago de WooCommerce
Aquí usamos una vez más la guía de gancho visual e imprimimos 3 nuevos divs en posiciones específicas (envío arriba, facturación superior, revisión de pedido por encima).
/** * @snippet Add Visual Steps @ Checkout * @how-to businessbloomer.com/woocommerce-customization * @author Rodolfo Melogli, Business Bloomer * @testedwith WooCommerce 4.1 * @community https://businessbloomer.com/club/ */ add_action( 'woocommerce_checkout_shipping', 'bbloomer_checkout_step1' ); function bbloomer_checkout_step1() { echo 'STEP1
'; } add_action( 'woocommerce_checkout_billing', 'bbloomer_checkout_step2' ); function bbloomer_checkout_step2() { echo 'STEP2
'; } add_action( 'woocommerce_checkout_before_order_review_heading', 'bbloomer_checkout_step3' ); function bbloomer_checkout_step3() { echo 'STEP3
'; }
Por supuesto que también necesitamos algunos CSS:
.steps { background: black; color: white; display: inline-block; padding: 0.5em 2em; }
¿Necesita una prueba visual? Haga clic aquí para ver la personalización de la página de pago de WooCommerce «antes» y «después» de capturas de pantalla.
7. Fragmento de PHP: elimine los campos de facturación/envío innecesarias @ WooCommerce Checkout Página
Aquí, la referencia de documentación que compartí anteriormente viene al rescate. El «wooCommerce_checkout_fieldsEl filtro «nos permite» desanimarse «los campos que no necesitamos.
/** * @snippet Remove Ship/Bill Fields @ Checkout * @how-to businessbloomer.com/woocommerce-customization * @author Rodolfo Melogli, Business Bloomer * @testedwith WooCommerce 4.1 * @community https://businessbloomer.com/club/ */ add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' ); function custom_override_checkout_fields( $fields ) { unset( $fields['order']['order_comments'], $fields['shipping']['shipping_company'], $fields['shipping']['shipping_address_2'], $fields['billing']['billing_company'], $fields['billing']['billing_address_2'], $fields['billing']['billing_postcode'], $fields['billing']['billing_phone'] ); return $fields; }
¿Necesita una prueba visual? Haga clic aquí para ver la personalización de la página de pago de WooCommerce «antes» y «después» de capturas de pantalla.
8. Fnippet (idea): hacer que la selección del método de envío se destaque más en la página de pago de WooCommerce
Este es el fragmento más difícil, y eso se debe a que WooCommerce no es realmente flexible a este respecto. Para demostrar eso, primero debemos averiguar cómo se genera el formulario del método de envío.
En la plantilla de «revisión de pedidos» de pago, encontramos esta PHP:
cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
Es evidente que necesitamos estudiar cómo wc_cart_totals_shipping_html () La función funciona, para ver si hay filtros que nos permitan personalizar la salida.
Desafortunadamente, esa función simplemente llama al shipping de carro.php archivo de plantilla gracias a la wc_get_template () función; Desafortunadamente, digo porque esa misma plantilla también se usa en la página del carrito.
Ahora, esto se está volviendo más complicado que yo, pero si deseamos sacar el formulario del método de envío de esa tabla de revisión de pedidos, básicamente necesitamos escribir o poseer una plantilla personalizada (por ejemplo, checkout-shipping.php), colóquelo en la / Carpeta de WooCommerce de nuestro tema infantil, y luego usa el wc_get_template Filtrar para cargar nuestra plantilla alternativa solo en la página de pago. Un poco complejo, pero factible, te lo dejaré 😀
¿Necesita una prueba visual? Haga clic aquí para ver la personalización de la página de pago de WooCommerce «antes» y «después» de capturas de pantalla.
9. Fnippet: Agregue un enlace «Editar carrito» en la página de pago de WooCommerce
Debido a que eliminamos todos los enlaces de la página de pago, es justo dar al usuario la oportunidad de volver a la página del carrito en caso de que quieran cambiar las cantidades o eliminar productos.
Puedes elegir cualquiera Hook de pago de WooCommercepero en este caso seleccioné el «wooCommerce_checkout_before_order_review», que se coloca justo debajo del encabezado «Su pedido».
/** * @snippet Add edit cart link @ Checkout * @how-to businessbloomer.com/woocommerce-customization * @author Rodolfo Melogli, Business Bloomer * @testedwith WooCommerce 4.1 * @community https://businessbloomer.com/club/ */ add_action( 'woocommerce_checkout_before_order_review', 'bbloomer_edit_cart_checkout' ); function bbloomer_edit_cart_checkout() { echo 'Edit Cart'; }
Con un poco de CSS, también puede colocar esto en la misma línea que «su pedido» y guardar algo de espacio.
¿Necesita una prueba visual? Haga clic aquí para ver la personalización de la página de pago de WooCommerce «antes» y «después» de capturas de pantalla.
10. Fragmento de PHP: agregue el número de teléfono @ Página de pago de WooCommerce
Puede agregar cualquier contenido que desee a la página de pago, principalmente si ayuda a los clientes potenciales a confiar en su negocio.
Por lo general, agregaría insignias de pago seguras, preguntas frecuentes o enlaces de contacto, así como una forma inmediata de ponerse en contacto con usted (chat en vivo y número de teléfono).
Entonces, esta es cómo agregar un número de teléfono justo debajo del botón «Coloque el pedido» en la página de pago.
/** * @snippet Phone Number @ Checkout * @how-to businessbloomer.com/woocommerce-customization * @author Rodolfo Melogli, Business Bloomer * @testedwith WooCommerce 4.1 * @community https://businessbloomer.com/club/ */ add_action( 'woocommerce_review_order_after_submit', 'bloomer_phone_checkout_page' ); function bloomer_phone_checkout_page() { ?> Need help? Give us a call at +1 123456789
¿Necesita una prueba visual? Haga clic aquí para ver la personalización de la página de pago de WooCommerce "antes" y "después" de capturas de pantalla.
