Cómo mejorar la página de carrito vacía de Divi

Que Divi es un gran tema está fuera de toda duda, y que su constructor es una herramienta incomparable para crear fantásticas páginas de conversión y ventas está sobradamente demostrado en miles de webs y tiendas online.

Ahora bien, no todo es perfecto en Divi…

Una de las cosas que menos me han gustado siempre de Divi es la página de carrito … cuando está vacío el carrito. Reconócelo, es horrible…

Lo que muestra es ese espacio vacío, inútil, pero no solo eso, sino que además tienes todo el pie de página «subido» quedando una página corta, inservible, con un enorme espacio en blanco debajo del pie de página, y carente de diseño alguno.

Para el usuario es un horror, no aporta nada, y encima va a desmerecer el resto del diseño de tu tienda online, al parecer una página como a medio hacer.

Estarás de acuerdo en que es terrible ¿verdad?

¿La mejoramos?

Para conseguirlo vamos a usar un poco de PHP y de CSS, de manera que no solo le añadiremos funcionalidad, sino también mejoras de aspecto.

Lo primero el PHP…

Añade un código como el siguiente al archivo functions.php del tema hijo de Divi:

/* Página de carrito de Divi personalizada */
function ayudawp_carrito_divi_personalizado()
{
ob_start();?>
<div class="empty-cart-header">
<?php woocommerce_breadcrumb(); ?>
</div>
<div class="empty-cart">
<span class="empty-cart-icon"></span>
<h2>¡Tu carrito está ahora mismo vacío!</h2>
<p> ¿Aún no te has decidido?. Tenemos servicios y productos que te encantarán, revisa el menú de arriba o ve a la página de la tienda para comprobarlo.</p>
<p>Si no sabes por dónde empezar te recomiendo <a href="#">nuestra página de servicios</a> o la lista de <a href="#">los más vendidos</a></p>
</div>
<?php
$output = ob_get_clean();
ob_flush();
echo et_core_intentionally_unescaped($output, 'html');
}
remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_filter('woocommerce_cart_is_empty', 'ayudawp_carrito_divi_personalizado', 20 );

Si no tienes acceso por FTP o al editor de archivos de tu alojamiento web puedes hacerlo desde el editor de temas de WordPress.

Y luego tenemos el CSS, que podría ser así:

/* Estilos para el carrito de Divi personalizado */
.empty-cart h2 {
line-height: 2em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.empty-cart p {
line-height: 2em;
max-width: 600px;
margin: auto;
}
.empty-cart {
text-align: center;
padding-bottom: 10vw;
}
.container p.return-to-shop {
text-align: center ;
padding-bottom: 80px;
}
.empty-cart-header {
float: right;
margin-top: -50px;
position: relative;
}
.empty-cart-icon {
display: inline-block;
line-height: initial;
font-family: ETmodules;
font-size: 40px;
color: #2ea3f3;
border: 2px solid #2ea3f3;
border-radius: 50%;
padding: 30px;
margin-bottom: 20px;
}

En este caso añade el código CSS anterior al personalizador, desde Apariencia → Personalizar → CSS adicional.

Y verás cómo cambia inmediatamente el aspecto de la página del carrito vacía en Divi, a algo más atractivo y útil.

No me puedes negar que así está muuucho mejor …

¿Qué puedo cambiar en los códigos de ejemplo?

Por supuesto, son códigos de ejemplo, y puedes hacer cambios según lo necesites.

PHP

En el código PHP no es que puedas es que debes cambiar al menos el texto entre las etiquetas HTML de párrafo y encabezado, para poner el texto y enlaces que tú quieras.

CSS

En cuanto al CSS, aquí es opcional. Si te gusta como queda pues lo dejas tal cual, sino a tu gusto, ya sean los colores, fuentes, tamaños o visualización, con un poco de CSS.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!