1. envato-tuts+
  2. Home
  3. Web Design
  4. eCommerce
  5. WooCommerce

Cómo Hacer Compatible Tu Tema con WooCommerce

Scroll to top
Karen Pogosyan
• 8 min read
Español
eCommerce WooCommerce WordPress WordPress Themes
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En este tutorial para principiantes te mostraré la forma correcta de añadir compatibilidad con WooCommerce a tu tema WordPress. También aprenderá a extenderlo de una forma no intrusiva, sin editar los archivos del núcleo del plugin. Veremos los siguientes pasos lógicos:

  1. Primeros Pasos
  2. El Empleo de Hooks y Acciones
  3. Extensiones WooCommerce

1. Declarar la Compatibilidad con WooCommerce

Imaginemos que estamos desarrollando un tema WordPress. Queremos mejorar alguna de las estupendas funcionalidades de WooCommerce, y personalizar también otras de sus funcionalidades. Existen dos formas en las que podríamos extender la funcionalidad de WooCommerce sin editar los archivos del núcleo del plugin:

  1. Usando los hooks (para desarrolladores intermedios)
  2. Usando la función woocommerce_content() dentro de nuestro tema

He encontrado que una combinación de estas opciones es lo que mejor funciona para producir resultados fiables. Así que primero declaramos la compatibilidad con WooCommerce en el archivo "functions.php" de nuestro tema y deshabilitamos los estilos predeterminados de WooCommerce con los del diseño de nuestro propio tema.

1
 
add_action( 'after_setup_theme', 'woocommerce_support' );

2
 
function woocommerce_support() {

3
 
   add_theme_support( 'woocommerce' );

4
 
}

Esto ocultará el mensaje "Tu tema no declara la compatibilidad con WooCommerce".

Para deshabilitar los estilos predeterminados de WooCommerce, añadimos lo siguiente:

1
 
if (class_exists('Woocommerce')){

2
 
    add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

3
 
}

Con la función class_exists(), comprobamos si el plugin WooCommerce está instalado y activo. Una vez esté activo, deshabilitamos sus estilos predeterminado. Más adelante, en este tutorial añadiremos algunas configuraciones de acciones y hooks dentro de esta declaración if.

2. Crea una Nueva Plantilla de Página

Por ahora, duplica el archivo "page.php" del tema, y llámalo "woocommerce.php". Este archivo debería estar ubicado en la siguiente ruta: wp-content/themes/YOURTHEME/woocommerce.php.

Abre tu recién creado archivo en un editor de texto o en el editor de código de tu elección. Después tendrás que encontrar el loop, que normalmente empieza con:

1
 
<?php if ( have_posts() ) :

y normalmente termina con:

1
 
<?php endif; ?>

Esto puede variar entre temas. Una vez hayas encontrado el loop, elimínalo. En su lugar coloca los siguiente:

1
 
<?php woocommerce_content(); ?>

Nuestra plantilla woocommerce.php ahora usa el loop de WooCommerce. woocommerce_content() carga la lista de productos en la página principal de la tienda, en las páginas de categoría de productos, el la página de búsqueda de productos y en el contenido del producto cuando estamos viendo la página del producto.

3. Añadir Cosas a woocommerce.php

Como woocommerce.php es ahora parte de tu tema, puedes personalizarlo al igual que haces con tus otros archivos. Por ejemplo, yo siempre añado la sección del título de la página, ya que mis páginas regulares normalmente contienen esas cosas. Ninguna de estas cosas afecta a woocommerce_content(). En este punto, puedes añadir también otras cosas usando etiquetas condicionales de WooCommerce y WordPress.

Por ejemplo, añadamos la función para la paginación a la página de producto, de la siguiente manera:

1
 
<?php if (is_product()): ?>

2
 






3


// your navigation function goes here.







4








5


<?php endif ?>







 4. Usar los Hooks y las Acciones en WooCommerce



Puedes encontrar la lista completa de acciones, hooks y filtros en la documentación de WooCommerce.


Si nunca has trabajado con las acciones, lo hooks ni los filtros de WooCommerce, te recomiendo que eches un vistazo a los siguientes recursos:



PAra entender mejor dónde están los hooks, te recomiendo leer la serie de Business Bloomers Visual Hook.


Para una comprensión un poco más compleja, pero aún más profunda de cómo funciona la lógica de WooCommerce, te recomiendo examinar los archivos de base del plugin (woocommerce > templates).


Por ejemplo, veamos qué podemos hacer en la página de la tienda. Para modificar el diseño de página mediante hooks, tienes dos opciones:


    

  • Extender la acción sin eliminarla.
    •  
  • Eliminar/quitar el hook de la acción existente y sustituirlo por uno propio personalizado.
    •  


El método más conveniente depende de lo que quieras conseguir. Por ejemplo, imagina que quieres eliminar la opción para ordenar los productos en la página de tu tienda:




1


remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );





Esto es todo lo que necesitas añadir en tu archivo functions.php, dentro de la declaración if class exists. WooCommerce entenderá ahora que no necesitas esa funcionalidad.


E imagina que queremos añadir un widget de búsqueda en sustitución de la función para ordenar los productos. Después de eliminar la acción, añade este código:






1


add_action( 'woocommerce_before_shop_loop', 'custom_woocommerce_product_search', 30 );







2








3


function custom_woocommerce_product_search() {the_widget(’WC_Widget_Product_Search’,’’,’’);}







Aún más, imagina que quieres eliminar la valoración de los productos en la página de la tienda. Pega el siguiente código en tu archivo functions.php:




1


remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );





Modificar la Prioridad de Ejecución


Habrás notado que en cada acción existe un número como último parámetro. Esta es la prioridad que se emplea para especificar el orden en el que las funciones asociadas a una acción concreta son ejecutadas. Las cifras más bajas corresponden a una ejecución más temprana, y las funciones con una misma prioridad son ejecutadas en el orden en el que han sido añadidas a la acción.


Esto es muy importante en situaciones en las que varias funciones son aplicadas al mismo hook de una acción. Por ejemplo, podrías querer envolver los detalles de producto (título, valoración, precio, botón de añadir al carrito) con un div.


Primero añadimos la etiqueta de apertura del div contenedor:






1


add_action( 'woocommerce_shop_loop_item_title', 'custom_woocommerce_loop_product_content_wrapper_start', 2 );







2








3


function custom_woocommerce_loop_product_content_wrapper_start'(){?><div class=”product-content-wrapper”><?php }







Después, añadimos la etiqueta de cierre:






1


add_action( 'woocommerce_after_shop_loop_item','custom_woocommerce_loop_product_content_wrapper_end', 50 );







2








3


function custom_woocommerce_loop_product_content_wrapper_end'(){?></div><!-- end of the product-content-wrapper --><?php }







Jugando con la prioridad del hook de la acción podemos hacer que realizarlo sea mucho más fácil.


El mismo principio es válido para la página de producto. Y aquí debes tener mucho cuidado, ya que los cambios que hagas en los hooks de la acción para los productos en el loop o la página de la tienda o del archivo serán ignorados en la página del producto. Aquí deberías modificar el diseño de la página del producto único de forma independiente, pero el principio fundamental sigue siendo el mismo.


Conociendo cómo trabajar con las acciones de WooCommerce te permite extender tu tema a un nuevo nivel. Aquí tienes algunos ejemplos de lo que yo hago en mis temas en lo que respecta a la compatibilidad con WooCommerce:


    

  • Carga de imagen personalizada para los productos.
    •  
  • Marcador de posición de imagen personalizado para los productos.
    •  
  • Galería personalizada para los productos.
    •  
  • Sistema personalizado para la presentación de las etiquetas de los productos (por ejemplo, ¡En Tendencia!, ¡Más popular!, ¡Recomendado!).
    •  
  • Visualización rápido con AJAX.
    •  
  • Texto  y botón personalizados para añadir al carrito.
    •  
  • Etiqueta personalizada para las ofertas.
    •  
  • Imagen personalizada para el slider y efecto de lightbox para la página del producto.
    •  
  • Lista de deseos AJAX
    •  
  • Pestañas personalizadas para el producto.
    •  
  • Comentarios sobre el producto. 
    •  
  • Tamaño personalizado para el gravatar.
    •  
  • Configuración personalizada para los productos relacionados, las ventas cruzadas y las ventas mejoradas.
    •  
  • Navegación personalizada AJAX para los productos.
    •  


 5. Extensiones para WooCommerce



Si quieres ampliar tu tema con extensiones de WooCommerce, el principio es el mismo. Utiliza siempre extensiones oficiales de alta calidad, ya que tendrán pautas para su integración y un equipo de soporte. Por ejemplo, yo amplío la tienda de mis temas con estos dos plugins:



Al ser extensiones para WooCommerce, primero tendrás que asegurarte de que WooCommerce esté instalado y activo, de manera que cualquier hook, acción o filtro de la extensión que vayas a usar se coloque en la declaración if (class_exists()) que creamos antes. Y por supuesto, deberías asegurarte de que tus extensiones también estén instaladas y activas comprobando la clase, la función o el nombre de la constante del plugin. Mira este ejemplo del código de mi tema:






1


if (class_exists('Woocommerce')){if (class_exists('YITH_WCQV')) {remove_action( 'yith_wcqv_product_image', 'woocommerce_show_product_sale_flash', 10 );







2








3


remove_action( 'yith_wcqv_product_image', 'woocommerce_show_product_images', 20 );







4








5


add_action('yith_wcqv_product_image','infinitum_ninzio_woocommerce_show_product_images', 20 );







6








7


function infinitum_ninzio_woocommerce_show_product_images(){?>...<?php }}}







8








Para descubrir qué clase, función o constante comprobar, examina el archivo file.php principal de la extensión.


Conclusión


WooCommerce es un plugin para eCommerce increíble y, para ser totalmente franco, cualquier nuevo tema premium debería ser compatible con él. Sigue siempre las pautas de integración recomendadas por WooCommerce. Si lo haces así, te garantizo que tu tema superará el proceso de revisión y no romperá ni la estructura ni la lógica de WooCommerce. 


Después de cualquier trabajo de desarrollo de este tipo, siempre deberías comprobar tanto WordPress como WooCommerce. Habilita WP_DEBUG, y comprueba tu tema usando Theme Unitest para WordPress y el test de contenido de muestra para WooCommerce.  


Recursos Útiles







  

      
        
          eCommerce
        
      
        
          WooCommerce
        
      
        
          WordPress
        
      
        
          WordPress Themes
        
  





  

    

      Karen Pogosyan
      By
      
        
      
    

    

        
    

  




    

Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato.
 Over 9 Million Digital Assets
 Everything you need for your next creative project.
 Create Beautiful Logos, Designs 
 & Mockups in Seconds
 Design like a professional without Photoshop.
 Join the Community
 Share ideas. Host meetups. Lead discussions. Collaborate.