Cómo editar y personalizar la página del carrito de WooCommerce

Cuando usas WooCommerce para crear tu tienda online, obtienes algunas plantillas de página útiles diseñadas específicamente para el comercio electrónico, incluida una página del carrito. Sin embargo, es posible que quieras mejorar el aspecto y la funcionalidad predeterminados. En ese caso, querrás saber cómo editar la página del carrito de WooCommerce.

La buena noticia es que este proceso es bastante sencillo. Además, hay varios enfoques diferentes que puedes probar. Por ejemplo, puedes usar bloques para personalizar la página del carrito de WooCommerce. O, si quieres tener un mayor control, puedes modificar manualmente la página del carrito.

En esta guía, empezaremos explicando por qué podrías querer editar la página del carrito de WooCommerce. Después, te mostraremos cuatro formas diferentes de hacerlo. Por último, compartiremos algunos consejos y buenas prácticas antes de responder a algunas preguntas frecuentes. 

Por qué podrías querer editar la página del carrito en WooCommerce

Antes de adentrarnos en el cómo, vale la pena entender por qué esto es importante. Según el Baymard Institute, la tasa media documentada de abandono del carrito en todos los sectores es de casi el 70 %. Eso significa que aproximadamente 7 de cada 10 compradores que añaden artículos a su carrito nunca completan la compra. Una página del carrito mal optimizada, que es lenta, confusa o carece de señales de confianza, es uno de los principales motivos.

Personalizar la página del carrito de WooCommerce te permite abordar directamente estos puntos de fricción: añadir insignias de confianza, destacar los umbrales de envío gratuito, mostrar ventas adicionales y crear una experiencia de marca que mantenga a los compradores avanzando hacia el pago.

Dicho esto, este es el aspecto que podría tener la página del carrito predeterminada de WooCommerce:

Como puedes ver, la página del carrito predeterminada ofrece una buena base. Muestra un resumen de la información esencial del producto, como el precio, la cantidad y el subtotal.

Los clientes pueden modificar la cantidad de un producto directamente desde la página del carrito y, después, hacer clic en un botón para actualizar sus carritos. Además, esta página ofrece a los clientes un lugar donde añadir un código de cupón, así como un sencillo botón Finalizar compra.

Aun así, dependiendo de tu tema, esta página del carrito puede parecer un poco simple y minimalista. Es posible que no encaje con tu marca ni con el diseño general de tu sitio. Además, no está realmente optimizada para tu público específico.

Para animar a los visitantes a comprar más, quizá quieras añadir elementos de venta adicional y venta cruzada, como una sección de «A otras personas también les gusta» o «Puede que te interese». También puede interesarte una funcionalidad especializada, como un botón «Guardar para más tarde». 

De este modo, los compradores que no estén seguros de una compra podrán volver más fácilmente a sus artículos favoritos. Después, podrías ponerte en contacto con estos clientes potenciales mediante campañas de correo electrónico segmentadas.

Además, tu página del carrito ofrece una buena oportunidad para incluir elementos clave de la marca, como tu logotipo y los colores de tu empresa. Estos elementos no se incluyen de forma predeterminada, pero al personalizar la página del carrito puedes asegurarte de que coincida con el resto de tu sitio. Esto puede aumentar el reconocimiento de la marca e impresionar a los clientes.

Asimismo, una página del carrito personalizada favorece una experiencia de compra fluida. Permite a los usuarios revisar y modificar fácilmente todos los artículos de sus carritos antes de pasar por caja.

En general, editar la página del carrito de WooCommerce puede ayudarte a ofrecer una mejor experiencia al cliente y animar a los visitantes a completar una compra. Además, es rápido y sencillo.

Cómo editar y personalizar la página del carrito de WooCommerce

Ahora que sabes por qué podrías querer editar el aspecto de la página del carrito predeterminada de WooCommerce, exploremos cuatro formas diferentes de hacerlo. Lo mejor es familiarizarte con todas las opciones disponibles para que puedas elegir el enfoque que mejor se adapte a tus necesidades.

1. Editar la página del carrito usando bloques

Si llevas usando WordPress aunque sea poco tiempo, probablemente sabrás que los bloques son el centro del proceso de diseño. Este sistema basado en bloques facilita que los usuarios sin conocimientos técnicos creen sitios personalizados impresionantes sin tener que lidiar con código.

Así que quizá no sorprenda que una de las formas más sencillas de personalizar la página del carrito sea mediante los bloques de WooCommerce. Hay un par de formas diferentes de hacerlo. 

Si actualmente no utilizas un tema de bloques (que desbloquea todo el potencial de la edición completa del sitio), aún puedes utilizar los bloques de WooCommerce. Estos se incluyen de forma predeterminada con WooCommerce 6.9 o versiones posteriores, o puedes utilizar la extensión WooCommerce Cart and Checkout blocks (algunos pueden referirse a ella como el plugin WooCommerce Blocks). 

Después de instalar la herramienta, ve a la página predeterminada del carrito de WooCommerce y ábrela en el editor de bloques.

Elimina [woocommerce_cart] de la página. Después, busca el bloque Carrito de WooCommerce (no el bloque Minicarrito).

Añádelo a la página y verás al instante que ofrece algunos elementos de diseño útiles, como una sección Puede que te interese….

Observarás que actualmente estás viendo un carrito lleno, pero puedes hacer clic en el botón con el icono del ojo etiquetado como Carrito lleno para cambiar la vista a una página de Carrito vacío.

Como puedes ver, la página del carrito de WooCommerce cambia considerablemente cuando no contiene artículos. Muestra un sencillo enlace Explorar la tienda y destaca algunos artículos nuevos de la tienda.

En este punto, puedes personalizar aún más el diseño de tu nueva página del carrito mediante bloques. Ten en cuenta que, además del bloque de carrito, la extensión WooCommerce Blocks te ofrece más de 30 elementos con los que puedes experimentar. Estos incluyen el bloque de productos seleccionados manualmente y el bloque de productos en oferta.

Si estás utilizando un tema de bloques, puedes personalizar la página del carrito con el Editor del sitio. Ve a Apariencia → Editor. Selecciona Plantillas → Gestionar todas las plantillas → Carrito. Ahora puedes cambiar el aspecto de la página del carrito utilizando bloques, tal como acabamos de explicar.

2. Utiliza otras extensiones de WooCommerce

Además de WooCommerce Blocks, hay muchas extensiones adicionales que puedes utilizar para personalizar aún más la página del carrito. Aunque la mayoría son de pago, normalmente son asequibles y merecen mucho la pena.

Por ejemplo, puedes añadir fácilmente ventas adicionales y ventas cruzadas a la página del carrito cuando compras la extensión Cart Upsell for WooCommerce o Product Recommendations.

Cuando recomiendas artículos utilizando cualquiera de estas herramientas, puedes aumentar el valor medio de los pedidos (AOV) e incrementar tus beneficios generales.

Además, puedes probar la extensión Cart Notices para mostrar mensajes personalizados en función del contenido de los carritos de tus clientes.

Esto puede ser muy útil, ya que puedes informar a los clientes de que deben alcanzar un importe mínimo de pedido o animarlos a comprar más para obtener envío gratuito (entre muchas otras cosas).

La extensión Save for Later for WooCommerce también es muy práctica, ya que puede animar a los clientes a volver a visitar productos sobre los que habían estado dudando o a comprarlos más adelante como regalos de cumpleaños o Navidad.

Además, si ofreces productos variables, el Variation Switcher in Cart for WooCommerce es imprescindible. Te permite añadir un enlace para cambiar la variación directamente en tu página del carrito.

Gracias a esta función, los clientes no tendrán que volver hasta tu catálogo para encontrar los productos que quieren. Como resultado, disfrutarán de una experiencia de usuario más fluida.

3. Personaliza manualmente tu página del carrito (mediante código y hooks)

Una de las grandes ventajas de WooCommerce es que te permite usar hooks. Hay dos tipos de hooks de WooCommerce: acciones y filtros. Los hooks de acción te permiten insertar código personalizado en varios puntos. Los hooks de filtro te permiten manipular y devolver una variable.

⚠️ Importante: No edites nunca directamente el archivo functions.php de tu tema. Utiliza siempre un tema hijo. Si WooCommerce actualiza sus plantillas principales, los cambios realizados directamente en los archivos del tema principal se sobrescribirán. Por último, asegúrate de hacer una copia de seguridad de tu sitio antes de continuar.

Dicho esto, veamos algunas formas útiles de usar código y hooks para crear una página del carrito de WooCommerce más personalizada. Para empezar, quizá quieras eliminar algunas de las funciones predeterminadas si no las necesitas.

Para eliminar el campo «Aplicar cupón», puedes añadir el siguiente fragmento de código a tu archivo functions.php:

<?php
// hide coupon field on the cart page
function disable_coupon_field_on_cart( $enabled ) {
if ( is_cart() ) {
$enabled = false;
}
return $enabled;
}
add_filter( 'woocommerce_coupons_enabled', 'disable_coupon_field_on_cart' );
Para añadir un mensaje personalizado, por ejemplo para anunciar el envío gratuito, puedes añadir el siguiente fragmento encima de la tabla del carrito:
<?php
// Do NOT include the opening php tag
add_action( 'woocommerce_before_cart_table', 'wpdesk_cart_free_shipping_text' );
/**
 * Add "free shipping" text to WooCommerce cart page
 *
 */
function wpdesk_cart_free_shipping_text() {
echo '<div class="woocommerce-info">Free Shipping available on purchases above $99!</div>';
}

Para obtener más información sobre los hooks de WooCommerce, puedes consultar la página de referencia de acciones y hooks del plugin.

4. Elimina por completo la página del carrito

Como hemos comentado, hay muchas formas de personalizar la página del carrito de WooCommerce. Aun así, hay algunas situaciones en las que es posible que quieras omitir esta página por completo y permitir que los compradores pasen directamente al proceso de pago.

Por ejemplo, si diriges un negocio boutique o una empresa muy pequeña que ofrece pocos artículos y ninguna variación de producto, probablemente la página del carrito no sea necesaria. Es más, omitirla podría animar a las personas a completar la compra más rápido, ya que les da menos tiempo para replanteársela.

Así que, si quieres eliminar por completo la página del carrito, solo tienes que ir al escritorio de WordPress y dirigirte a Páginas. Después, puedes pasar el cursor sobre la página del Carrito y hacer clic en Papelera para eliminarla.

Como alternativa, puedes elegir Editar para abrir el editor de bloques y hacer clic en Cambiar a borrador. De este modo, siempre podrás volver a activarla o publicarla más adelante cuando la necesites.

O, si todavía no has configurado tu tienda online, puedes indicarle a WooCommerce qué páginas usar cuando utilices el asistente de inicio.

Consejos y buenas prácticas para personalizar el carrito de WooCommerce

Ahora que sabes cómo personalizar la página del carrito de WooCommerce, repasemos algunas buenas prácticas para personalizar el carrito de WooCommerce. Estos son algunos consejos que puedes tener en cuenta:

• Optimiza la velocidad de carga de las páginas de Carrito y Finalizar compra. Una página del carrito lenta puede frustrar a los compradores e incluso hacer que abandonen tu sitio. Eso se traduce en pérdida de ventas e ingresos. Por eso, querrás asegurarte de que todas tus páginas sean rapidísimas. Para conseguirlo, puedes usar un plugin de optimización del rendimiento de WooCommerce como Jetpack Boost.
• No compliques demasiado el proceso. Si añades demasiados extras y funciones a tu página del carrito de WooCommerce, podrías acabar abrumando a tus visitantes. Elige las características y funcionalidades adicionales con moderación.
• Ten en cuenta las necesidades específicas de tu audiencia. Considera qué adiciones serán más eficaces para tu sitio y tus productos. En última instancia, debes tratar de satisfacer las necesidades únicas de tu audiencia. Por ejemplo, si gestionas una tienda de ropa grande con muchos productos variables, es buena idea activar el cambio de variaciones. De este modo, los clientes pueden modificar fácilmente los productos según características como la talla y el color, sin tener que volver a la página del producto.
• Haz una copia de seguridad de tu sitio primero. Tanto si eres nuevo en WordPress como si llevas un tiempo trabajando con el sistema de gestión de contenidos (CMS), siempre debes hacer una copia de seguridad de tu sitio antes de editar la plantilla de la página del carrito de WooCommerce. De este modo, si cometes un error que afecta negativamente a la funcionalidad de tu sitio, puedes restaurar una versión anterior desde una copia de seguridad. Puede que tengas que instalar un plugin de copias de seguridad de calidad, como Jetpack VaultPress Backup.

Si tienes en cuenta todos los consejos anteriores, estarás mejor preparado para diseñar una página del carrito de WooCommerce eficaz.

Preguntas frecuentes

A estas alturas, esperamos que entiendas cómo editar la página del carrito de WooCommerce para adaptarla a tus necesidades. Pero, por si todavía tienes alguna duda, hemos recopilado una lista de algunas de las preguntas más frecuentes sobre la modificación de la página del carrito de WooCommerce. ¡Vamos a verlas!

¿Qué es la página del carrito de WooCommerce?

Cuando usas el plugin gratuito — WooCommerce — para transformar tu sitio de WordPress en una tienda online, obtienes automáticamente algunas plantillas de páginas de comercio electrónico. Las páginas predeterminadas de WooCommerce son: Tienda, Carrito, Finalizar compra y Mi cuenta.

Cada una de estas páginas incluye las funciones esenciales que necesitarás. Por ejemplo, la página Mi cuenta incluye enlaces útiles como Escritorio, Pedidos y Suscripciones.

Del mismo modo, la página del carrito de WooCommerce ofrece los elementos más básicos. Proporciona a los clientes un resumen de la información de los productos que tienen actualmente en sus carritos.

Estos detalles incluyen el precio, la cantidad y el subtotal. Además, hay espacio para añadir un cupón, los totales del carrito y un botón de «Finalizar compra».

¿La página del carrito de WooCommerce es diferente de la página de pago?

¡Sí! Son muy diferentes. El diseño del carrito de WooCommerce ofrece a los clientes online un resumen de los productos (y sus detalles) que tienen actualmente en sus carritos. También les permite modificar los productos. 

De forma predeterminada, los clientes solo pueden cambiar la cantidad de los productos que tienen en sus carritos. Pero si personalizas la página del carrito de WooCommerce, puedes permitir que los compradores realicen modificaciones más avanzadas.

Por otro lado, la página de pago predeterminada es donde los clientes introducen los datos de facturación y cualquier información de contacto necesaria. También les ofrece una oportunidad más de añadir códigos de cupón y notas adicionales sobre sus pedidos. La página de pago de WooCommerce también se puede personalizar, así que asegúrate de buscar formas de completar tus personalizaciones en toda la experiencia de compra. 

También proporciona un resumen del pedido, similar al que se muestra en la página del carrito. Sin embargo, en este punto los clientes no pueden modificar los artículos. En la parte inferior de la página de pago de WooCommerce, pueden hacer clic en el botón «Realizar el pedido».

Como la página del carrito de WooCommerce incluye un botón de «Finalizar compra», puedes considerar estas dos páginas como «pasos» diferentes del proceso de compra. Antes de finalizar la compra, probablemente los clientes querrán consultar la página del carrito.

¿Qué importancia tiene la página del carrito para una tienda de comercio electrónico?

La importancia de una página del carrito depende de la naturaleza de tu tienda de comercio electrónico y de sus productos. Como permite a los clientes ver y modificar fácilmente los artículos que tienen actualmente en sus carritos, puede ser muy útil si esperas que los clientes gestionen una gran cantidad de productos variables. 

Si gestionas una tienda de comercio electrónico grande o incluso un negocio de ropa de tamaño mediano, esto puede ser clave para favorecer una experiencia positiva para el cliente. Esto se debe a que, cuando los clientes compran varios productos de diferentes tallas, puede resultar difícil llevar un control de todos ellos.

Una página del carrito permite a los clientes echar un vistazo a su pedido antes de proceder al pago. De este modo, pueden verificar que todas las tallas, variaciones y cantidades de los productos sean correctas, y modificarlas si es necesario.

De lo contrario, podrían proceder al pago y frustrarse al tener que volver atrás para corregir un error después de haber introducido todos sus datos de facturación y contacto.

¿Cuál es la mejor manera de personalizar una página del carrito de WooCommerce?

No existe una única forma correcta de personalizar una página del carrito de WooCommerce, ya que depende de tu experiencia como usuario de WordPress. Por ejemplo, si eres relativamente principiante y te encanta usar el editor de bloques de WordPress, puede que prefieras editar la página del carrito usando bloques.

Como alternativa, si eres un usuario de nivel intermedio o experimentado, quizá quieras usar código y hooks para maximizar tus posibilidades de personalización. En última instancia, es una cuestión de preferencia y elección personal. Solo tendrás que asegurarte de proceder con cautela si eliges uno de los métodos más avanzados.

¿Debo hacer una copia de seguridad de mi sitio antes de editar la página del carrito de WooCommerce?

¡Sí! Independientemente de tu nivel de conocimientos o del método que elijas, es buena idea hacer una copia de seguridad de tu sitio web de WordPress antes de editar la página del carrito de WooCommerce (o realizar cualquier otro cambio importante en tu sitio).

De este modo, si cometes accidentalmente un error menor o importante (o simplemente cambias de opinión sobre las modificaciones), podrás restaurar fácilmente una copia reciente de tu sitio y evitar tiempos de inactividad innecesarios.

¿Qué más puedo hacer para mejorar la experiencia de compra en WooCommerce?

Además de personalizar la página del carrito de WooCommerce, hay algunas cosas que puedes hacer para mejorar la experiencia de compra de tus clientes.

Si es adecuado, puedes personalizar las páginas de producto de WooCommerce para simplificar tu catálogo. Por ejemplo, puedes añadir variaciones de producto. De este modo, los clientes no tendrán que desplazarse por muchos productos similares. Pueden utilizar un selector de variaciones para elegir fácilmente el subconjunto que prefieran dentro de un producto principal.

Además, quizá quieras editar la página de la tienda de WooCommerce para ofrecer una experiencia más personalizada. Para empezar, podrías añadir la identidad de marca de tu empresa con el fin de crear coherencia en todo tu sitio.

En tiendas más grandes, podrías añadir filtros de productos y secciones para funciones como productos mejor valorados o artículos en oferta. Lo mejor es que puedes hacerlo fácilmente mediante los bloques de WooCommerce.

Por último, hay pocas cosas más frustrantes que unas páginas de producto que cargan lentamente. Teniendo esto en cuenta, quizá quieras tomar medidas adicionales para asegurarte de que tu tienda de WooCommerce ofrezca siempre velocidades de carga rápidas a los clientes.

Usar una herramienta como Jetpack Boost es la solución más rápida y práctica para optimizar el rendimiento de WordPress.

Este plugin puede acelerar al instante las páginas de tu sitio al optimizar la carga de CSS, retrasar la carga de JavaScript no esencial, implementar la carga diferida y mucho más. 

Además, puede ayudar a mejorar tus Core Web Vitals, lo que significa que también puede mejorar tu posicionamiento en los resultados de búsqueda.

Personaliza la página del carrito de WooCommerce para mejorar tu tienda online

WooCommerce te ofrece algunas plantillas prácticas para la tienda, el pago, el carrito y otras páginas importantes. Esto puede ayudarte a acelerar el proceso de diseño y permitirte lanzar rápidamente tu tienda de comercio electrónico. Aun así, quizá quieras saber cómo editar una página del carrito de WooCommerce para añadir funciones y modificar su apariencia.

En ese caso, probablemente te hayas encontrado en Google buscando «editar la página del carrito de WooCommerce». Por suerte, esta entrada es el único resultado que necesitas para empezar con los principios básicos. 

Hemos analizado varias formas de personalizar las páginas del carrito de WooCommerce. Para un enfoque sencillo, puedes probar los bloques de WooCommerce. También puedes utilizar extensiones de WooCommerce para añadir funciones como recomendaciones de productos, ventas adicionales y ventas cruzadas, variaciones, etc.

Si eres un usuario de WordPress más avanzado, puedes personalizar la página del carrito de WooCommerce mediante código. O, si tu sitio no necesita una página del carrito, simplemente omítela y permite que los clientes pasen directamente al pago.