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

Cuando utilice WooCommerce para crear su tienda en línea, obtendrá algunas plantillas de página útiles diseñadas específicamente para el comercio electrónico, incluida una página de carrito. Sin embargo, es posible que desee mejorar la apariencia y funcionalidad predeterminadas. En ese caso, querrás saber cómo editar tu página de carrito de WooCommerce.

La buena noticia es que este proceso es bastante sencillo. Es más, existen bastantes enfoques diferentes que puedes probar. Por ejemplo, puede utilizar bloques para personalizar la página de su carrito de WooCommerce. O para un mayor control, puede modificar la página de su carrito manualmente.

En esta publicación, comenzaremos explicando por qué es posible que desee editar su página de carrito de WooCommerce. Luego, le mostraremos cinco formas diferentes en las que puede hacer esto. Finalmente, compartiremos algunos consejos y mejores prácticas, antes de repasar algunas preguntas frecuentes.

Por qué es posible que desee editar la página de su carrito en WooCommerce

Para comenzar, analicemos por qué es posible que desee editar su página de carrito en WooCommerce. Así es como se vería la página predeterminada del carrito de WooCommerce:

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

Los clientes pueden modificar la cantidad de un producto directamente desde la página del carrito y luego hacer clic en un botón para actualizar sus carritos. Además, esta página ofrece a los clientes un lugar para agregar un código de cupón, así como un simple botón Continuar con el pago .

Aún así, dependiendo de su tema, esta página del carrito puede parecer un poco sencilla y minimalista. No es probable que encaje con su marca o con el diseño general de su sitio. Además, no está realmente optimizado para su audiencia específica.

Para alentar a los visitantes a comprar más, es posible que desee agregar elementos de venta adicional y venta cruzada, como la sección "A la gente también le gusta" o "Quizás le interese". O quizás le interese una funcionalidad especializada como el botón "Guardar para más tarde".

De esta manera, los compradores que no están seguros de una compra pueden volver más fácilmente a sus artículos favoritos. Luego, podría llegar a estos clientes potenciales mediante campañas de correo electrónico específicas.

Además, la página de su carrito ofrece una buena oportunidad para incluir elementos clave de su marca, como su logotipo y los colores de su empresa. Estos no se incluirán de forma predeterminada, pero cuando personaliza la página de su carrito, puede asegurarse de que coincida con el resto de su sitio. Esto puede impulsar el reconocimiento de la marca e impresionar a los clientes.

Además, una página de carrito personalizada respalda una experiencia de compra perfecta. Permite a las personas revisar y modificar fácilmente todos los artículos en sus carritos antes de realizar el pago.

En general, editar la página de su carrito de WooCommerce puede ayudarlo a brindar una experiencia de cliente más sólida y alentar a los visitantes a realizar conversiones. Además, es rápido y sencillo de hacer.

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

Ahora que sabe por qué es posible que desee editar la apariencia predeterminada de la página del carrito de WooCommerce, exploremos cuatro formas diferentes en las que puede realizar el trabajo. Lo mejor es familiarizarse con todas las opciones disponibles, para que pueda elegir el enfoque adecuado a sus necesidades.

1. Edite la página del carrito usando bloques

Si ha estado usando WordPress aunque sea por un tiempo, probablemente sepa que los bloques están en el centro del proceso de diseño. Este sistema basado en bloques facilita a los usuarios no técnicos la creación de impresionantes sitios personalizados sin la molestia de codificar.

Por lo tanto, puede que no sea una sorpresa que una de las formas más sencillas de personalizar la página de su carrito sea mediante el uso de bloques de WooCommerce. Hay un par de formas diferentes de hacer esto.

Si actualmente no estás usando un tema de bloques (que desbloquea el poder de la edición completa del sitio), aún puedes usar bloques de WooCommerce. Estos se incluyen de forma predeterminada con WooCommerce 6.9 o posterior, o puede usar la extensión de bloques WooCommerce Cart y Checkout (algunos pueden referirse a ella como el complemento de bloques WooCommerce).

Después de instalar la herramienta, navegue hasta la página de carrito predeterminada de WooCommerce y ábrala en el editor de bloques.

Elimina el código corto [woocommerce_cart]. Luego busque el bloque WooCommerce Cart (no el bloque Mini-Cart).

Agréguelo a la página y debería ver instantáneamente que ofrece algunos elementos de diseño útiles, como la sección Quizás le interese....

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

Como puede ver, la página de su carrito de WooCommerce cambia significativamente cuando le faltan artículos. Muestra un enlace simple para explorar la tienda y resalta algunos artículos nuevos en la tienda.

En este punto, puede personalizar aún más el diseño de su nueva página de carrito usando bloques. Tenga en cuenta que, además del bloque Carrito, la extensión WooCommerce Blocks le ofrece más de 30 elementos para jugar. Estos incluyen el bloque de Productos cuidadosamente seleccionados y el bloque de Productos en oferta.

Si está utilizando un tema de bloque, puede personalizar la página de su carrito usando el Editor del sitio. Vaya a Apariencia → Editor. Seleccione Plantillas → Administrar todas las plantillas → Carrito. Ahora, puede realizar cambios en la apariencia de su página de carrito usando bloques de la misma manera que acabamos de comentar.

2. Utilice otras extensiones de WooCommerce

Además de los bloques de WooCommerce, existen muchas extensiones adicionales que puede utilizar para personalizar aún más la página de su carrito. Si bien la mayoría de ellos son premium, generalmente son asequibles y valen la pena.

Por ejemplo, puede agregar fácilmente ventas adicionales y cruzadas a su página de carrito cuando compra la extensión Cart Upsell para WooCommerce o Product Recommendations.

Cuando recomienda artículos utilizando cualquiera de estas herramientas, puede aumentar el valor promedio de su pedido (AOV) y aumentar sus ganancias generales.

Además, puede probar la extensión Avisos de carrito para mostrar mensajes personalizados según el contenido de los carritos de sus clientes.

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

La extensión Guardar para más tarde para WooCommerce también es muy conveniente, ya que puede alentar a los clientes a volver a visitar productos que dudaban en el pasado o a comprarlos más tarde como regalos de cumpleaños o Navidad.

Además, si ofrece productos variables, Variation Switcher in Cart para WooCommerce es imprescindible. Le permite agregar un enlace Cambiar variación directamente a su página de carrito.

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

3. Personalice la página de su carrito manualmente (usando código y ganchos)

Una de las mejores cosas de WooCommerce es que te permite utilizar ganchos. Hay dos tipos de ganchos de WooCommerce: acciones y filtros. Los ganchos de acción le permiten insertar código personalizado en varios puntos. Los ganchos de filtro le permiten manipular y devolver una variable.

Si desea personalizar su página de carrito usando código y ganchos, es muy importante que haga una copia de seguridad de su sitio de WordPress de antemano. Dado que implementar un código personalizado puede ser un proceso delicado, querrás asegurarte de tener una copia de tu sitio en caso de que cometas un error.

Dicho esto, veamos algunas formas útiles en las que puede utilizar código y enlaces para crear una página de carrito de WooCommerce más personalizada. En primer lugar, es posible que desees eliminar algunas de las funciones predeterminadas si no las necesitas.

Para eliminar el campo "Aplicar cupón", puede agregar el siguiente fragmento de código a su archivo funciones.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' ); To add a custom message, like to advertise free shipping, you can add the following snippet above the cart table: <?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 enlaces de WooCommerce, puede consultar la página de referencia de enlaces y acciones del complemento.

4. Elimina la página del carrito por completo.

Como hemos comentado, hay muchas formas de personalizar la página de su carrito de WooCommerce. Aún así, hay algunos escenarios en los que es posible que desees omitir esta página por completo, permitiendo a los compradores ir directamente a pagar.

Por ejemplo, si tiene una boutique o una empresa muy pequeña que ofrece artículos mínimos y ninguna variación de productos, la página del carrito probablemente no sea necesaria. Es más, dejarlo de lado podría ayudar a alentar a las personas a realizar conversiones más rápido, ya que les da menos tiempo para dudar de sus compras.

Entonces, si desea eliminar su página de carrito por completo, simplemente navegue hasta su panel de WordPress y vaya a Páginas . Luego puede pasar el cursor sobre la página del carrito y hacer clic en Papelera para eliminarlo.

Alternativamente, es posible que desees elegir Editar para abrir el editor de bloques y presionar Cambiar a borrador . De esta manera, siempre podrás habilitarlo/publicarlo nuevamente más tarde cuando lo necesites.

O si aún no ha configurado su tienda en línea, puede indicarle a WooCommerce qué páginas usar cuando utilice el asistente de inicio.

Consejos y mejores prácticas para la personalización del carrito de WooCommerce

Ahora que sabe cómo personalizar su página de carrito de WooCommerce, repasemos algunas de las mejores prácticas para la personalización del carrito de WooCommerce. Aquí hay algunos consejos que quizás quieras considerar:

• Optimice las velocidades de carga de las páginas de carrito y pago . Una página de carrito lenta puede frustrar a los compradores e incluso hacer que abandonen su sitio. Eso se traduce en pérdida de ventas e ingresos. Por lo tanto, querrás asegurarte de que todas tus páginas sean increíblemente rápidas. Para que esto suceda, puede utilizar un complemento de optimización del rendimiento de WooCommerce como Jetpack Boost.
• No complique demasiado el proceso . Si agrega demasiadas comodidades a su página de carrito de WooCommerce, podría terminar abrumando a sus visitantes. Elija características y funcionalidades adicionales con moderación.
• Tenga en cuenta las necesidades específicas de su audiencia . Considere qué adiciones serán más efectivas para su sitio y sus productos. En última instancia, debes intentar satisfacer las necesidades únicas de tu audiencia. Por ejemplo, si tiene una tienda de ropa más grande con muchos productos variables, es una buena idea habilitar el cambio de variaciones. De esta manera, los clientes pueden modificar fácilmente los productos según características como tamaño y color, sin tener que volver a la página del producto.
• Primero haga una copia de seguridad de su sitio . Ya sea que sea nuevo en WordPress o haya estado trabajando con el sistema de administración de contenido (CMS) por un tiempo, siempre debe hacer una copia de seguridad de su sitio antes de editar la plantilla de página del carrito de WooCommerce. De esta manera, si comete un error que afecte negativamente la funcionalidad de su sitio, podrá restaurar fácilmente una versión anterior desde una copia de seguridad. Es posible que necesites instalar un complemento de copia de seguridad de calidad, como Jetpack VaultPress Backup.

Si tiene en cuenta todos los consejos anteriores, estará mejor equipado para diseñar una página de carrito de WooCommerce eficaz.

Preguntas frecuentes

A estas alturas, es de esperar que comprenda cómo editar la página de su carrito de WooCommerce para satisfacer sus necesidades. Pero en caso de que tenga alguna inquietud persistente, hemos compilado una lista de algunas de las preguntas más comunes cuando se trata de modificar su página de carrito de WooCommerce. ¡Veámoslos!

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

Cuando utiliza el complemento gratuito, WooCommerce, para transformar su sitio de WordPress en una tienda en línea, obtendrá automáticamente algunas plantillas de páginas de comercio electrónico. Las páginas predeterminadas de WooCommerce son: Tienda, Carrito, Pagar y Mi cuenta.

Cada una de estas páginas viene con las características esenciales que necesitará. Por ejemplo, la página Mi cuenta incluye enlaces útiles como Panel de control, Pedidos y Suscripciones.

Del mismo modo, la página WooCommerce Cart ofrece los elementos más básicos. Ofrece a los clientes un resumen de la información del producto para los artículos actualmente en sus carritos.

Estos detalles incluyen el precio, la cantidad y el subtotal. Además, hay espacio para agregar un cupón, totales del carrito y un botón "Continuar con el pago".

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

¡Sí! Ellos son muy diferentes. El diseño del carrito de WooCommerce ofrece a los clientes en línea un resumen de los productos (y detalles del producto) de los artículos que se encuentran actualmente en sus carritos. También les permite modificar productos.

De forma predeterminada, los clientes sólo pueden cambiar la cantidad de productos en sus carritos. Pero si personaliza su página de carrito de WooCommerce, puede permitir a los compradores realizar modificaciones más avanzadas.

Por otro lado, la página de pago predeterminada es donde los clientes ingresan los detalles de facturación y cualquier información de contacto necesaria. También les brinda una oportunidad más de agregar códigos de cupón y notas adicionales sobre sus pedidos. Las páginas de pago también se pueden personalizar, así que asegúrese de buscar formas de completar sus personalizaciones en toda la experiencia de compra.

También proporciona un resumen del pedido, similar al que se muestra en la página de su carrito. Pero los clientes no pueden modificar artículos en este momento. En la parte inferior de la página de pago de WooCommerce, pueden presionar el botón "Realizar su pedido".

Dado que la página del carrito de WooCommerce incluye un botón "Continuar con el pago", puede considerar estas dos páginas como "pasos" diferentes en el proceso de compra. Antes de que los clientes realicen el pago, probablemente querrán ver la página de su carrito.

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

La importancia de una página de carrito depende de la naturaleza de su tienda de comercio electrónico y sus productos. Dado que permite a los clientes ver y modificar fácilmente los artículos que se encuentran actualmente en sus carritos, puede resultar muy útil si espera que los clientes administren una gran cantidad de productos variables.

Si dirige una gran tienda de comercio electrónico o incluso una empresa de ropa mediana, esto puede ser clave para respaldar una experiencia positiva para el cliente. Esto se debe a que cuando los clientes compran varios productos en varios tamaños, puede resultar difícil realizar un seguimiento de todos ellos.

Una página de carrito permite a los clientes echar un vistazo a su pedido antes de realizar el pago. De esta forma, pueden verificar que todos los tamaños, variaciones y cantidades del producto son correctos, y modificarlos si es necesario.

De lo contrario, podrían proceder al pago y sentirse frustrados por tener que regresar para corregir un error después de ingresar todos sus datos de facturación y contacto.

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

No existe una forma correcta de personalizar una página de carrito de WooCommerce porque depende de su experiencia como usuario de WordPress. Por ejemplo, si eres relativamente principiante y te encanta usar el editor de bloques de WordPress, es posible que prefieras editar tu página de carrito usando bloques.

Alternativamente, si es un usuario intermedio o experimentado, es posible que desee utilizar códigos y enlaces para maximizar su potencial de personalización. En última instancia, esta es una preferencia y elección personal. Sólo querrás asegurarte de proceder con precaución 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 de mi carrito de WooCommerce?

¡Sí! No importa su nivel de habilidad o enfoque, es una buena idea hacer una copia de seguridad de su sitio web de WordPress antes de editar su página de carrito de WooCommerce (o realizar cualquier otro cambio notable en su sitio).

De esta manera, si accidentalmente comete un error menor o mayor (o simplemente cambia de opinión acerca de las modificaciones), puede restaurar fácilmente una copia reciente de su 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 de su carrito de WooCommerce, hay algunas cosas que puede hacer para mejorar la experiencia de compra de sus clientes.

Si es apropiado, puede personalizar las páginas de sus productos WooCommerce para simplificar su catálogo. Como ejemplo, puede agregar variaciones de productos. De esta manera, los clientes no tienen que desplazarse por muchos productos similares. Simplemente pueden usar un conmutador de variaciones para seleccionar su subconjunto preferido dentro de un producto principal.

Además, es posible que desee editar la página de su tienda WooCommerce para brindar una experiencia más personalizada. Para empezar, puede agregar la marca de su empresa para crear cohesión en todo su sitio.

Para tiendas más grandes, puede agregar filtros de productos y secciones para funciones como productos mejor calificados o artículos en oferta. La buena noticia es que puedes hacerlo fácilmente usando bloques de WooCommerce.

Finalmente, hay pocas cosas más frustrantes que las páginas de productos que cargan lentamente. Con esto en mente, es posible que desees tomar medidas adicionales para garantizar que tu tienda WooCommerce siempre ofrezca velocidades de carga rápidas para los clientes.

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

Este complemento puede acelerar instantáneamente las páginas de su sitio al optimizar automáticamente la carga de CSS, aplazar JavaScript no esencial, implementar la carga diferida y mucho más.

Además, puede ayudar a mejorar los Core Web Vitals de su sitio, lo que significa que también puede mejorar su clasificación en los resultados de búsqueda.

Personalice su página de carrito WooCommerce para mejorar su tienda en línea

WooCommerce le proporciona algunas plantillas convenientes para Comprar, Pagar, Carrito y otras páginas importantes. Esto puede ayudarle a acelerar el proceso de diseño y permitirle lanzar su tienda de comercio electrónico rápidamente. Aún así, es posible que desees saber cómo editar una página de carrito de WooCommerce para agregar funciones y modificar su apariencia.

En ese caso, probablemente se haya encontrado en Google buscando "editar página del carrito de WooCommerce". Afortunadamente, esta publicación es el único resultado que necesitas para comenzar con los principios básicos.

Discutimos algunas formas diferentes en las que puede trabajar para personalizar las páginas del carrito de WooCommerce. Para un enfoque sencillo, puedes probar los bloques de WooCommerce. También puede utilizar las extensiones de WooCommerce para agregar funciones como recomendaciones de productos, ventas adicionales/cruzadas, variaciones, etc.

Si es un usuario más avanzado de WordPress, puede personalizar la página de su carrito de WooCommerce usando código. O si su sitio no necesita una página de carrito, simplemente omítala y permita que los clientes salten directamente para pagar.