Escríbeme un mensaje

Conectar entradas o páginas de WordPress con artículos de Woocommerce

/ Blog

Recientemente desarrollando una solución de comercio electrónico para una empresa, me encontré con la necesidad de conectar entradas personalizadas de WordPress (un custom post type) con los artículos de Woocommerce. Básicamente la idea es crear un Custom Post Type con marcas y poder asignarle a cada artículo una marca con un campo personalizado. Por supuesto, Woocommerce dispone del correspondiente «plugin» para incluir marcas en los productos, pero mi intención es aprovechar al máximo la capacidad de «conectar contenido» dentro de WordPress. Este ejemplo, viene a demostrar la extrema potencia del plugin Advanced Custom Fields (ACF) para extender el funcionamiento de tu sitio web WordPress, gracias al uso de los campos de tipo Relación.

El campo relación de ACF al rescate en Woocommerce

En algún proyecto ya he experimentado con la capacidad de plugin ACF para integrarse con Woocommerce (WC). A fin de cuentas WC extiende los productos como una entrada personalizada (product) con sus taxonomías (product_cat) y campos personalizados.

A mí modo de ver uno de los campos más poderosos de ACF es el de relación o el de Objeto Post. El objetivo de estos campos es conectar el contenido (entradas con páginas, entradas con entradas, etc), de forma que permite una organización muy precisa de nuestro sitio web.

El ejemplo que paso a describir, permite mostrar una plantilla de custom post type (singular_{$custom_post_type}.php) donde lista todos los objetos conectados a la misma. En este ejemplo sería «mostrar para cada marca una relación de productos en Woocommerce». Esto es, suponiendo que hemos creado una página de venta de gafas (ese es mi proyecto), podríamos añadir marcas como custom post types y al introducir productos en Woocommerce seleccionar la marca como un campo personalizado.

Editar producto Woocommerce ACF

Una vez asignar una marca a cada producto, la cuestión es mostrar en la plantilla los productos de cada marca. Hay que tener en cuenta que una simple consulta WP_Query utilizando tax_query no nos sirve, puesto que a nivel interno ACF, guarda el valor serializado. Por tanto necesitamos recurrir a la estupenda documentación para encontrar una solución.

Código de ejemplo para mostrar productos Woocommerce por entradas personalizadas

Para conseguir mostrar los productos necesitamos crear un consulta con la función get_posts(), pasando como argumentos el custom post type de Woocommerce «product» y como campo personalizado, el creado en ACF y que «conecta» el producto con la marca. La clave está en generar un operador LIKE con el ID del custom post type. Más fácil verlo que explicarlo.

Una vez tenemos en la variable $productos la información, necesitamos realizar un bucle por todo el array con los valores devueltos. Para ello lo único es recorrer el array para obtener los datos de cada producto por la marca indicada. Aquí podemos utilizar las funciones propias de WordPress para extraer la información de la base de datos. La única precaución es pasar la instancia de cada entrada con su ID correspondiente.

Acceder a los atributos de los productos Woocommerce en la plantilla

Para finalizar podemos acceder a los atributos del producto (precio por ejemplo) en nuestra plantilla gracias a crear una instancia de clase WC_Product. Así dentro de nuestro bucle foreach, podremos acceder a la información que almacena Woocommerce sobre los productos como campos personalizados.

En la imagen se puede apreciar el resultado final. Una página de marca que reúne los modelos disponibles para esa marca. Por supuesto al editar el producto hay que seleccionar la marca como campo personalizado. Es posible asignar varias marcas a un mismo producto. No obstante, este es un ejemplo que es fácil trasladar a otras situaciones y que demuestra el potencial de WordPress para gestionar el contenido de un sitio web.

Ejemplo relación custom post type

16 respuestas a “Conectar entradas o páginas de WordPress con artículos de Woocommerce

  1. Hola que tal!!

    Ojala puedas ayudarme con una duda que tengo.
    Hace poco desarrollé un sitio de ventas de cursos online, la hice con Wp-Types (Entradas Personalizadas) y la integré a un carrito de compra (Simple Paypal shopping cart) luego el cliente quiso usar Woocommerce, es alli donde vino el problema, será posible que de alguna forma integre el WC a mis entradas personalizadas? sin tener que volver a cargar todo en el sistema de woocomerce, y que pueda ver esos paneles que tiene la vista de creacion de producto dentro de mi pantalla de creacion de curso hecha en WP-types??

    1. Hola Carlos, el caso que comentas precisamente yo lo tuve con el sitio web que comento en este artículo. Fue el motivo por el que decidí migrar todo el sitio a Woocommerce, la solución del plugin de Paypal era insuficiente. En la otra web me encontraba con una situación similar. Había creado un custom post type para gafas con sus campos personalizados a través de Advanced Custom Fields. La web funciona bien, pero un comercio electrónico es algo más que un simple botón de pago con paypal y en la inmensa mayoría de los casos hay que estar preparado para requerimientos futuros (que no suelen ser definidos por los clientes, pero nosotros como desarrolladores debemos tener previstos).

      Lamentablemente no tengo experiencia con WP Types porque toda la funcionalidad que indican (a excepción de crear los CPT que lo hago con unas pocas líneas de código) la hago a través de Advanced Custom Fields (preferiblemente versión PRO). De cualquier forma la situación es que tienes creados con un custom post type los cursos. Esto como bien sabes genera en un “post type” en la base de datos de WP del tipo definido al generar el CPT con la función register_post_type(). Supongo que ya estarás familiarizado con la estructura generada por WP Types en la base de datos. Si no es así te sugiero que te documentes bien con programas como phpmyadmin o sequel pro . El objetivo es que tengas claro como se relacionan las tablas y el tipo de campos que genera. Es importante para hacer cualquier tarea de depuración de errores.

      Lo primero que se me pasa por la cabeza es que tendrás que transformar de golpe muchos custom post type de tus cursos para transformarlos en el post type que genera WC con sus productos. Hay plugins que permiten convertir de golpe CPT, como por ejemplo Convert Post Types Podrías probar a hacerlo (yo no lo he probado a hacer) en un entorno de pruebas y ver como responde.

      Desafortunadamente la funcionalidad de WC (proceso de venta, inventario, gestión etc) está atada por completo a los custom post type de product que genera junto con las taxonomías de categoría y etiquetas (product_cat y product_tag). En el caso que te comentaba, decidí migrar todo y aprovechar la máximo las url conforme estaban (también había generado CPT por ejemplo para marcas) y lo que no pues redirecciones 302.

      Entiendo que tienes mucho material para migrar y que es un trabajo grande. Siempre puedes crear la web con WC y lo que tengas hecho redireccionar. Es un trabajo, pero te sale a cuenta porque a largo plazo tendrás una web mucho más extensible que con un simple botón de PayPal. En el artículo lo quería explicar es como la funcionalidad básica de WC puede ser extendida con campos personalizados y CPT, evitando el pago de plugins que en ocasiones te atan a un modelo de pago periódico y a un código poco extensible (a no ser que controles mucho WC). Como sabrás Woothemes también tiene un plugin para la creación de cursos online con WordPress llamado Sensei. Es de pago, pero a fin de cuentas el trabajo del desarrollador también lo es ¿no?

      Espero que todo esto te sirva de algo. Muchas gracias por tu comentario.

  2. Buenas! Me encanta la idea, pero el código tal y como lo pones da errores de php sin modificarlo. ¿Sabrías decirme por qué? Muchísimas gracias por el aporte!

  3. Hola Victor, soy totalmente novata en esto del diseño de paginas web, estoy creando mi tienda online con Woocommerce y WordPress, y me he estancado en poder modificar el banner de la pagina de inicio, se que toma imágenes de las entradas, pero yo quiero poner en el banner mis productos en oferta, por favor me podrías guiar un poquito. Gracias.

    1. Hola Ana, te contesto yo, que Víctor está por la otra línea La solución que yo te apuntaría es usar Advanced Custom Fields. Puedes crear campos personalizados para la página de inicio y los enlazas con los productos en oferta a través de un campo Objeto. Lo único es que para simplificar podrías crear un menú de Opciones donde escoger los productos que quisieras mostrar. En el plugin ACF Pro sí que verás que se puede crear un menú de Opciones, aunque sí que hay una versión como plugin adicional Es como yo hago los sliders o elementos comunes junto al add-on de Repetidor (también incluido en la versión Pro). Espero haberte dado pistas.

  4. Hola tocayo, ¿cómo estás?, realmente me sirvió el post hasta que vi la parte de programación. Pucha que se puso espeso el asunto allí, soy más bien un entusiasta y principiante en todo este gran universo llamado WordPress. Lo que estoy buscando, para un pequeñísimo sistema de cotización, es lo siguiente: vincular Custom Post Type de «CLIENTE» con Custom Post Type de «PRESUPUESTO». Es decir: primeramente genero un presupuesto X y luego vinculo ese presupuesto con un cliente X. Luego, ya en el template donde van a ser mostrados los ACF poder mostrar el presupuesto generado para ese cliente. Es decir, que estaría llamando desde un ACF el presupuesto X generado para el cliente X (en vez de presupuesto Y de cliente X). ¿Me explico?, ¿es viable o razonable?, ¿posible?. Gracias por anticipado 🙂

    1. Hola Javier, ánimo con ese proyecto. Se puede hacer sin problemas según lo comentas, conectando los CPT y que los campos personalizados sean los que complementen el contenido. Espero que te salga bien y gracias por dejar tu comentario. Saludos.

      1. Siento que se me está escapando la tortuga, estimado. Gracias por el buen ánimo. ¿Recomiendas algún tutorial o herramienta para avanzar en esto?, estoy medio trabado. En el peor de los casos, agradecería que me recomiendes algún CAPO, CRACK, TITÁN, MAESTRO, NINJA de WordPress. Para poder avanzar con este proyecto. Por supuesto, agradecido desde ya. Abrazo.

        1. Hola de nuevo Javier. Con ACF deberías tenerlo todo para poder hacerlo. Ten presente que necesitas conectar los dos CPT (presupuestos con clientes) y añadir los campos personalizados necesarios a cada una de los tipo de contenido. Ahí tendrás que pensar en si necesitas tener algo como unos servicios o productos predefinidos o que vengan de otro CPT como por ejemplo WooCommerce. En función de cómo esté hecho un tema necesitarás manejar las plantillas según lo quieras mostrar. Si crees que estás atascado y quieres compartir algo de código, dímelo y podemos ver cómo lo tienes. Saludos.

  5. Buenas tardes Javier, te escribo para consultarte lo siguiente. Tengo el sitio de un cliente (un sitio de real state o inmobiliario) donde el mismo fue desarrollado con el theme Findeo y woocommerce. El theme tiene un plugin llamado realteo, que lo que hace es crear un tipo de producto especial en woocommerce, llamado Property Package. El mismo te permite crear un producto a modo de membresía con el cual, al comprarlo, le permite al cliente publicar un post especial (una propiedad) con los datos de la propiedad que este tiene a la venta o en alquiler por un tiempo determinado. El problema surge que es que ese plugin o el tipo de producto que este genera, no añade ninguna categoría en particular a esa publicación, y lo que necesito es que al comprar el producto «gold» por ejemplo, se le agregue una categoría en particular, para que estas publicaciónes puedan ser vista como post destacados, y asi también con los productos de menor rango. Alguna idea de como puedo realizar esto? Desde ya muchas gracias

    1. Hola Hernán, creo que en un caso como el que comentas, cualquier funcionalidad de WooCommerce adicional necesita pasar por engancharse a uno de los hooks documentados. Entiendo que un hook como woocommerce_order_status_completed permitiría añadir funcionalidad cuando se realiza un pedido. En tal caso agregar la categoría que indicas, a través de una función en tu plugin o functions.php Igual ya habías pensado en esto. Espero haberte dado alguna pista. Saludos.

  6. Buenas tardes a todos.

    Tengo un problema y quizás me puedan ayudar a solventarlo.

    Estoy desarrollando una web, en la que el cliente me solicita que en las «recetas» (son entradas de blog), se muestren en la parte inferior, los productos de la tienda que se han usado para la receta.

    Estos productos están creados con Woocommerce.

    Pueden ayudarme?

    Gracias

    1. Hola Jose Luis, tienes dos formas de hacerlo. La básica es usando algún plugin de publicaciones relacionadas (ejemplo) donde para mostrar debes incluir algún shortcode en el sitio apropiado (los famosos corchetes).

      La segunda opción, implica algo de código php y sería hacer una consulta personalizada con unos criterios determinadas, haciendo uso de la clase WP Query o de funciones como get_posts de WordPress.

      Si no eres persona de código, tira por la primera opción que buscando plugins encuentras soluciones como las que te he dicho. Ten en cuenta que WooCommerce usa un tipo de publicación personalizada (custom post) llamada product, que no deja de ser lo mismo que una entrada o página pero adaptada al producto.

      Cualquiera de las dos opciones necesitará luego algo de maquetación en CSS, a no ser que aproveches las clases CSS que ya vengan en tu tema.

      Espero haberte sido útil y suerte.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *