WooCommerce: Productos con la misma altura en la página de la tienda
Ya sabes, ese es uno de los mayores problemas de visualización de WooCommerce. Los productos tienen imágenes de diferentes proporciones, diferentes longitudes de título, algunos tienen estrellas de revisión y otros no, lo que hace que el diseño de la "cuadrícula del producto" sea un gran lío en cuanto a la altura. Supongo que estarás muy familiarizado con la siguiente captura de pantalla.
Entonces, aquí hay algunos pasos que puede seguir para que la pantalla sea consistente. ¡Disfrutar!
Paso 1: Fuerza la altura de la imagen
El primer paso es hacer que las alturas de las imágenes sean consistentes. Esto se puede lograr a través del "Personalizador" en Panel de WordPress> Apariencia> Personalizar> WooCommerce> Imágenes de productos y debe elegir entre "Las imágenes se recortarán en un cuadrado" o "Las imágenes se recortarán en una relación de aspecto personalizada". De esta forma, si subiste imágenes lo suficientemente grandes, obtendrás este resultado:
Paso 2: haga que los títulos de los productos sean coherentes
El segundo problema es que los nombres de los productos pueden abarcar 2, 3, n líneas según su longitud. Si, en la captura de pantalla anterior, "Simple 3" fuera "Simple 3 con una vista increíble de las Montañas del Norte", obviamente la altura entre este producto y los siguientes habría sido diferente.
En caso de que tenga longitudes de título de productos inconsistentes, consulte este otro tutorial mío para que sean iguales. Si son todos de la misma longitud, deberían tener la misma altura, por supuesto.
Paso 3: eliminar la información del producto
El último paso es eliminar la información que está causando que la "caja" del producto tome una altura personalizada. Si todos los productos solo tuvieran IMAGEN - NOMBRE - PRECIO - BOTÓN sería evidente que tomarían la misma altura!
Entonces, una opción es eliminar las cosas que WooCommerce agrega a los productos de la página de la tienda: la insignia de VENTA (que en el tema Storefront no está colocada sobre la imagen sino dentro de su propio div) y las estrellas de revisión; sin ellas, los productos tendrían una altura uniforme. :
Entonces, aquí viene la Guía Visual Hook para la página de la Tienda . Podemos ver que WooCommerce agrega VENTA y RESEÑAS con dos funciones, por lo que podemos eliminarlas en nuestro tema secundario:
/** * @snippet Remove Sale & Reviews @ WooCommerce Shop * @how-to Get CustomizeWoo.com FREE * @author Rodolfo Melogli, BusinessBloomer.com * @testedwith WooCommerce 4.5 * @donate $9 https://businessbloomer.com/bloomer-armada/ */// Default WooCommerce:remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );// For Storefront theme:add_action( 'woocommerce_before_shop_loop', 'bbloomer_trigger_after_storefront' );function bbloomer_trigger_after_storefront() { remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 6 ); remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );} |
Deja una respuesta