Crear un tema para Woocommerce

Home » Blog » Crear un tema para Woocommerce

Crear un tema para Woocommerce es muy parecido a crear un tema para WordPress, los conceptos son los mismos lo que único que cambia es que tenemos definidas nuevos ficheros para categorías de productos, productos, etc.

Plantilla base

Igual que sucede con WordPress tenemos un core que es la base de la tienda, pero en este caso se encuentra en la carpeta plugins/woocommerce/includes si tenemos dudas de alguna función de Woocommerce podemos echar un vistazo en estos ficheros.

Y la otra carpeta que sirve de guía para crear nuestro tema es /templates/. En esta carpeta tenemos todos los ficheros que puede tener nuestra tienda online. De hecho podemos copiar esta carpeta dentro de nuestro tema de WordPress pero en vez de llamarse template debe llamarse Woocommerce.

En este caso tendríamos la tienda muy básica, así que otra buena idea es descargarse el tema storefront este tema es gratuito y está desarrollado por los creados de Woocommerce así que la calidad está garantizada.

En cuanto a las actualizaciones de Woocommerce, estas se realizan en el plugin, y lo que debemos hacer es actualizar la carpeta Woocommece de nuestro tema, pero con cuidado de no perder los cambios estéticos realizados. En este sentido el plugin nos facilita un poco este trabajo ya que desde woocommerce -> estado -> plantillas podemos ver que ficheros debemos actualizar, los cambios son en nombres u funcionamiento de funciones, que se han cambiado.

Hooks de la tienda online

Los hooks son trozos de código fuente que se pueden llamar para modificar el funcionamiento de ciertas funcionalidades de WordPress, puedes ver más información aquí.

En Woocommerce podemos encontrar información de los hooks en 2 sitios:

  • En las propias páginas de la plantilla maestra dentro del plugin. Por ejemplo, en content-single-product.php podemos ver:
/**
 * woocommerce_single_product_summary hook.
 * @hooked woocommerce_template_single_title - 5
 * @hooked woocommerce_template_single_rating - 10
 * @hooked woocommerce_template_single_price - 10
 * @hooked woocommerce_template_single_excerpt - 20
 * @hooked woocommerce_template_single_add_to_cart - 30
 * @hooked woocommerce_template_single_meta - 40
 * @hooked woocommerce_template_single_sharing - 50
 * @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );ingle_meta - 40 * @hooked woocommerce_template_single_sharing - 50 * @hooked WC_Structured_Data::generate_product_data() - 60 */ do_action( 'woocommerce_single_product_summary' );

Por ejemplo, en la vista de un producto podemos cambiar el orden de la información, el número que vemos junto al hook es el orden de visualización, por tanto si queremos poner el precio encima de la puntuación, podemos hace algo cómo:

remove_action('woocommerce_single_product_summary','woocommerce_template_single_price',10);
add_action('woocommerce_single_product_summary','woocommerce_template_single_price',55);

En primer lugar nos referimos al bloque woocommerce_single_product_summary y le decimos que borre la función que muestra el precio, y en la segundo le decimos que lo posición  55 que es la última de los objetos del bloque.

Otra forma de usar los hooks es la siguiente:

add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image() {   
if ( is_product_category() ){    
global $wp_query;    
$cat = $wp_query->get_queried_object();    
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );    
$image = wp_get_attachment_url( $thumbnail_id );    
if ( $image ) {    echo '<img src="' . $image . '" alt="' . $cat->name . '" />'; }
}
}

En este caso estamos mostrando las imágenes de las categorías de productos.

 

Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

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

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas

Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.

erlantz rique
erlantz rique
19/02/2024

Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.

Jose Marlasca
Jose Marlasca
06/02/2024

Dió en la clave y nos dió los instrumentos que necesitábamos en esos momentos, y sobre todo entendió a la perfección lo que buscábamos. Lo mejor de web que hemos tenido en 24 años. Eskerrik asko Mezo!!

Troka Abentura
Troka Abentura
07/01/2024

Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.

Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024

Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%

Asier Hermoso
Asier Hermoso
03/01/2024

Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita 😉
Un crack!!

itxaso zubia
itxaso zubia
15/12/2023

El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.

Fernando Cózar
Fernando Cózar
02/11/2023