Pregunta sobre Ultimate Product Catalog - WordPress Catalog Plugin de Wordpress:

Problemas con CSS adicional en relaci贸n con el cat谩logo de productos UPCP

Un usuario pregunt贸 馃憞

隆Hola a todos! Compr茅 el plugin UPCP y me gust贸 mucho. Tengo algunos problemas con CSS (驴supongo?) Y estos son los signos de mi problema:

1. El cat谩logo de productos mantiene la alineaci贸n a la izquierda, dispositivos m贸viles y computadoras.

2. Cuando hago clic en 鈥淭ienda online鈥 en el men煤 principal de mi sitio web, voy a la Tienda online pero no muestra la barra lateral con filtros y busco hasta que selecciono una categor铆a de producto. Es muy doloroso; 驴Qu茅 pasa si alguien quiere buscar productos sin elegir primero una categor铆a?

3. Como algunos otros han publicado anteriormente, 鈥% s contiene elementos grandes en el gr谩fico; 驴REVISA? firme 芦carrito vac铆o禄 en la esquina superior derecha si agrega algo a su carrito. Esta caja ensucia todo mi sitio en los tel茅fonos m贸viles, ya que es muy grande y bloquea todo lo dem谩s. Quiero eliminarlo y mostrar el carrito a los usuarios que tienen widgets habituales.

(@etoilewebdesign)

Hace 1 a帽o, 2 meses

Hola mobilmeckaren,

Tu # 1: 驴Te refieres a los cuadros de categor铆a / subcategor铆a o al cat谩logo en s铆? Probamos de nuestro lado y las p谩ginas del cat谩logo / productos individuales son el ancho completo de su contenedor.

Para el n. 掳 2: parece que tiene habilitada la descripci贸n general del cat谩logo. La barra lateral est谩 dise帽ada para mostrarse solo en el cat谩logo. Para deshabilitar esta configuraci贸n, vaya a 芦Opciones禄 -> 芦B谩sico禄, despl谩cese hacia abajo hasta 芦Descripci贸n general del cat谩logo禄 y config煤relo en 芦Ninguno禄. De esa forma, cuando un usuario haga clic en 鈥淭ienda online鈥, ver谩 inmediatamente el cat谩logo con la barra lateral.

Su # 3: 驴Sabe qu茅 producto est谩 causando este problema? Intentamos agregar 芦Beskrivning禄 al gr谩fico, pero el mensaje de la carta era visible en el costado, sin texto inusual y no pareci贸 molestar nada:

(@mobilmeckaren)

Hace 1 a帽o, 2 meses

隆Gracias por su respuesta! Perd贸n por no dar una explicaci贸n m谩s completa.

Para el # 1 tengo esta imagen para mostrar lo que estoy mencionando.
驴隆Por qu茅 se queda !?

Se solucion贸 el n煤mero 2 con su ayuda, el Cat谩logo de descripci贸n general para discapacitados funciona mucho mejor para m铆. Gracias.

# 3 Solo visible en unidades m贸viles, not茅.

Esperamos su respuesta. 隆Gracias!

(@mobilmeckaren)

Hace 1 a帽o, 2 meses

En cuanto al n. 掳 1, se ve a煤n peor cuando agregu茅 una descripci贸n general del Cat谩logo deshabilitado porque ahora los usuarios no ven las im谩genes de las categor铆as que se deslizan demasiado hacia la izquierda. (Editar: para la versi贸n m贸vil de la p谩gina, uso el plugin WPtouch para la versi贸n m贸vil, 驴tal vez sea alg煤n tipo de falla entre los dos plugins?

Esta respuesta fue modificada hace 1 a帽o, 2 meses.

(@etoilewebdesign)

Hace 1 a帽o, 2 meses

Hola mobilmeckaren

Vemos que cada una de sus miniaturas ten铆a un conjunto y puede cambiar esto asign谩ndoles valores porcentuales en el campo CSS personalizado.

Espero que esto ayude.

Todo lo mejor.

(@mobilmeckaren)

Hace 1 a帽o, 2 meses

驴Podr铆as guiarme sobre c贸mo hacer eso? 馃檪 No soy bueno con CSS.

(@etoilewebdesign)

Hace 1 a帽o, 2 meses

Hola mobilmeckaren,

Como prueba, 驴podr铆a reutilizar el m茅todo 芦Descripci贸n general del cat谩logo禄, luego ingrese el c贸digo a continuaci贸n en el cuadro 芦CSS personalizado禄 en la p谩gina Editar cat谩logo:

.upcp-overview-mode {
display: flex;
max-width: initial;
justify-content: center;}

Esta respuesta fue modificada hace 1 a帽o, 2 meses.

(@mobilmeckaren)

Hace 1 a帽o, 2 meses

S铆, las im谩genes terminaron una al lado de la otra en lugar de estar una encima de la otra. .. as铆 que los cambi茅 de nuevo.

(@mobilmeckaren)

Hace 1 a帽o, 2 meses

Decid铆 eliminar las im谩genes de la categor铆a. Pero sigo teniendo problemas. Todo lo que necesito saber ahora es c贸mo solucionar esto.
Problema
Debido al texto 芦a帽adir al carrito禄 / azul 芦l盲gg till i Kundvagnen禄 Cada art铆culo es diferente seg煤n la longitud de la descripci贸n del art铆culo.

Esto es a煤n m谩s complicado para las unidades m贸viles porque el bot贸n 芦l盲gg till i kundvagne / add to cart禄 est谩 fuera de la caja del art铆culo …

Entonces, 驴c贸mo lo hago para que cada art铆culo en la tienda web tenga el bot贸n Agregar al carrito localizado en la parte inferior de cada producto, sin un error cuando hago informes m谩s largos? Todo lo mejor para Sion

(@etoilewebdesign)

Hace 1 a帽o, 2 meses

Hola mobilmeckaren,

驴Puede agregar este c贸digo al cuadro ‘CSS personalizado’ en su cat谩logo:

.prod-cat-item.upcp-thumb-item.upcp-thumb-adjust-height {
    height: auto!important;
    flex-direction: column;
    display: flex;}

.upcp-thumb-details-link {
    margin-top: auto;}

(@mobilmeckaren)

Hace 1 a帽o, 2 meses

S铆, lo he hecho ahora. Hice esto para que el texto con un carrito apareciera en la parte inferior de todos los productos, en unidades m贸viles y en computadoras, y eso era lo que quer铆a. Sin embargo, en mi computadora, mi problema sigue siendo nombrar los productos con nombres cortos o, de lo contrario, algunas 芦cajas / productos禄 son m谩s grandes que otros, tal como me quej茅 inicialmente. Entonces esto casi pero no completamente arreglado.

(@etoilewebdesign)

Hace 1 a帽o, 2 meses

Hola @mobilmeckaren,

Si va a Opciones> B谩sico> Mostrar p谩gina de cat谩logo y habilita Ajuste autom谩tico de la altura de la miniatura, 驴resuelve el problema de la altura?

A partir de ah铆, es posible que necesite un CSS personalizado para alinear las cosas. Podemos hacer esto despu茅s de que habilite la opci贸n de ajuste autom谩tico.

Tambi茅n not茅 que algunos de sus productos fueron pedidos de una manera interesante. Mira aqu铆. Tambi茅n es posible que necesite CSS personalizado para esto. Lo veremos despu茅s de que habilite la opci贸n de ajuste autom谩tico.

Aparte de esa pregunta, 驴hab铆a algo m谩s?

(@mobilmeckaren)

Hace 1 a帽o, 2 meses

Tuve una altura de miniatura de ajuste autom谩tico todo el tiempo. Los productos ordenados as铆 despu茅s del 煤ltimo cambio que hice y que me pediste que hiciera.

S铆, otro problema: para las unidades m贸viles ahora el bot贸n 芦agregar al carrito禄 termina debajo del precio del producto, lo quiero a la derecha.

Otro problema es que cada producto tiene un 谩rea gris alrededor de las im谩genes, 驴tengo que hacer que cada imagen de producto sea transparente o hay alguna forma de cambiar ese color de fondo a blanco?

Y … me pregunto c贸mo cambiar estos iconos: Iconos
Quiero ponerlos en texto en lugar de esas Im谩genes, o poner mis propias im谩genes en 茅l. Por 煤ltimo, pero no menos importante: 驴hay alguna forma de que la descripci贸n 芦detallada禄 de los productos 芦a帽adir al carrito禄 no sea un error como este?
Problema
Gracias.

(@etoilewebdesign)

Hace 1 a帽o, 2 meses

Hola @mobilmeckaren,

El CSS personalizado que proporcionamos anteriormente parece contradecir el dise帽o. Podr铆as bain el siguiente CSS personalizado:

.prod-cat-item.upcp-thumb-item.upcp-thumb-adjust-height {
    height: auto!important;
    flex-direction: column;
    display: flex;}

.upcp-thumb-details-link {
    margin-top: auto;}

Podr铆as a帽adir el siguiente CSS personalizado:

.upcp-thumb-title {
    min-height: 105px;
}

Tras estos cambios, el problema del precio del producto en dispositivos m贸viles se resolvi贸 por s铆 solo, como puedes ver aqu铆. 驴Ves lo mismo?

Puede agregar el siguiente CSS personalizado para dejar el fondo de la imagen en blanco:

.upcp-catalogue-link {
    background: white;
}

Sin duda, puede cambiar estos iconos de escena utilizando el siguiente CSS personalizado:

.Black-thumb-icon {
    background: url(https://img.icons8.com/ultraviolet/40/000000/domain.png);
}
.Black-list-icon {
    background: url(https://img.icons8.com/ultraviolet/40/000000/domain.png);
}
.Black-details-icon {
    background: url(https://img.icons8.com/ultraviolet/40/000000/domain.png);
}

Puede agregar el siguiente CSS personalizado para resolver ese problema de lista con el bot贸n Agregar datos al carrito:

.detail-display .upcp-details-text {
    width: 100%;
}

(@mobilmeckaren)

Hace 1 a帽o, 2 meses

Despu茅s de la

.upcp-thumb-title {altura m铆nima: 105px; }

Y el

.prod-cat-item.upcp-thumb-item.upcp-thumb-ajuste-height {altura: auto! importante; flex-direction: columna; pantalla: flex;}

.upcp-thumb-details-link {margin-top: automatic;}

Se ve muy bien en la computadora, pero en el tel茅fono volvi贸 a ser un desastre, por lo que el bot贸n Agregar al carrito est谩 fuera de las cajas. Editar: Sin embargo, ahora est谩 en el lado derecho del tama帽o en lugar de debajo, lo cual es bueno.

Esta respuesta fue modificada hace 1 a帽o, 2 meses.

(@mobilmeckaren)

Hace 1 a帽o, 2 meses

La vista de datos no lo solucion贸

.detail-display .upcp-details-text {ancho: 100%; }

驴Solucion贸 tu problema??

0 / 0

Deja una respuesta 0

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *