¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. WordPress
  3. WooCommerce
Extrait - WordPress Desarrolle con PHP - extensiones, widgets y temas avanzados (teoría, TP, recursos) (2ª edición)
Extractos del libro
WordPress Desarrolle con PHP - extensiones, widgets y temas avanzados (teoría, TP, recursos) (2ª edición) Volver a la página de compra del libro

WooCommerce

Introducción

Lanzado el 27 de septiembre de 2011, el plugin WooCommerce rápidamente se hizo famoso por su facilidad de instalación y capacidades de personalización.

WooCommerce fue desarrollado por Mike Jolley y Jay Koster de WooThemes. En agosto de 2014, 381.187 sitios web (o el 17,77 % de los sitios de comercio electrónico en línea) estaban impulsados por WooCommerce, colocándolo como una de las soluciones de comercio electrónico más utilizadas en el mundo, con más de cuatro millones de descargas.

En mayo de 2015, la empresa Woothemes, editora de WooCommerce, fue adquirida por Automattic, la empresa que publica y distribuye WordPress.

Built With informa que en abril de 2017, 1.986.324 sitios web utilizaban WooCommerce, de los cuales 23.724 se encuentran entre los sitios más visitados del mundo. Esto representa el 0,5% de todos los sitios web o el 2,8% de los sitios web más visitados. Una proporción significativa, sin duda, pero no tan enorme.

Para obtener más información, visite el sitio web Built With: https://trends.builtwith.com/shop

Configuración de WooCommerce

Para instalar WooCommerce, es suficiente con ir al menú Plugins - Añadir nuevo, buscar la extensión WooCommerce, instalarlo y activarlo.

images/22pagina_2.png

Menú Plugins - Añadir nuevo con la búsqueda de la extensión WooCommerce

Encontrará la documentación, los temas, las extensiones, el soporte, etc. en el sitio web oficial de WooCommerce: https://woocommerce.com

Enlace a la documentación de WooCommerce: https://docs.woocommerce.com

1. El asistente de configuración

Tan pronto como active la extensión, se iniciará el asistente de configuración. Tiene la opción de configurar la extensión a través de este asistente o volver a ella más tarde, si lo desea, haciendo clic en el enlace en la parte inferior de la página Ahora no. De todos modos, puede encontrar estas configuraciones en el menú WooCommerce - Ajustes.

Etapa 1: Detalles de la tienda. Debe completar la dirección de su empresa, que aparecerá en tus facturas y dará seguridad a sus clientes.

images/22pagina_3.png

Etapa 1 del asistente de configuración de la extensión WooCommerce

La etapa 2: Sector. Tiene la posibilidad de indicar el sector en el que opera su tienda.

images/22pagina_4.png

Etapa 2 del asistente de configuración de la extensión WooCommerce

La etapa 3: Tipos de productos. Tiene la opción de configurar el tipo de productos que vende en su tienda, como por ejemplo, productos físicos o elementos descargables, como suscripciones, reservas online, etc.

images/22pagina_5.png

Etapa 3 del asistente de configuración de la extensión WooCommerce

La etapa 4: Detalles del negocio. Le ofrece extensiones gratuitas para mejorar la funcionalidad de tu tienda.

Storefront Theme es un tema intuitivo y flexible, que permite una buena integración de WooCommerce. Puede considerarlo como el tema predeterminado de WooCommerce.

Enlace del tema: https://woocommerce.com/storefront

No es necesario que utilice este tema, ya que hemos visto que hay muchos temas que son compatibles con WooCommerce, especialmente en la plataforma Theme forest.

Encontrará una subpestaña, en el menú Apariencia - Escaparate, que le permite acceder al soporte, la documentación, el blog de desarrollo y sugerencias de temas y extensiones Storefront.

MailChimp le permite enviar newsletters y sincronizar los correos electrónicos...

Las plantillas de páginas de WooCommerce

WooCommerce usa plantillas de página que se encuentran en la carpeta Plantillas, para mostrar las diferentes páginas de la tienda. Encuentre estos archivos siguiendo la siguiente ruta: wp-content/plugins/woocommerce/templates.

En la raíz de la carpeta Plantillas, encontrará:

  • archive-product.php: muestra la página principal de la tienda y el bucle principal de WooCommerce, según la plantilla de página. También muestra páginas de categorías y archivos.

  • content-product.php: muestra el contenido de los productos en el bucle WooCommerce.

  • content-product_cat.php: muestra las viñetas de las categorías de productos en los bucles.

  • content-single-product.php: muestra el contenido del producto en la plantilla de página single-product.php.

  • content-widget-price-filter.php: muestra el widget Filtrar los productos por precio.

  • content-widget-product.php: muestra el widget Productos.

  • content-widget-reviews.php: muestra el widget Advertencias recientes sobre los productos.

  • product-searchform.php: se trata del formulario de búsqueda de los productos.

  • single-product.php: se trata de la página del producto.

  • single-product-reviews.php: muestra las opiniones sobre la página del producto.

  • taxonomy-product_cat.php: muestra la página Categorías de productos.

  • taxonomy-product_tag.php: muestra la página Etiquetas...

Las extensiones WooCommerce

Las extensiones de WooCommerce son abundantes; las encontrará de manera gratuita como se explica en el capítulo Las extensiones y los widgets: a través del sitio oficial de WordPress, en el sitio de WooCommerce, en el sitio Theme Forest o directamente en los sitios de algunas extensiones.

Página de las extensiones en el sitio oficial: https://wordpress.org/plugins/search/woocommerce

Página de WooCommerce: https://woocommerce.com/product-category/woocommerce-extensions

Página de Theme Forest: https://codecanyon.net/category/wordpress/ecommerce/woocommerce

Aquí se presentan algunas extensiones:

PDF Invoices & Packing Slips

Por Ewout Fernhout

Esta extensión le permite agregar automáticamente una factura en PDF a los correos electrónicos de confirmación del pedido, enviados a sus clientes.

Incluye una plantilla básica, pero hay plantillas adicionales disponibles en WP Overnight. Tiene la opción de modificar y crear sus propias plantillas.

Además, puede optar por descargar o imprimir facturas y albaranes de entrega, desde la administración en la página de pedidos.

Enlace de la extensión: https://es.wordpress.org/plugins/woocommerce-pdf-invoices-packing-slips

images/22pagina_66.png

Página de la extensión PDF Invoices & Packing Slips

YITH WooCommerce Wishlist

Por YITH

Esta extensión permite agregar una lista de deseos. Los usuarios...

Las clases WooCommerce

Las clases de WooCommerce le van a permitir recuperar toda la información relacionada con WooCommerce. La clase principal es woocommerce y está disponible a través de la variable global $woocommerce. Esta variable global inicializa las funciones principales de WooCommerce y almacena las variables de WooCommerce a lo largo de todo el sitio web, lo que permite un mejor manejo de los mensajes de error y éxito.

La clase woocommerce inicializa las siguientes clases durante su construcción:

  • WC_Query - almacenada en $woocommerce->query

  • WC_Customer - almacenada en $woocommerce->customer

  • WC_Shipping - almacenada en $woocommerce->shipping

  • WC_Payment_Gateways - almacenada en $woocommerce->payment_ gateways

  • WC_Countries - almacenada en $woocommerce->countries

Otras clases se cargan automáticamente.

Para conocer todas las clases, diríjase a la API WooCommerce.

Enlace a la API WooCommerce: https://docs.woocommerce.com/wc-apidocs

WC_Product

WooCommerce tiene varias clases de productos responsables de cargar y generar datos de productos. Los productos se pueden cargar a través de PHP usando: 

$product = wc_get_product ($post->ID); 

En el bucle, su uso no siempre es necesario porque la llamada a the_post() llenará automáticamente la variable global $product si la publicación es un producto.

WC_Customer

La clase cliente WC_Customer permite obtener datos sobre el cliente actual, por ejemplo, para recuperar el país:

global $woocommerce; 
$customer_country = $woocommerce->customer->get_country(); 

WC_Cart

La clase de carrito WC_Cart carga y almacena los datos del carro de un usuario en una sesión. Por ejemplo, para obtener el subtotal del carrito, puede usar:

global $woocommerce; 
$cart_subtotal = $woocommerce->cart->get_cart_subtotal(); 

WC_Order

La clase comando WC_Order le permite obtener datos de pedidos. Por ejemplo, para obtener los detalles del pedido, puede utilizar:

global $woocommerce; 
$order = wc_get_order( $order_id ); 

1. Recuperar la información de los productos con WC_Product

La clase WC_Product va a permitir recuperar el nivel de existencias del producto, la clase de envío, la clase de impuestos, el precio, el precio regular, el precio de venta, etc.

Para hacer esto, debe recuperar la variable $product.

Pero, no necesariamente tiene acceso a esta variable todo el tiempo, por ejemplo, cuando...

Los marcadores condicionales de WooCommerce

Los marcadores condicionales de WooCommerce se utilizan de la misma forma que los que se vieron en el capítulo WordPress y PHP - Los marcadores condicionales. Se pueden usar juntos si es necesario.

Una página de producto también tiene un identificador, una taxonomía, etc. por lo que los marcadores condicionales is_single, has_term (), etc., por ejemplo, también funcionan para las páginas de WooCommerce.

Puede usarlos en el archivo functions.php, en las plantillas de página, en las extensiones, etc.

  • is_woocommerce(): indica si está en una página WooCommerce, fuera de las páginas carrito y pedido.

  • is_shop(): indica si está en la página de la tienda.

  • is_product(): indica si está en la página de los productos.

  • is_cart(): indica si está en la página carrito.

  • is_checkout(): indica si está en la página de pedido.

  • is_account_page(): indica si está en la página cuenta cliente.

  • $product->is_on_sale(): indica que el producto está en venta.

Los marcadores condicionales para los tipos de producto:

  • $product->is_virtual(): indica que el producto es virtual.

  • $product->is_downloadable(): indica que el producto es descargable.

Los marcadores condicionales para las variaciones:

if( $product->is_type( 'simple' ) ){ 
 
} elseif( $product->is_type( 'variable'...

Los hooks WooCommerce

Los hooks para WooCommerce, funcionan de la misma manera que los hooks de WordPress. Consulte el capítulo WordPress y PHP - Hooks (filtros y acciones). Le permiten modificar o agregar código, sin modificar los archivos base.

Para usar hooks, debe agregar código en el archivo functions.php, en el archivo functions.php de un tema hijo, en un archivo en el directorio mu-plugins, en una extensión o descargando una extensión.

Hay dos tipos de hooks:

  • Los hooks de acción le permiten insertar código personalizado donde se ejecuta el hook. Por ejemplo, para agregar un nuevo campo al pago o agregar este nuevo campo al pedido, etc

  • Los hooks de filtro le permiten manipular y devolver una variable. Por ejemplo, podemos hacer opcional el precio de un producto, cuando de base es obligatorio. También podemos borrar campos existentes, etc.

Enlace a la documentación WooCommerce: https://docs.woocommerce.com/wc-apidocs/index.html

Enlace a la guía de referencia sobre los hooks de WooCommerce: https://docs.woocommerce.com/wc-apidocs/hook-docs.html

Para conocer los hooks de WooCommerce, puede utilizar la extensión Hookr para el plug-in WooCommerce, así como para WooCommerce multiidioma.

Enlace a la extensión Hookr: http://hookr.io

1. Los hooks de acción en las páginas Tienda, Archivo y Categoría

En la siguiente captura de pantalla, encontrará un esquema de los hooks de acción que se llaman en la página de inicio de su tienda, así como en las páginas de Archivo y categoría.

Puede agregar contenido a estas ubicaciones, modificar el contenido o eliminarlo, usando las funciones: add_action() o remove_action().

Aquí está la lista de hooks predeterminados para la página Archivo:

Hooks antes del contenido

add_action('woocommerce_before_main_content',  
'woocommerce_output_content_wrapper', 10 ); 
add_action('woocommerce_before_main_content',  
'woocommerce_breadcrumb', 20 ); 

Hooks para la descripción

add_action('woocommerce_archive_description',  
'woocommerce_taxonomy_archive_description', 10 ); 
add_action('woocommerce_archive_description',  
'woocommerce_product_archive_description', 10 ); 

Hooks antes del bucle de la página

add_action( 'woocommerce_before_shop_loop'...