Home » WooCommerce » Cómo añadir los enlaces Editar carrito y Continuar compra a la página de pago de WooCommerce

Cómo añadir los enlaces Editar carrito y Continuar compra a la página de pago de WooCommerce

Si tiene un sitio web de comercio electrónico, probablemente sepa que conseguir que el cliente llegue a la página de pago está a un solo clic de la misión cumplida: la venta de un producto.

Best WordPress hosting 2024

Pero siempre hay margen de mejora, incluso si consigue que el cliente llegue a la página correcta. ¿Y si el cliente quiere hacer un cambio en el carrito? ¿Y si pudieras darle una forma fácil de volver a la tienda y añadir más artículos?

Hoy te mostraré dos formas súper sencillas de hacer que tu página de pago de WooCommerce sea más fácil de usar. E incluso puede animar a tus clientes a hacer otra compra. Esto es lo que haremos

¡Vamos a empezar!

Cómo añadir el enlace Continuar comprando a la página de pago de WooCommerce

Es genial cuando el cliente llega a la página de pago. ¿Pero sabes qué es aún mejor? Cuando los clientes hacen pedidos más grandes. Es por eso que vamos a añadir el botón Continuar Comprando a la página de pago en WooCommerce, para asegurarnos de que el cliente tiene una manera fácil de ver todos sus productos en una tienda. Como aquí:

woocommerce add continue shopping button in checkout page

Para añadir el botón Continuar comprando ve a Apariencia >> Editor de Archivos Temáticos o Herramientas >> Editor de Archivos Temáticos en tu panel de administración de WordPress, y abre el archivo functions. php de la derecha.

Una vez que estés en el lugar correcto, añade este código al final del archivo functions . php.

add_action( 'woocommerce_checkout_before_customer_details', 'continue_shopping_before_billing', 20 );
function continue_shopping_before_billing(){
    echo '<div class="checkout-continue-shopping">
		    <a href="'.get_home_url().'">Continue Shopping →</a>
	     </div>';
}

Este código añade el enlace Continuar comprando justo encima de la sección Detalles de facturación en la página de pago de WooCommerce. Exactamente como se ve en la imagen de arriba. El enlace devuelve al visitante a la página principal de tu tienda.

Si quieres enlazar a otra página, puedes reemplazar el atributo link href por cualquier otra página de tu tienda WooCommerce. Por ejemplo:

<a href="https://yourstore.com/any-other-page">Continue Shopping →</a>

Lo único que queda por hacer es estilizar el enlace adecuadamente – para asegurarte de que se integra bien en tu sitio web. Por eso he añadido <div> y la clase .checkout-continue-shopping para que puedas darle el estilo que quieras. Por ejemplo:

.checkout-continue-shopping {
text-align: right; // to add button to right side of the page
}

.checkout-continue-shopping a { // add styling to the link
background: pink;
color: white;
padding: 6px 10px;
border-radius: 20px;
}

.checkout-continue-shopping a:hover { // change color of the text when customer hovers / puts mouse on the button
color: black;
}

Es posible que tenga que cambiar los colores, o añadir su propio estilo para asegurarse de que se adapte mejor a su sitio web.

P.D. para añadir CSS personalizado a su sitio web WordPress necesita usar Apariencia >> Personalizar >> pestaña CSS adicional.

No hay nada más molesto en una tienda online que llegar a la página de pago, y darse cuenta de que ha añadido un producto equivocado, o añadido una cantidad incorrecta de productos en ella. En estas situaciones usted, como propietario de una tienda, debe permitir a su cliente solucionar el problema sin esfuerzo.

Es por eso que vamos a añadir el enlace Editar carrito a la página de pago también. Como aquí:

woocommerce edit cart link in checkout

Como anteriormente, vaya a Apariencia >> Editor de Archivos Temáticos o Herramientas >> Editor de Archivos Temáticos en su panel de administración de WordPress, y abra el archivo functions. php a la derecha. A continuación, agregue este código al final del archivo, y no se olvide de guardar los cambios:

add_action('woocommerce_checkout_before_order_review', 'checkout_cart_link');
function checkout_cart_link(){
    ?><div class="checkout-cart-link">
        <a href="<?php echo wc_get_cart_url(); ?>">Edit cart content →</a>
      </div>
    <?php
}

Una vez más, como en el ejemplo anterior puede que tenga que añadir algunos estilos CSS personalizados en el Personalizador. Por ejemplo:

.checkout-cart-link {
   padding-buttom: 10px; // make some whitespace between product table and our link
}

.checkout-cart-link a {
   color: pink;
   font-size: 15px;
}

Eso es todo – estos dos enlaces en la página de Pago deberían generar pedidos ligeramente mayores en tu tienda online WooCommerce, y deberían hacer que la experiencia del cliente de tu sitio web de comercio electrónico sea mejor a largo plazo.

¿Buscas otras formas de mejorar la página de pago de WooCommerce? Revisa también estos artículos:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK