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:
- Primeros Pasos
- El Empleo de Hooks y Acciones
- 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:
- Usando los hooks (para desarrolladores intermedios)
- 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 2 3 4 |
add_action( 'after_setup_theme', 'woocommerce_support' ); function woocommerce_support() { add_theme_support( 'woocommerce' ); } |
Esto ocultará el mensaje «Tu tema no declara la compatibilidad con WooCommerce».
Para deshabilitar los estilos predeterminados de WooCommerce, añadimos lo siguiente:
|
1 2 3 |
if (class_exists('Woocommerce')){ add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ); } |
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/TUTEMA/woocommerce.php.
Abre tu archivo recién creado 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 un tema y otro. Una vez hayas encontrado el loop, elimínalo. En su lugar coloca los siguiente:
|
1 |
<?php woocommerce_content(); ?> |
Crear nuestro propio loop para la página de la tienda de WooCommerce
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 2 3 4 5 |
<?php if (is_product()): ?> // your navigation function goes here. <?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:
-
Guía de inicio a las acciones y los filtros en WordPress
-
Acciones y filtros de WordPress: ¿Cuál es la diferencia?
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.
Lo que te queda por leer:
-
Modificar la prioridad de ejecución
-
5. Extensiones para WooCommerce
-
Conclusión
Deja una respuesta