[Resuelto] Modificación de pagina de producto con etiqueta de agotado.  

Hola Victor, 

Disculpa si no comprendo bien la consulta, actualmente veo que el agotado se muestra sobre el producto, es en esta sección o te refieres a la imagen principal

Si es posible envíanos algunos ejemplos de lo que deseas ver para revisar con mayor detalle.

De manera general puedes revisar si algún plugin te permite añadir lo que necesitas como+:

-> https://wordpress.org/plugins/wc-out-of-stock-message/

-> https://wordpress.org/plugins/easy-sale-badges-for-woocommerce/  

-> https://wordpress.org/plugins/sold-out-badge-for-woocommerce/

Un Saludo

@karen. Buenas Karen no me gustaría dar uso a plugin si es posible para esto. Quiero que la etiqueta de producto agotado también salga en la imagen principal, dentro de la pagina de producto.

Y otra cosa que no se a que es debido es que los productos que tengo marcados como agotados la visualización del modulo de añadir carrito desaparece. Hay posibilidad de que ese modulo no desaparezca.

Muchas gracias.

Hola Victor, 

En este caso prueba añadir el siguiente código en el function.php de tu tema o con un plugin como code snippets

add_action('woocommerce_before_single_product_summary', 'mostrar_sold_out', 10);
function mostrar_sold_out() {
global $product;

if ( !$product->is_in_stock() ) {
echo '<div class="sold-out-overlay">Sold Out</div>';
}
}

Luego de ello añade el siguiente código CSS en el apartado de Divi -> Opciones del tema -> General -> CSS personalizado

/* Estilo ajustado para la etiqueta "Sold Out" */
.sold-out-overlay {
position: absolute;
top: 250px;
z-index: 99;
left: 136px;
background: #1b4001;
padding: 5px;
color: #ffffff;
}

@media only screen and (max-width: 600px) {

.sold-out-overlay {
top: 260px;
left: 40px;
}
}

Guarda los cambios y verifica como se muestra todo. 

Sobre la opción del botón, abre un tema para ello. De esta forma nos ayudas a mantener un control sobre el hilo y podemos ayudarte con mayor detalle.

Un Saludo

@karen. Muchas gracias karen eso es lo que quería, ahora que parámetro tendría que tocar en las css, para que se coloque en la esquina izquierda pero de la imagen no de la sección o fila. Si modifico el left se modifica pero respecto a la sección o a la fila no respecto al tamaño de la imagen, porque otra cosas que ocurre es que cuando va pasando al modo móvil se va colocando en el centro y me gustaría mantenerlo en el margen izquierdo, como si fuera una posición relativa dependiendo del tamaño de la imagen.

Perfecto para lo otro creo un nuevo hilo.

Hola Victor, 

Prueba si con el siguiente CSS se ubica donde deseas, ten en cuenta que tú mismos puedes ir modificando estos valores hasta que es muestren en la posición que necesitas.

*/Opciones móviles*/

@media only screen and (max-width: 600px) {
.sold-out-overlay {
top: 209px;
left: 50px;
}
}

*/ opciones escritorio*/

.sold-out-overlay {
position: absolute;
top: 210px;
z-index: 99;
left: 350px;
background: #1b4001;
padding: 5px;
color: #ffffff;
}

Un Saludo

@karen. Muchas gracias Karen por la aportación. La otra duda ya la resolvi.

Hola Victor,

Gracias a ti, es un placer para nosotros siempre poder ayudarte.

No dudes en escribirnos si tienes cualquier otra consulta.

Un saludo 😊