Cambie el botón Agregar al carrito para ver el botón del carrito después de hacer clic en Woocommerce

2 minutos de lectura

avatar de usuario
taylor

Tengo un sitio web de WordPress. Estoy usando el tema Storefront para WooCommerce. Tengo habilitados los botones para agregar al carrito de ajax. Cuando se hace clic en un botón Agregar al carrito y se agrega correctamente un producto al carrito, me gustaría que el botón cambie a un botón Ver carrito (cambie el texto a “Ver carrito” y enlace al carrito). Si es posible, también me gustaría darle un estilo diferente al botón para diferenciarlo del botón estándar de agregar al carrito. ¿Cómo sería el código php?

avatar de usuario
LoicTheAztec

En Woocommerce por defecto, cuando haces clic en el botón “añadir al carrito” ya aparece otro botón en el lado derecho con “Ver carrito”:

ingrese la descripción de la imagen aquí

Esto ya lo hace un script jQuery de woocommerce, que agrega después del botón Agregar al carrito un botón “Ver carrito” vinculado a la página del carrito…

Puede ocultar el botón “agregar al carrito” si lo desea, como cuando hace clic en una clase adicional "added" aparece en él (ver el código generado a continuación):

<a rel="nofollow" href="https://stackoverflow.com/shop/?add-to-cart=741" data-quantity="1" data-product_id="741" data-product_sku="WN001-1" class="button product_type_simple add_to_cart_button ajax_add_to_cart added">Add to cart</a>

Así que con CSS puedes usar display:none; en eso y solo mantén “Ver carrito”

.ajax_add_to_cart.added {
    display:none !important;
}

ingrese la descripción de la imagen aquí

Entonces es fácil cambiar el estilo de ese botón “ver carrito” (vinculado a la página del carrito):

a.added_to_cart.wc-forward {
    background-color: #8c8c8c !important;
    color: white !important;
    min: .618em 2.4em !important;
}
a.added_to_cart.wc-forward:after {
    content: inherit; !important;
}

ingrese la descripción de la imagen aquí

Así que no necesitas ningún código, solo algo de CSS…

  • ¡gracias! ¿Hay alguna forma de diseñarlo/editarlo a través de archivos de plantilla? anular en functions.php?

    – Alex Lee

    21 de julio de 2020 a las 16:57

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad