El tema por defecto de WooCommerce, StoreFront, tiene muchas virtudes, entre las que destaca su rendimiento y código limpio, pero si en algo no destaca es en la posibilidad de personalización de páginas como la del carrito o finalizar compra.
Por ejemplo, mientras en temas como Astra o Proteo puedes crear una experiencia de finalizar compra sin distracciones, para que el cliente pueda pagar su compra sin barras laterales, cabeceras o pies de página que atraigan su atención, con StoreFront no tenemos esa posibilidad a golpe de clic.
Por ejemplo, con Astra podemos definir dónde queremos barras laterales desde el personalizador, y además en cada página eliminar todo lo que nos sobre:
Y en Proteo tenemos también la posibilidad de especificar qué elementos globales del tema se mostrarán en cada página:
Sin embargo, en StoreFront no tenemos nada de esto, pero algo se puede hacer…
Índice de contenidos
Pago sin distracciones con plantillas de página
Algo que sí trae el tema StoreFront son plantillas de página, y simplemente cambiando la plantilla editando la página de finalizar compra podemos conseguir una experiencia con menos distracciones.
Por ejemplo, si elegimos la plantilla de ancho completo…
Ya conseguimos quitar la barra lateral:
No te recomiendo usar la otra plantilla disponible, la de página de inicio, porque no quitas elementos, los añades.
Pago sin distracciones con códigos
La otra posibilidad es usar la fuerza del código para personalizar a tope la página de finalizar compra y, ahora sí, quitar todo lo que quieras, todo.
Aquí el código mágico:
/* Checkout sin distracciones en Storefront */
add_action( 'wp', 'ayudawp_checkout_storefront_limpio' );
function ayudawp_checkout_storefront_limpio() {
if ( ! is_checkout() ) return;
remove_all_actions( 'storefront_header' ); //Quitar cabecera completa
remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 ); //Quitar migas de pan
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 ); //Quitar barra lateral
remove_action( 'storefront_footer', 'storefront_footer_widgets', 10 ); //Quitar widgets del footer
}Con el código anterior quitas toda la cabecera, la barra lateral, las migas de pan y los widgets del pie de página, dejando una página de finalizar compra realmente sin distracciones.
Ahora bien, puedes optar por algo menos radical, o más granular, decidiendo qué quitas de cabecera y qué no, usando un código como el siguiente:
/* Checkout sin distracciones en Storefront */
add_action( 'wp', 'ayudawp_checkout_storefront_limpio' );
function ayudawp_checkout_storefront_limpio() {
if ( ! is_checkout() ) return;
remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 ); //Quitar migas de pan
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 ); //Quitar barra lateral
remove_action( 'storefront_header', 'storefront_social_icons', 10 ); //Quitar iconos sociales
remove_action( 'storefront_header', 'storefront_primary_navigation', 50 ); //Quitar menú principal
remove_action( 'storefront_header', 'storefront_secondary_navigation', 30 ); //Quitar menú secundario
remove_action( 'storefront_header', 'storefront_product_search', 40 ); //Quitar buscador
remove_action( 'storefront_header', 'storefront_header_cart', 60 ); //Quitar carrito de cabecera
remove_action( 'storefront_footer', 'storefront_footer_widgets', 10 ); //Quitar widgets del footer
}En vez de quitar toda la cabecera en este código tenemos una línea para cada elemento de la misma, donde ya tú decides qué línea dejas y cuál quitas.
Para finalizar, si quitas la barra lateral con este código, tendrás que hacer un ajuste, porque sino ya te habrás dado cuenta de que la barra lateral no se muestra pero se mantiene el espacio en blanco.
Una buena opción es usar la plantilla de ancho completo que vimos antes, y la otra añadir este código CSS adicional al personalizador:
@media (min-width: 768px) {
.woocommerce-checkout.right-sidebar .content-area {
width: 100%;
float: none;
margin-right: 0;
}
}Espero que estos trucos te ayuden a vender más, pero sobre todo a tener menos carritos abandonados por culpa de las distracciones al finalizar compra.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
