Cabecera con Título de Producto + Foto  

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

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

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 🤕 

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

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!

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

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?

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 

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

.- Pulsa en Introducir nueva

.- 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.

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>';
}
}

.- 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 

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 

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

.- Pulsa en Introducir nueva

.- 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.

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>';
}
}

.- 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.

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 

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ú?

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 🖐️  

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.

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 🖐️