Cabecera con Título de Producto + Foto  

Respondido por: @argenis

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

Hecho y funcionando correctamente pero por rematar el trabajo, habría posibilidad que el Titulo de la categoría y demás (lo que redondeo en la imagen) vaya debajo y el banner que hemos puesto suba del todo?

Hola Alvaro, 

En este caso para añadir esto necesitaras realizar algunas modificaciones al código que tienes en el plugin de code snippet que te compartieron mis compañeros, para ello puedes desactivar el código que ya tienes añadido y utilizar el siguiente:

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" style="position: relative; text-align: center;">';
echo '<img src="' . esc_url($banner_image) . '" alt="Banner" style="width: 100%; height: auto;">';

// Mostrar el breadcrumb aquí
if (function_exists('woocommerce_breadcrumb')) {
echo '<div class="woocommerce-breadcrumb" style="position: absolute; top: 20%; left: 50%; transform: translateX(-50%); z-index: 10;">';
woocommerce_breadcrumb();
echo '</div>';
}
echo '</div>';
}
}

// Ocultar el breadcrumb por defecto de WooCommerce
remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20);

Luego de añadir este código accede a Divi -> Opciones del tema -> General -> CSS Personalizado y pega el siguiente código CSS 

/*Cambiar color de los textos de la miga de pan*/
.woocommerce-breadcrumb {
color: #ffffff !important;
}
/*Cambiar color de los enlaces de la miga de pan*/
.woocommerce-breadcrumb a {
color: #ffffff !important;
}
.single-product body:not(.et-tb) #main-content .container, body:not(.et-tb-has-header) #main-content .container {
padding-top: 0px;
}

Guarda los cambios y revisa como va todo y se te permite añadir lo que necesitas.

Un Saludo

Por alguna modificación o actualización (lo desconozco) los banner que puse de la manera que me indicasteis en cada producto de la siguiente manera:

Se han alineado al centro y no van al ancho completo de la web como antes:

¿Cómo lo podría solucionar?

Hola Álvaro.

Añade lo siguiente en apariencia -> Personalizar -> CSS Adicional:

.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 */
}
body:not(.et-tb) #main-content .container, body:not(.et-tb-has-header) #main-content .container {
padding-top: 20px;
}
/*Cambiar color de los textos de la miga de pan*/
.woocommerce-breadcrumb {
color: #ffffff !important;
}
/*Cambiar color de los enlaces de la miga de pan*/
.woocommerce-breadcrumb a {
color: #ffffff !important;
}
.single-product body:not(.et-tb) #main-content .container, body:not(.et-tb-has-header) #main-content .container {
padding-top: 0px;
}
.woocommerce .woocommerce-breadcrumb {
display: none;
}

Un saludo

Respondido por: @pepesoler

Hola Álvaro.

Añade lo siguiente en apariencia -> Personalizar -> CSS Adicional:

.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 */
}
body:not(.et-tb) #main-content .container, body:not(.et-tb-has-header) #main-content .container {
padding-top: 20px;
}
/*Cambiar color de los textos de la miga de pan*/
.woocommerce-breadcrumb {
color: #ffffff !important;
}
/*Cambiar color de los enlaces de la miga de pan*/
.woocommerce-breadcrumb a {
color: #ffffff !important;
}
.single-product body:not(.et-tb) #main-content .container, body:not(.et-tb-has-header) #main-content .container {
padding-top: 0px;
}
.woocommerce .woocommerce-breadcrumb {
display: none;
}

 

Un saludo

Correcto, se ha corregido pero me he dado cuenta que a raíz de hace este cambio, ahora cuando pasas el cursor por encima de cualquier imagen de la web, sale el nombre que tiene asignada la misma. ¿Cómo podría hacer para desactivar eso?

Hola Alvaro,

Es curioso por qué el código que nos compartes no hace referencia a mostrar u ocultar este texto que indicas, si borras momentáneamente este código dejas de ver los títulos? ten en cuenta que esto forma parte de otra consulta.

verífica de igual forma agregar este código con el plugin code snippets:

<script>
jQuery(document).ready(function($) {
$("img").mouseenter(function() {
let $pac_da_title = $(this).attr("title");
$(this).attr("pac_da_title", $pac_da_title);
$(this).attr("title", "");
}).mouseleave(function() {
let $pac_da_title = $(this).attr("pac_da_title");
$(this).attr("title", $pac_da_title);
$(this).removeAttr("pac_da_title");
});
});
</script>

Te comparto el plugin:

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

Si no te funciona crea un nuevo tema para que podamos ver eso y cerrar este, de esta forma nos ayudas a mantener el foro organizado.

Un saludo 🖐️