Cómo personalizar la página del carrito de la compra de WooCommerce: Guía detallada

página del carrito de la compraes una parte importante de la experiencia de comercio electrónico. Como último punto de interacción antes de pasar por caja, la página del carrito de la compra influye directamente en la decisión de compra del usuario, por lo que un diseño y una personalización cuidadosos de esta página pueden mejorar significativamente la experiencia del usuario y las tasas de conversión.

Esta guía le explicará cómo sacar el máximo partido delPlug-ins, personalización CSS y edición de plantillas PHPetc., totalmente personalizados Página del carrito de la compra de WooCommerce. Tanto si desea modificar el texto, cambiar el diseño o añadir funciones adicionales, este artículo le ayudará a crear una página de carrito de la compra en su tienda en línea que sea a la vez bonita y funcional.

1. ¿Por qué tengo que personalizar la página del carrito de la compra de WooCommerce?

Una página de carrito de la compra es algo más que un lugar donde mostrar productos, también desempeña un papel importante en la experiencia del usuario y, en última instancia, en la conversión. Una página de carrito de la compra optimizada y personalizada puede reducir el abandono de carritos, aumentar las ventas e incrementar la satisfacción del cliente.

Limitaciones de la página predeterminada del carrito de la compra de WooCommerce

La página predeterminada del carrito de la compra de WooCommerce proporciona la funcionalidad básica de la experiencia de compra, pero a menudo no satisface las necesidades individuales. Consta de las siguientes áreas principales:

• Tabla de ancho completo que muestra artículos, precios, cantidades y totales.
• Ofrece la posibilidad de eliminar artículos, actualizar la cesta de la compra y seguir comprando.
• Falta una estética de diseño visual en ciertos temas para mostrar la personalidad de la marca.

Para mejorar la funcionalidad y el atractivo visual de la página de la cesta de la compra, se han añadido una serie depersonalizaciónpara hacerla más acorde con el estilo de la marca y los hábitos de los usuarios.

2. Preparación de la página personalizada del carrito de la compra de WooCommerce

Antes de empezar a personalizar, es importante tener listos algunos aspectos básicos, especialmente la creación de un tema hijo y la realización de copias de seguridad del sitio.

Creación de subtemas

subtemaLa mejor forma de realizar personalizaciones seguras en tu tema. Le permite realizar cambios en los archivos del tema sin perderlos al actualizar el tema principal. Estos son los pasos para crear un tema hijo:

1. Acceda a su panel de control de WordPress y vaya a Apariencia > Temas.

2. golpe (en el teclado) Añadir nuevo temay luego seleccione Cargar un temasuba el zip del tema hijo.

3. Instale y active el tema hijo.
4. entrar en Apariencia > Editor de temasedite el subtema del funciones.php que pone en cola la carga de estilos y scripts.

Página web de respaldo

Haz siempre una copia de seguridad de tu sitio web antes de personalizarlo. De ese modo, si algo va mal, podrás restaurarlo fácilmente a su estado anterior.

3. Edite la página del carrito de la compra de WooCommerce utilizando el editor de bloques.

El editor de bloques de WordPress (Gutenberg) proporciona una forma sencilla de modificar las páginas del carrito de la compra de WooCommerce. Con el editor de bloques, puedesSin necesidad de escribir códigoSe puede ajustar el diseño de la página.

Pasos para utilizar el editor de bloques:

1. Acceda a su panel de control de WordPress y vaya a página weblocalice y haga clic en página del carrito de la compra.

2. golpe (en el teclado) + para añadir un nuevo bloque, busque Widget del carro de la compray, a continuación, arrástrelo y suéltelo en la página.

3. Personalice el contenido y el aspecto de la página de la cesta de la compra seleccionando los bloques existentes y ajustando la configuración.
4. Utilice el bloque de columnas (Bloque de columnas) para implementar diseños avanzados, o utilizar WooCommerce código cortoFuncionalidad de página ampliada.

5. Cuando haya terminado, pulse Guardar borradores tal vez actualización.

4. Plug-ins y extensiones: mejoras rápidas

Si desea añadir más funcionalidad a la página del carro de la compra de una forma sencilla, la funciónplug-in (componente de software)es la solución más eficaz. Muchos plugins WooCommerce pueden ampliar la funcionalidad de la cesta de la compra, aquí están algunas características comunes de plugins:

• Productos recomendadosplug-in (componente de software): Mostrar productos recomendados o similares en la página del carrito de la compra para mejorar laventa cruzadaLa oportunidad.
• Precios y descuentos dinámicosplug-in (componente de software): Proporciona descuentos dinámicos en función de los artículos de la cesta de la compra del usuario.
• Opciones de regaloplug-in (componente de software)Proporcionar opciones de envoltorio para regalo en la página del carrito de la compra
• Artículo.

Plugins recomendados:

1. Carrito WooCommerce AJAXHabilitar la actualización AJAX de la cesta de la compra para reducir la recarga de la página.

2. YITH WooCommerce Frecuentemente Comprados Juntos: Aumentar las recomendaciones de compra de productos emparejados para fomentar las ventas ascendentes.

5. Personalización de la página del carrito de la compra con CSS y hooks

Para un diseño más personalizado, CSS y WooCommerce Hooks son herramientas poderosas. Los ganchos te permiten insertar código personalizado en lugares específicos, mientras que el CSS te permite personalizar el estilo de la página del carrito de la compra.

Uso de ganchosAñadir función:

WooCommerce proporciona varios ganchos como:

• woocommerce_before_cart_table: Añade contenido antes del formulario del carrito de la compra.
• woocommerce_cart_totals_after_order_total: Inserte la función de personalización después de haber totalizado el pedido.

Esto se puede hacer añadiendo lo siguiente al archivo funciones.php para añadir código que utilice estos ganchos. Por ejemplo, añada un mensaje a la página del carrito de la compra:

add_action( 'woocommerce_before_cart_table', 'custom_cart_message' );
función custom_cart_message() {
    echo '
Su carrito está lleno, pase a la caja ahora!
'; }
'; }

Ajuste de la página del carrito de la compra mediante CSS:

La apariencia de la página del carrito de la compra puede personalizarse a través de la hoja de estilos del tema hijo. Por ejemplo, modificar el estilo de los botones:

.woocommerce-cart .button {
    color de fondo: #ff6600;
    color: #fff;
    border-radius: 5px;
}

Guarde el archivo y actualice la página para ver los resultados.

6. Edición de archivos de plantilla WooCommerce a través de PHP

Si no estás satisfecho con el diseño por defecto de WooCommerce, puedes editar directamente sus archivos de plantilla PHP para una personalización más avanzada. Para mayor seguridad, se recomienda copiar estos archivos en un tema hijo para realizar cambios.

Modifique el archivo de plantilla del carrito de la compra:

Los archivos de plantilla para WooCommerce se encuentran en el directorio wp-content/plugins/woocommerce/templates/cart/ directorio. Coloque los archivos de plantilla necesarios (por ejemplo carrito.php) se copia en el tema hijo en el archivo woocommerce/cart/ y empieza a editar.

Por ejemplo, puede modificar la forma en que se muestra el nombre del producto:

Código phpCopy
add_filter( 'woocommerce_cart_item_name', 'custom_cart_item_name', 10, 3 );
function custom_cart_item_name( $product_name, $cart_item, $cart_item_key ) {
    return $product_name . '
¡Este es un producto muy popular!' ;
}

Conclusión:

Al personalizar las páginas del carrito de la compra de WooCommerce, puedes mejorar la experiencia del usuario, reducir el abandono del carrito y aumentar las conversiones. Ya sea mediante plugins, CSS, ganchos personalizados o modificando plantillas PHP, la personalización de las páginas del carrito de la compra puede ofrecer una presentación más personalizada de tu marca y mejorar su funcionalidad, creando un proceso de compra más agradable estéticamente y eficiente que hará crecer tu negocio.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: [email protected]
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres