categoria-producto-header-generatepress

Colocar la imagen de la categoría de producto al header de GeneratePress

Colocar una imagen destacada de una entrada o de una página en el header de GeneratePress es muy fácil. Basta que usamos el módulo de Elementos y con un par de clics lo tenemos. Esto lo hacemos creando un header nuevo a Elementos.

En otras videotutoriales también te explicaba como colocar mapas en el propio header utilizando el módulo header de Elementos .

Pero que pasa cuando queremos usar una imagen de una categoría? O como lo tenemos que hacer si queremos utilizar la categoría de un producto de Woocommerce? Por defecto las imágenes de las categorías de Woocoomerce son miniaturas y el módulo header de Elementos no las reconoce.

En estos casos debemos usar el módulo de hooks de Elementos y utilizar un poco de código php y CSS. A continuación te cuento.

Primero creamos un nuevo hook a Elementos

Introducimos el siguiente código:

<?php
if ( is_product_category() ){
    global $wp_query;

    // get the query object
    $cat = $wp_query->get_queried_object();

    // get the thumbnail id using the queried category term_id
    $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true ); 

    // get the image URL
    $image = wp_get_attachment_url( $thumbnail_id ); 
	
	// if image is present display hero
	if ( $image ) {
        ?>
        <div class="product_cat_hero" style="background-image: url('<?php echo $image ?>')">
            <div class="inside_product_cat_hero grid-container">
                <h1><?php single_term_title() ?></h1>
                <p><?php echo category_description(); ?></p>
            </div>
        </div>
    <?php
    }
}
?>

Este código mostrará la imagen de la categoría de producto, el nombre y su descripción . Si no queremos que muestre título o descripción simplemente eliminamos la línea que toque. Por ejemplo, si queremos que no aparezca la descripción eliminaremos la siguiente línea:

<p><?php echo category_description(); ?></p>

A continuación tendremos que pulsar el botón de ejecutar php y seguidamente decidir donde queremos ubicar este cambio y donde queremos que se muestre:

  • En mi caso lo ubicaré al after_header
  • Y querré que aparezca en product category archive

Y finalmente tendremos que aplicar un poco de CSS

En mi caso he usado el siguiente CSS, aplicando un filtro de color en la imagen para hacer más legible el header y la descripción. Pero vosotros lo podéis modificar a vuestro gusto.

.product_cat_hero {
    padding-top: 100px;
    padding-bottom: 100px;
    background-size: cover;
		background-position: 100%;
		position: relative;	
    color: #000;
}

.product_cat_hero:before {
	content:'';
	position: absolute;
  top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.6);	
}

.inside_product_cat_hero h1{
	position: relative;
	color: #fff;
	text-align: center;
	font-weight: 700;
}

.inside_product_cat_hero p{
	position: relative;
	color: #fff;
	text-align: center;
}

Y ya está, ya tenemos colocada nuestra miniatura de categoría de producto al header de GeneratePress. Si deseas consultar la fuente originaria donde se explica todo esto deberías consultarlo al artículo Utilice la miniatura de la categoría de producto de WooCommerce como imagen de fondo en el elemento de cabecera . Yo simplemente he modificado un poco el CSS.

Últimos retoques

Finalmente, y para no repetir el título de la categoría y la descripción en el header y en el cuerpo hay que ir al personalizador y hacer los siguientes cambios:

  • A formato / Woocommerce desmarcaremos el título de las categorías.
  • También eliminaremos la descripción de las categorías.  En este caso será necesario escribir el CSS la línea siguiente:
.term-description{
	display: none;
}

Video tutorial de cómo utilizar la miniatura de la categoría de producto como imagen de fondo en el header de GeneratePress

Un método aún más fácil de usar la imagen de la categoría de producto para colocarla en el header con Elements

Juanma Fortes aporta una solución aún más fácil. En primer lugar insertamos un poco de código en el functions de nuestro child theme de GeneratePress o utilizamos el plugin Code Snippets y añadimos un nuevo snippet. Aquí el código:

add_filter( 'generate_page_hero_background_image_url', function( $url ) {
   
    if ( ! function_exists( 'get_woocommerce_term_meta' ) ) {
        return $url;
    }
    global $wp_query;
    $cat = $wp_query->get_queried_object();
    $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
    $background_image = wp_get_attachment_url( $thumbnail_id );
    if ( $background_image ) {
        $url = $background_image;
    }
    return $url;
});

El código hace que la miniatura de categoría de producto pueda ser utilizada como imagen destacada de la propia catagoria de producto. En definitiva, que puedes crear un nuevo Elements de Header y, automáticamente, GeneratePress la detectará.

De esta forma es posible personaliza textos, colores de fondo, tamaños y otras cosas de forma mucho más fácil a través del bloque header de Elements.

Deja un comentario

Identifícate