Catálogo para WordPress con Woocommerce

Catálogo de productos

Si no tienes mucha experiencia como diseñador web, te darás cuenta que no todo se puede hacer con plugin. Cada CMS tiene su utilidad en concreto: Prestashop y Magento u OS Commerce son para tiendas Online, WordPress o Joomla par introductor de contenidos y web corporativas o blog, Dolibarr para ERP, y un sinfín de productos más.

Catalogo con woocommerce

 

El problema es cuando quieres tener una combinación de ambos. Por ejemplo: Una tienda online con un blog. Lo normal en éstos casos es crear una tienda online en Prestashop o Magento (leer el post que te ayudará a elegir entre los dos), y en un directorio de la tienda instalar WordPress para un blog que puedas controlar.

WordPress tiene plugin como woocommerce, eshop y demás que te ayudan a  crear una tienda online en sobre un CMS en ésta plataforma. El problema viene cuando quieres implementar un catálogo igual que el de una tienda online, pero sin el carrito de la compra.

Pues bien vamos a describir paso a paso como integra woocommerce en una tienda online y además desactivar el carrito de la compra para no tener problemas.

Partimos con un tema cualquiera de WordPress y el plugin Woocommerce instalado.

Integración de Woocommerce

Lo primero que tenemos que hacer es integrar el plugin de forma adecuada en nuestro theme, ya que en la mayoría de los casos la barra de la derecha siempre queda por debajo del contenido de woocommerce. Para ello hacemos lo siguiente:

  1. En el directorio …./wp-content/themes /tutema/… duplicamos page.php y lo renombramos con el nombre de woocommerce.php
  2. Debemos buscar el Loop que queremos modificar. Comienza por :

<?php if ( have_posts() ) :  

Y normalmente termina con <?php endif; ?>

  1. Debemos sustituirlo por esto: <?php woocommerce_content(); ?>

Ya hemos terminado con la integración. Ahora falta eliminar el botón de añadir al carrito para no tener problemas de falsas compras y demás.

 

Eliminación del botón añadir al carrito

Para ello deberemos editar el archivo functions.php de nuestro Tema. Como aclaración y ayuda, los que utilizan Mac tienen Coda para poder modificar código y conectarse por ftp para editar los ficheros en tiempo real. Los que trabajen con PC PSPad es una buena herramienta, al igual que UltraEdit, pero si tengo que elegir entre uno y otro me quedo con PSPad.

  1. Ir a …/wp-content/themes/tu-tema/functions.php
  2. Ir a la penúltima línea de código entre <?php }    y  ?> y añdir lo siguiente:

//Código par desactivar el botón añadir al carrito en listado de productos…

remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’ );

 

// Código par desactivar el botón añadir al carrito en página de productos productos…

remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );

 

De esta forma se desactiva el botón añadir al carrito, tanto en los listados de productos como en las páginas individuales de cada producto. Ahora sólo nos queda deshabilitar las páginas que woocommerce nos ha creado de forma automática como el carrito, Mi cuenta, finalizar la compra, etc… Pero no podemos hacerlo de cualquier forma, ya que si en un momento dado queremos utilizar el catálogo para vender online y activarlo de nuevo podamos hacerlo.

 

Deshabilitar páginas de woocommerce

Para ello vamos a utilizar el plugin Exclude Pages éste te agrega un campo en la derecha para excluir o incluir la página.  Entramos desde el BackOffice a las páginas automáticas del plugin de la tienda y desactivamos el checkbox Exlude Pages. De ésta forma no se podrá tener acceso de ninguna forma a la tienda ni se podrá hacer ninguna compra.

 

Volver a habilitar todo.

Si trascurrido un tiempo, queremos habilitar el catálogo para poder vender ésos productos por internet y Woocommerce es un plugin muy completo para hacerlo, deberemos habilitar de nuevo tanto el botón de “Añadir al Carrito” como las páginas automáticas. Para lo segundo deberemos seleccionar el checkbox Exlulde Pages de cada página automática, mientras que para que se vea el botón de añadir al carrito es necesario deshabilitar el código insertado anteriormente.  Simplemente añadimos // delante de remove_action quedando de la siguiente forma:

//Código par desactivar el botón añadir al carrito en listado de productos…

//remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’ );

 

// Código par desactivar el botón añadir al carrito en página de productos productos…

//remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );

 

De ésta forma ya podemos tener un catálogo totalmente integrado con nuestro CMS o web corporativa, sin necesidad de tener una tienda online.

Has encontrado algún otro método?  Compártelo con todos nosotros tanto éste como el tuyo

 

26 comentarios
  1. David
    David Dice:

    Magnífico trabajo Antonio, procuraré tener cerca esta información para utilizarla en breve. Aún así me gustaría compartir contigo y con tus lectores esta aportación:

    https://drupal.org/project/commerce_kickstart

    Es una tienda online integrada con drupal que permite de manera bastante sencilla hacer esto mismo que os planteais. Espero que os sea de utilidad.

    Saludos.

    Responder
    • Daniel
      Daniel Dice:

      Hola, gracias por el post, me ayudo bastante, pero me gustaria saber si existe la posibilidad de cambiar el link del carro? es decir que en vez del boton añadir aparesca un link a la pagina de contacto.

      Responder
      • Antonio López
        Antonio López Dice:

        Pues en éste caso habría que cambiar la función que inserta el producto en el carrito y aquí tenemos dos opciones: Si quieres que simplemente se vaya a la opción de contacto, pues sustituirlo simplemente por un enlace a contacto; si quieres que además en el contacto te agrege en un campo el producto del que quiere tener más información, habría que crear una función al respecto para tal fin. Pero esto ya es trabajo de código a medida.
        Gracias por tu comentario tan amable. Saludos

        Responder
    • Miguel
      Miguel Dice:

      Esa extensión para woocommerce hace eso. A mi me parece demasiado cara u$s49 me parece mucho, y sólo para 1 sitio….

      Responder
    • Antonio López
      Antonio López Dice:

      Un placer haber podido ayudarte. Si necesitas ayuda sólo tienes que pedirla. Por cierto ¿conseguiste implantarlo en tu web o en otra web?

      Responder
  2. Sargantana
    Sargantana Dice:

    Hola, ¿dónde debo insertar en mi plantilla?
    No acabo de aclararme.

    Gracias

    Fernando

    ——————- page.php ————–

    <section id="content" class="content “>
    <div id="post-” >

    ”.__(‘Pages’, ‘cpotheme’).’:’, ‘after’ => ”)); ?>

    Responder
  3. Cesar Araya
    Cesar Araya Dice:

    Que tal, un excelente aporte, me sirvieron dos de los puntos que diste, atacando directamente el codigo php del plugin y de wordpress, ahora tengo dos preguntas que me serviria de mucho si me puedes orientar, necesito sacar el carro de compras de las paginas, hay un icono de un carrito que no se como sacarlo, y como puedo despublicar las paginas del carro ya que con el plugin no pude hacerlo,

    muchas gracias de antemano por la info expuesta.

    Responder
    • Antonio López
      Antonio López Dice:

      El propio plugin te genera un montón de páginas como mi cuenta, y demás. Deberás eliminarlas de Páginas. o desactivarlas. Simplemente eso.

      Responder
  4. Mayda
    Mayda Dice:

    Muy bueno el artículo lo hice tal cual y ha funcionado muy bien. Muchas gracias.
    Una consulta más sobre el mismo tema. Cdo tengo el catálogo de productos( a mano derecha arriba) sale el ordenamiento del catálogo y aparecen los conceptos de precios. ¿se podría eliminar este detalle o más bien adecuar el ordenamiento según necesidades?
    muchas gracias de antemano

    Responder
    • Antonio López
      Antonio López Dice:

      Hola Mayda.
      Dónde lo has implementado? cuál es la web? para saber lo que me hablas y poder ayudarte.
      Saludos.
      Por cierto gracias por el comentario.

      Responder
  5. Mayda
    Mayda Dice:

    Hola Antonio,
    Gracias por tu pronta respuesta, no puse la web en el anterior porque la tengo en mi pc en un localhost; aún no la he subido a ningún hosting. Está hecha en wordpress con el tema customizr e instalé el plugins woocommerce. La idea es mostrar un catálogo de casas con sus descripciones pero no venderlas, por tanto no llevarán precio, ni carrito de compra, ni pedido, etc.; por eso apliqué lo que explicas en tu blog y prefecto, logro lo que quiero, pero en el ordenamiento de los productos se muestra ordenar por precios y no me interesa dado que no muestro ese campo. Por eso quería eliminarlo. No sé si con los datos te aclaro algo más para que puedas imaginarte lo que quiero. A continuación he copiado el segmento de código html que tiene que ver con el problema

    Orden predeterminadoOrdenar por popularidadOrdenar por puntuaciónOdenar por novedadesOrdenar por precio: bajo a altoOrdenar por precio: alto a bajo
    Y es el que necesito modificar para eliminar los opciones de precios

    Muchas gracias de nuevo
    Mayda

    Responder
  6. Mayda
    Mayda Dice:

    Buenos días Antonio he subido la web así que podrás, verificar lo que querías. Pero bueno, he seguido revisando el problema y he encontrado el programa php que controla el ordenamiento de los producto. el mismo se llama orderby.php y está dentro de woocommerce/template/loop
    Lo que necesito es eliminar los ordenamientos que aparecen en el array y dejar sólo los que me interesa, pero no quiero modificarlo ahí, sino dentro de function.php eliminar lo que me interesa y generar de nuevo el select (ordenamiento definido por mi).
    En espera de su atención y gracias
    Un saludo
    Mayda

    Responder
  7. ignacio
    ignacio Dice:

    Amigo Necesito ayuda.

    Estoy con el plugin woocommerce version 2.2.6 Necesito poder cambiar el icono o boton donde aparece el carrito o en su defecto eliminar.

    Necesito poder cambiar el titulo de la seccion productos “Productos” por otro de acuerdo a mi sitio

    y por ultimo necesito cambiar el texto que aparece en el interior de la barra buscar.

    Y poder cambiar el orden de búsqueda en el filtro o eliminar

    Responder
    • Antonio López
      Antonio López Dice:

      Hola Ignacio…. No es poco lo que necesitas. Pero todo eso que necesitas es tocar un poco de código. ¿Sabes algo de PHP o de html o de CSS?
      Por cierto. Para cambiar el título de productos cambia el título a la páina productos y ya está. Desde Woocommerce tienes que identificar cual será la pagina donde se abra el catálogo. Por eso cambias el título en esa y ya está.
      Saludos.

      Responder
        • Antonio López
          Antonio López Dice:

          Hola Ignacio.
          Pues creo que en el artículo está bastante bien especificado los artículos que hay que modificar. Si no te aclaras, me lo dices y te recomiendo otras cosillas.
          Saludos.

          Responder
    • Antonio López
      Antonio López Dice:

      Conocía de su existencia pero no lo he probado nunca. Mi opinión personal al respecto es que si vas a vender un producto aislado en tu web, utilizaría woocommerce o incluso se puede probar éste servicio,(aunque ya te digo que yo no lo he probado y no se cómo funciona, sólo sé que si tienes más de 10 productos tienes que pagar), Pero si lo que quieres es montar una tienda online sin duda alguna me iría a un CMS de ecommerce como Prestashop o Magento. Hoy día en Prestashop se puede hacer cualquier cosa, y en magento también, y no son mucho más complicados que WordPress. Saludos Daniela.

      Responder
      • Daniela
        Daniela Dice:

        Muchas gracias por responder Antonio! Ya tengo el sitio en WordPress, solo queria agregar la funcionalidad de compras, por eso buscaba un plugin. Gracias por las sugerencias!

        Responder

Trackbacks y pingbacks

  1. […] Catálogo para WordPress con Woocommerce |ElblogdelSEO.com […]

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

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

*