[Resolved] Mostrar etiqueta "Agotado"

[Pedro]

Hola! Me gustaría que para los productos que están agotados, mostrar la etiqueta “out of stock”

Así las personas pueden saber que el producto no está disponible antes de que ingresen a la página del producto.

Algo como lo hace el tema Flatsome: https://mega.nz/file/TscVBS4b#thB_9Fr5KgHbngQXkLwBvSg0Kag0pPmvRpdPchAC_Cg

[Leo]

Hi there,

That’s controlled by WooCommerce itself.

Does this help?
https://kb.oboxthemes.com/articles/out-of-stock-products-visible-on-shop/

[Pedro]

Hola Leo! Gracias por responder.

Si, pero lo que deseo es colocar una etiqueta que muestre que el producto está agotado. No deseo ocultar el producto de la tienda.

Eso por defecto lo hace el tema de Flatsome, como muestra en la imagen que coloqué anteriormente. ¿No hay forma que también se pueda hacer en el mejor tema de todos? (GeneratePress)

[Leo]

Can you link me to a page that shows what the current out of stock looks like?

I’ll try to provide some CSS if it’s simple enough.

If not then you might need to find a custom solution.

[Pedro]

Hola Leo! En el siguiente enlace puedes ver un producto que marca como “Out of stock”

https://flatsome3.uxthemes.com/product-category/women/

[Leo]

I need to see how the Out of Stock is displayed using GP currently.

Can you link me to an example?

[Pedro]

Hola Leo! Claro que sí.

Ingresa a este enlace: https://www.rebajaslocas.com/cuidado-personal/

El producto #4 (Corrector de Postura Ajustable) está agotado en nuestra tienda.

Sin embargo con GeneratePress, como te puedes dar cuenta muestra el producto normal.

[David]

Hi there,

try this CSS:

.woocommerce ul.products li.product.outofstock .inside-wc-product-image {
    position: relative;
}

.woocommerce ul.products li.product.outofstock .inside-wc-product-image:before {
    content: 'Out of Stock';
    position: absolute;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    color: #000;
    z-index: 1;
}

[Pedro]

Wow David! Eres un mago jaja

Funcionó perfectamente. Una última cosa, es posible que el texto “Out of stock” no sea un enlace? Que sea un texto normal y no cambie de color.

¡Gracias!

[David]

I edited the CSS above to include: color: #000;
Change the #hexcolor to what you want – it will remain that color all the time

[Pedro]

Hola David! La actualización corrigió el problema.

¡Muchas gracias!

[David]

You’re welcome

[Pedro]

Hola! Recién me acabo de dar cuenta que esta etiqueta de “Agotado” en los productos aparece por encima del “sticky add to cart”.

Así como en la siguiente imagen: https://mega.nz/file/vslzAJgb#fvhMd4tWCFb6BqVnnh_a5tQ8BQNnEDdjO4hyZA_1A38

Además, descubrí que los videos de YouTube también aparecen por encima del “sticky add to cart”

Como en la siguiente imagen: https://mega.nz/file/610xHBIL#EymuUmQN1lVsFZkX9hzV7a8h2TLlLX0tQeaPaWk1PQs

¿Podrían ayudarme a arreglar esto?

[Leo]

Can you guide me to a page where I can see the issue?

Does it only happen on mobile?

Let me know 🙂

[Pedro]

Hola Leo,

En este enlace puedes revisar el problema: https://www.rebajaslocas.com/cuidado-personal/el-mejor-corrector-de-juanetes/

Hasta el momento los problemas solo suceden en la versión móvil.

[Author]

Posts