Avisos
Vaciar todo

Cabecera con Título de Producto + Foto  

Página 1 / 2
 
Álvaro
 Álvaro
Usuario activo

He visto en otras webs que a cada producto le añaden una cabecera donde aparece la imagen del producto/servicio (en este caso) y el nombre del mismo. ¿Como se podría añadir? ¿Se podría de forma automática a cada servicio a la venta o tiene que ser manualmente? En ambos casos, ¿me podrían guiar un poco de como sería?

Os dejo un EJEMPLO de un producto/servicio a la venta que he visto en una web y tiene puesta la cabecera que comento.

Gracias de antemano y saludos a toda la comunidad

Contenido solo visible a usuarios registrados

Citar
Respondido : 01/10/2024 8:19 am
Álvaro
 Álvaro
Usuario activo

Buenos días (que no había puesto nada) 😜 

ResponderCitar
Respondido : 01/10/2024 8:20 am

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Álvaro, Buenos Días 

No veo que tengas WooCommerce ni productos en la Web

¿ puedes decirnos una URL donde podamos ver un producto o una URL donde quieras que aparezca el Banner ?

Si vas a utilizar WooCommerce para la venta de producto podrías utilizar el siguiente plugin:

-> https://es.wordpress.org/plugins/banner-management-for-woocommerce/

 

Un Saludo

ResponderCitar
Respondido : 01/10/2024 11:35 am
Álvaro
 Álvaro
Usuario activo
Respondido por: @pepesoler

Hola Álvaro, Buenos Días 

No veo que tengas WooCommerce ni productos en la Web

¿ puedes decirnos una URL donde podamos ver un producto o una URL donde quieras que aparezca el Banner ?

Si vas a utilizar WooCommerce para la venta de producto podrías utilizar el siguiente plugin:

-> https://es.wordpress.org/plugins/banner-management-for-woocommerce/

 

Un Saludo

Efectivamente, en mi web no tengo aún nada, de hecho la tengo en mantenimiento. Por eso he puesto el enlace a una web para que veáis el ejemplo de lo que quiero hacer con la mía. No se si me he explicado muy bien 🤕 

ResponderCitar
Respondido : 01/10/2024 11:50 am

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Álvaro

Con el plugin que te indique puedes añadir un Banner en los productos pero bueno lo mejor es probarlo cuando lo tengas todo montado, no te adelantes y una cosa después de otra 😉 

 

Un Saludo

ResponderCitar
Respondido : 01/10/2024 12:41 pm
Álvaro
 Álvaro
Usuario activo
Respondido por: @pepesoler

Hola Álvaro

Con el plugin que te indique puedes añadir un Banner en los productos pero bueno lo mejor es probarlo cuando lo tengas todo montado, no te adelantes y una cosa después de otra 😉 

 

Un Saludo

Me pondré a ello entonces probando el plugin. ¿Tiene la opción de que añada la fotografía destacada del producto como banner tambien? 

¡Gracias por todo!

ResponderCitar
Respondido : 01/10/2024 12:45 pm

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Álvaro.

¿Tiene la opción de que añada la fotografía destacada del producto como banner tambien? 

Pues si no recuerdo mal creo que no pero de todas formas las dimensiones de las imágenes no son las mismas y no quedaría bien.

 

Un Saludo

ResponderCitar
Respondido : 01/10/2024 2:08 pm
Álvaro
 Álvaro
Usuario activo
Respondido por: @pepesoler

Hola Álvaro.

¿Tiene la opción de que añada la fotografía destacada del producto como banner tambien? 

Pues si no recuerdo mal creo que no pero de todas formas las dimensiones de las imágenes no son las mismas y no quedaría bien.

 

Un Saludo

Ya lo tengo instalado y me añade la imagen que yo quiera pero se ajusta a la columna central del producto. No hay manera que ocupe el banner el ancho completo de la pantalla?

ResponderCitar
Respondido : 04/10/2024 10:25 am

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Álvaro.

Ok para eso vamos a plantearlo de otra manera.

.- Accede a plugins y elimina el plugin de Banners

.- Edita el producto

.- Despliega Opciones de pantalla y selecciona Campos personalizados 

screenshot mary52 webempresa eu 2024 10 04 13 37 10

Veras que tienes otra opción en el producto que son Campos personalizados:

.- Pulsa en Introducir nueva

screenshot mary52 webempresa eu 2024 10 04 13 37 10

.- Añade un nuevo campo con el nombre banner_image y como valor, pega la URL de la imagen que quieras usar para ese producto.

screenshot mary52 webempresa eu 2024 10 04 13 46 07

Guarda los cambios del producto.

.- Instala el siguiente plugin:

-> https://wordpress.org/plugins/code-snippets/

El plugin sirve para añadir código personalizado sin tener que editar archivo.

Una vez activado.

.- Accede a Fragmentos de código -> nuevo

.- Añade un título para tener identificado y añade el siguiente código:

add_action('woocommerce_before_single_product', 'add_custom_banner_to_product_page');

function add_custom_banner_to_product_page() {
global $post;
$banner_image = get_post_meta($post->ID, 'banner_image', true);

if ($banner_image) {
echo '<div class="custom-banner">';
echo '<img src="' . esc_url($banner_image) . '" alt="Banner">';
echo '</div>';
}
}
screenshot mary52 webempresa eu 2024 10 04 13 59 31

.- Accede Apariencia -> Personalizar -> CSS Adicional y añade lo siguiente:

.single-product .custom-banner {
position: relative;
width: 100vw; /* Ocupa todo el ancho de la ventana */
left: 50%; /* Ajuste para centrar en relación a la pantalla */
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background-color: #fff; /* Fondo blanco */
padding: 0; /* Elimina los márgenes para que la imagen ocupe todo */
text-align: center;
}

.single-product .custom-banner img {
width: 100%; /* Asegura que la imagen del banner ocupe todo el ancho */
height: auto; /* Mantiene la proporción de la imagen */
}

 

Guarda los cambios y lo revisas.

 

Un Saludo 

ResponderCitar
Respondido : 04/10/2024 1:00 pm
Álvaro
 Álvaro
Usuario activo
Respondido por: @pepesoler

Hola Álvaro.

Ok para eso vamos a plantearlo de otra manera.

.- Accede a plugins y elimina el plugin de Banners

.- Edita el producto

.- Despliega Opciones de pantalla y selecciona Campos personalizados 

screenshot mary52 webempresa eu 2024 10 04 13 37 10

Veras que tienes otra opción en el producto que son Campos personalizados:

.- Pulsa en Introducir nueva

screenshot mary52 webempresa eu 2024 10 04 13 37 10

.- Añade un nuevo campo con el nombre banner_image y como valor, pega la URL de la imagen que quieras usar para ese producto.

screenshot mary52 webempresa eu 2024 10 04 13 46 07

Guarda los cambios del producto.

.- Instala el siguiente plugin:

-> https://wordpress.org/plugins/code-snippets/

El plugin sirve para añadir código personalizado sin tener que editar archivo.

Una vez activado.

.- Accede a Fragmentos de código -> nuevo

.- Añade un título para tener identificado y añade el siguiente código:

add_action('woocommerce_before_single_product', 'add_custom_banner_to_product_page');

function add_custom_banner_to_product_page() {
global $post;
$banner_image = get_post_meta($post->ID, 'banner_image', true);

if ($banner_image) {
echo '<div class="custom-banner">';
echo '<img src="' . esc_url($banner_image) . '" alt="Banner">';
echo '</div>';
}
}
screenshot mary52 webempresa eu 2024 10 04 13 59 31

.- Accede Apariencia -> Personalizar -> CSS Adicional y añade lo siguiente:

.single-product .custom-banner {
position: relative;
width: 100vw; /* Ocupa todo el ancho de la ventana */
left: 50%; /* Ajuste para centrar en relación a la pantalla */
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background-color: #fff; /* Fondo blanco */
padding: 0; /* Elimina los márgenes para que la imagen ocupe todo */
text-align: center;
}

.single-product .custom-banner img {
width: 100%; /* Asegura que la imagen del banner ocupe todo el ancho */
height: auto; /* Mantiene la proporción de la imagen */
}

 

Guarda los cambios y lo revisas.

 

Un Saludo 

Antes de nada agradecerte enormemente el trabajo realizado para ayudarme.

Has conseguido al dedillo exactamente lo que buscaba. Ya tan solo por "rematar la faena"... Es posible que en esa imagen aparezca centrado tanto de alto y ancho el titulo del producto automáticamente? O si no fuese automáticamente, ponerlo yo manualmente de alguna manera.

De nuevo, muchas gracias.

 

 

ResponderCitar
Respondido : 07/10/2024 5:51 pm

Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Alvaro,

Verifica eliminar el código que te compartió Pepe que ingresaste en el plugin code snippets y sustitúyelo con esto:

add_action('woocommerce_before_single_product', 'add_custom_banner_to_product_page');

function add_custom_banner_to_product_page() {
global $post;
// Obtener la URL de la imagen del banner
$banner_image = get_post_meta($post->ID, 'banner_image', true);
// Obtener el título del producto
$product_title = get_the_title($post->ID);

if ($banner_image) {
echo '<div class="custom-banner" style="position: relative; text-align: center;">';
// Mostrar el banner
echo '<img src="' . esc_url($banner_image) . '" alt="Banner" style="width: 100%;">';
// Agregar el nombre del producto centrado sobre el banner
echo '<div class="banner-product-title" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; font-weight: bold; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);">';
echo esc_html($product_title);
echo '</div>';
echo '</div>';
}
}

Verifica y nos comentas.

Un saludo 

ResponderCitar
Respondido : 07/10/2024 6:40 pm
Álvaro
 Álvaro
Usuario activo
Respondido por: @argenis

Hola Alvaro,

Verifica eliminar el código que te compartió Pepe que ingresaste en el plugin code snippets y sustitúyelo con esto:

add_action('woocommerce_before_single_product', 'add_custom_banner_to_product_page');

function add_custom_banner_to_product_page() {
global $post;
// Obtener la URL de la imagen del banner
$banner_image = get_post_meta($post->ID, 'banner_image', true);
// Obtener el título del producto
$product_title = get_the_title($post->ID);

if ($banner_image) {
echo '<div class="custom-banner" style="position: relative; text-align: center;">';
// Mostrar el banner
echo '<img src="' . esc_url($banner_image) . '" alt="Banner" style="width: 100%;">';
// Agregar el nombre del producto centrado sobre el banner
echo '<div class="banner-product-title" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; font-weight: bold; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);">';
echo esc_html($product_title);
echo '</div>';
echo '</div>';
}
}

Verifica y nos comentas.

Un saludo 

Voy a probarlo y te digo pero me pasa algo que no me gusta. Se me queda una línea blanca entre la imagen del banner y el menú. ¿Cómo podría quitar esa separación y que suba la imagen hasta el menú?

image
ResponderCitar
Respondido : 07/10/2024 8:59 pm

Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Alvaro,

Veo que está barra es del código que te compartió Pepe? Ten en cuenta que si no abres tu sitio no podemos ver lo que nos indicas, no podemos ni saber si estás aplicando o no los cambios que te estamos compartiendo es por esto que siempre que hagas una consulta tienes que tener el sitio abierto.

Luego puedes activar el modo mantenimiento si quieres pero para poder verlo y ayudarte necesitamos que no esté activo.

Un saludo 🖐️  

Esta publicación ha sido modificada el hace 2 meses por Argenis
ResponderCitar
Respondido : 07/10/2024 9:11 pm
Álvaro
 Álvaro
Usuario activo
Respondido por: @argenis

Hola Alvaro,

Veo que está barra es del código que te compartió Pepe? Ten en cuenta que si no abres tu sitio no podemos ver lo que nos indicas, no podemos ni saber si estás aplicando o no los cambios que te estamos compartiendo es por esto que siempre que hagas una consulta tienes que tener el sitio abierto.

Luego puedes activar el modo mantenimiento si quieres pero para poder verlo y ayudarte necesitamos que no esté activo.

Un saludo 🖐️  

Correcto y pido disculpas. Ya esta quitado el modo mantenimiento y como ejemplo he creado un producto/servicio donde he realizado los pasos que me ha indicado Pepe y que se ha quedado todo bien menos la separación que comento anteriormente.

Dejo este ENLACE que lleva directo al producto donde sucede lo comentado.

Gracias nuevamente.

ResponderCitar
Respondido : 07/10/2024 10:40 pm

Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Alvaro,

Estás aplicando un margin top a la sección, verifica ingresar a Apariencias > personalizar > css adicional, al final del todo este código:

body:not(.et-tb) #main-content .container, body:not(.et-tb-has-header) #main-content .container {
padding-top: 20px;
}

Luego recuerda lo que te comente de eliminar el de Pepe y agregar este que te comparti que ya tiene el nombre como lo solicitaste.

Un saludo 🖐️ 

ResponderCitar
Respondido : 07/10/2024 11:24 pm
Página 1 / 2