CMS Woocommerce WordPress

[WooCommerce] Crear tu propio carrito de la compra

[WooCommerce] Aprende a programar un carrito de WooCommerce para poder personalizarlo 100%

En el siguiente minitutorial de Loopeando.com aprenderemos a crear un carrito como el siguente:

Lo podéis ver en vivo en: https://elperezoso.es

Sus principales caracteristicas son:

  • Marca el número de productos que hay en el carrito, en tiempo real y sin necesidad de hacer clic en él.
  • Al pasar el ratón sobre el icono, se despliega la vista detalle mostrando todos los items que hemos seleccionado.
  • En la lista detalle se muestra el precio total, el precio de cada item y el número de items comprados de cada tipo.
  • Desde la vista detalle podemos: O bien ir al chekout o bien eliminar items directamente sin pasar por el checkout ni por la vista ampliada del carrito.

 

Resumen de contenidos

  1. Nuestro código
  2. Explicación del código

 

Nuestro código

El código PHP que lo hace posible va situado en el archivo header.php de nuestro tema, y es el siguiente:

 

A continuación pasamos a explicar las partes más importantes de la programación.

 

Explicación del código

En primer lugar hay que decirle a nuestra instalación de WordPress que vamos a comenzar a utilizar funciones de WoCommerce. Para ello realizamos la llamada:

 

La función get_cart_contents_count() nos ayudará a extraer la suma del número de items que hay ahora mismo en el carrito.

Por lo tanto:

Imprimirá el número allá donde lo situemos.

 

Para extraer los productos del carrito junto a sus precios, títulos, fotografías… debemos realizar un foreach a la función get_cart():

 

Las siguientes funciones:

get_image(): Extrae el thumnail del producto

get_title(): Extrae el título del producto

get_remove_url(): Crea el enlace que borrará el producto

get_cart_total(): Nos aporta el sumatorio total de todos los precios de los productos del carrito

get_post_meta(): Extrae detalles del producto tales como precio, número de unidades de ese producto, etc

Para utlilizar get_post_meta() dentro del loop habrá que hacer lo siguiente:

 

¿Te ha parecido útil esta entrada? ¿Has conseguido crear tu propio carrito? ¿Te has atascado en algún punto y necesitas ayuda? ¡No dudes en darnos tu opinión en los comentarios y compartir esta entrada!

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

1 Comentario

Haz clic aquí para dejar tu comentario