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.
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 🤕
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 😉
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?
¿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?
.- 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 */ }
.- 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.
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>'; } }
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ú?
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 12 meses por Argenis
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.
