En algún momento, como propietario de una tienda, es posible que desee ofrecer a sus clientes la oportunidad de descargar archivos PDF de un solo producto directamente desde WooCommerce. Ya sea porque sus usuarios necesitan una versión impresa, porque sus comerciales necesitan folletos de productos cuando visitan a sus socios o porque sus clientes necesitan una versión offline de sus artículos.En este tutorial le mostramos cómo puede configurar su propio PDF de producto personalizado de WooCommerce basado en datos existentes. Aprenda a convertir sus datos de producto existentes en un único folleto de producto en PDF, que los clientes puedan descargar y ver sin conexión.
Qué es WooCommerce?
Antes de empezar necesitas saber qué es WooCommerce. WooCommerce es un plugin de sistema de tienda para WordPress, que te ofrece todas las funcionalidades que una tienda online necesita hoy en día. Puede crear productos, configurar métodos de envío y pago y empezar a vender en línea con sólo unos clics. No sólo podrás mostrar tus artículos a la venta, sino que también podrás reutilizar todos los datos para crear un folleto de producto en PDF.
Qué es WooCommerce Print Products (PDF)?
Supongamos que no quiere empezar desde cero implementando una solución con la que pueda convertir los datos de sus productos en línea en un PDF impreso. Es complejo configurar un motor de renderizado de PDF, necesitas encontrar todos los hooks, filtros y funciones esenciales de WooCommerce y pronto te pierdes en el universo WordPress.Por ello, puede utilizar el plugin Print Products (PDF) para WooCommerce como una sencilla solución de base. Este plugin le ofrece una solución fácil para convertir productos en PDF, Word o Imprimir. Puede elegir entre 3 diseños diferentes, ocultar o mostrar datos y añadir un encabezado y pie de página personalizados con su logotipo, nombre de marca, nombre de producto y mucho más.Utilizaremos este plugin para crear nuestro propio PDF de producto personalizado utilizando los filtros proporcionados por el plugin.
Uso de los ganchos de WordPress en un tema hijo
WordPress y muchos plugins profesionales le ofrecen filtros para modificar el contenido, los datos o añadir textos personalizados. Hay dos tipos de filtros:
- Ganchos de acción
- Ganchos de filtro
La diferencia no es fácil de explicar, porque ambos ganchos pueden hacer casi 1:1 lo mismo. Pero la intención de las acciones es añadir contenido extra y la intención de un filtro es modificar los datos ya proporcionados por un plugin, tema o núcleo de WP.El plugin WooCommerce Print Products PDF utiliza ganchos de filtro para modificar el HTML que se coloca dentro del archivo PDF del producto. Y vamos a utilizar el filtro woocommerce_print_products_product_html para crear una plantilla personalizada.Para utilizar WP Hooks se recomienda configurar un tema hijo. Un tema hijo hereda todas las funcionalidades del tema principal. Aquí puedes crear funciones personalizadas o modificar estilos sin perderlo todo en una próxima actualización del tema principal. La mayoría de las plantillas de Themeforest, por ejemplo, ofrecen un tema hijo directamente en los archivos descargados. Simplemente instale el tema principal + el tema hijo, active el tema hijo y listo. En apariencia verás entonces 2 temas, el infantil debe estar activo.
Creación de nuestra plantilla HTML personalizada
As said we are going to use thewoocommerce_print_products_product_html filter. Este filtro modifica la parte HTML completa dentro del PDF, pero no toca la cabecera ni el pie de página, que puedes configurar en los ajustes del plugin.Así que abre las funciones.php en tu tema hijo y haz una pequeña prueba añadiendo esta función:add_filter(‘woocommerce_print_products_product_html’, ‘custom_print_products_template’, 10, 2);function custom_print_products_template($html, $product_id){$producto=wc_get_producto($id_producto);si(!$producto) {devolver $html;}$producto_id=$producto->get_id();$html=’test’;devolver $html;}Ahora llame a su producto de impresión PDF URL así: https://yourdomain.com/product/YOUR_PRODUCT_URL/?imprimir-productos=pdfVerá una cadena de prueba simple dentro del archivo incluyendo el encabezado y pie de página predefinidos, que provienen del plugin. Es tan sencillo como esto, ahora puedes añadir HTML personalizado al PDF como quieras.Vamos a añadir algunos datos más del producto al HTML:
- Imagen del producto alineada a la izquierda
- Título del producto + Descripción derecha
- Metacampo personalizado
Añadir imagen, nombre y descripción del producto al PDF
Así que vamos a modificar la función anterior y añadir algunos datos más. Comenzamos añadiendo la imagen, el título y la descripción de nuestro producto. La imagen irá en una columna de la izquierda y el bloque de título en una columna de la derecha, por lo que necesitamos un poco de CSS personalizado para proporcionar el flotante.add_filter(‘woocommerce_print_products_product_html’, ‘custom_print_products_template’, 10, 2);function custom_print_products_template($html, $product_id){// Comprobar si el producto existe$producto=wc_get_producto($id_producto);si(!$producto) {devolver $html;}// Obtener ID de producto$producto_id=$producto->get_id();// Estilo CSS personalizado$html=’.contenedor {acolchado: 20px;}.col-12 {anchura: 100%;acolchado: 10px;}.col-6 {anchura: 45%;float: izquierda;acolchado: 10px;}’;// Empezar con un contenedor$html .= ”;// Obtener la URL de la imagen del producto$product_image_url=get_the_post_thumbnail_url($product_id);si($url_imagen_producto) {$html .= ‘
‘;}// Obtener nombre y descripción del producto$nombre_producto=$producto->obtener_nombre();$producto_desc=$producto->obtener_descripción();si($nombre_producto) {$html .= ‘
‘ . $nombre_producto . ‘
‘ . $desc_producto . ‘
‘;}$html .= ”;devolver $html;}Hemos añadido CSS personalizado para los bloques flotantes y hemos añadido algo de relleno. A continuación, utilizamos el objeto $producto y llamamos a funciones para recibir datos como el nombre, la descripción, etc. Puedes encontrar una lista completa de funciones para llamar al objeto producto de WooCommerce aquí. Luego devolvemos el HTML y así es como se ve:
Añadir un campo de producto personalizado al PDF
Si utiliza campos de entrada personalizados puede utilizar la función get_post_meta de WordPress para recibir los valores. WooCommerce almacena los metadatos también en la tabla post_meta. Por ejemplo, el precio, que también se puede recuperar mediante $product->get_price(); function. Así que para campos meta realmente únicos como los del plugin ACF u otros plugins personalizados la función anterior es crucial para obtener los datos. Un ejemplo de cómo utilizar el get_post_meta para dar salida a un campo personalizado en nuestro pdf de producto único WooCommerce:$html .= ”;// Obtener campo personalizado$campo_personalizado=get_post_meta($product_id, ‘custom_field’, true);si($campo_personalizado) {$html .= ‘
‘ . $campo_personalizado . ‘
‘;}$html .= ”;Y eso es todo. Si utiliza ACF, por ejemplo, puede utilizar la función get_field de ACF en lugar de get_post_meta.Si tienes más preguntas sobre cómo configurar una plantilla PDF de producto personalizada, no dudes en comentar este artículo a continuación.
