Cómo hacer que tu tema muestre la nueva galería de WooCommerce

Configuración de la galería de productos Woocommerce

Puedes añadir fácilmente imágenes de producto e imágenes de galería ya sea como parte de la creación del producto, o cuando editas un producto existente. Esto significa que también es fácil cambiar las imágenes de un producto existente, en caso de que necesite una actualización.

Desde su panel de control wp-admin, usted va a pasar el cursor sobre Producto en el menú de la izquierda, y elegir Añadir nuevo, o Todos los productos. Si está modificando un producto actual, busque el elemento en la página Todos los productos y ábralo para editarlo.

Al crear un nuevo producto, puede establecer la imagen principal del producto y añadir imágenes de la galería como se muestra a continuación, como parte de la adición del producto. También puede volver a un producto para completar la configuración, o para cambiarlo, y añadir imágenes de la misma manera.

Verá las secciones Imagen del producto y Galería del producto cuando cree o edite un producto. Para añadir una imagen de producto, haga clic en el enlace Establecer imagen de producto. Al hacer clic en este enlace se abrirá el selector de medios de WordPress. Desde aquí puede seleccionar una imagen ya cargada o cargar una nueva.

¿Cómo personalizo mi galería de imágenes de WooCommerce?

Vaya a Panel > Apariencia > Personalizar > WooCommerce > Imágenes de Producto: Obtendrás estas opciones: Esas son las opciones de imagen para las páginas de tienda y archivo. Aquí puedes especificar el ancho y alto de la imagen, así como la relación de aspecto si deseas recortarlas.

¿Cómo muestro mi galería de productos en WooCommerce?

Para añadir una galería de productos, haga clic en el enlace Establecer imagen del producto. Esto abrirá el mismo tipo de cuadro de selección de medios de WordPress, puede elegir imágenes ya cargadas o añadir otras nuevas. Si necesita cambiar el orden de las imágenes en la galería de productos, puede hacerlo fácilmente arrastrándolas al orden que prefiera.

  Hacer un panel de ajustes para un tema

Avanzado woocommerce producto galería slider

WordPress hace que sea fácil añadir imágenes a las entradas y páginas de tu blog. Pero, si quieres que esas imágenes se vean bien, debes conseguir que el tamaño de la imagen sea el adecuado. De eso estamos hablando hoy: El tamaño de las imágenes en WordPress.

Por eso es crucial saber cómo funcionan los tamaños de imagen en los sitios web de WordPress y cómo añadir tamaños de imagen personalizados a su sitio web. Así podrá utilizar el tipo de archivo de imagen más adecuado, en el tamaño correcto y en la ubicación adecuada.

La razón por la que WordPress crea estos tamaños de imagen es doble. En primer lugar, evita tener que redimensionar las imágenes manualmente. En segundo lugar, asegura que se selecciona el tamaño de imagen correcto para diferentes ubicaciones en su sitio web.

Por ejemplo, WordPress mostrará las imágenes en miniatura de una lista de entradas de blog en una barra lateral o en un widget de pie de página. Pero una imagen que se supone que debe ir en su área de cabecera o en la propia entrada necesita ser más grande. Por lo tanto, WordPress seleccionará uno de los tamaños de imagen más grandes para asegurar que la imagen sea clara y reconocible.

De este modo, si desea utilizar la misma imagen en diferentes ubicaciones de su sitio web, no tendrá que perder el tiempo redimensionándolas manualmente o intentando recordar qué dimensiones de imagen necesita. Basta con subir una imagen y WordPress se encargará del resto.

Woocommerce plantilla de galería de productos

Sé que pro funciona con WooCommerce nada más sacarlo de la caja, pero mi pregunta es si hay una manera fácil de dar estilo a las miniaturas de las imágenes de la galería. En todas las pilas de la imagen principal tiene las imágenes de la galería que figuran en la parte superior derecha de la imagen y son muy pequeñas, tan fácil de perder.

  Crea tu tema WordPress (casi) desde cero con Components

Ahora estoy depurando otro problema: cuando veo la página del carrito de la compra en un navegador más pequeño, las imágenes y los detalles de los productos desaparecen por completo. He desactivado todos los plugins innecesarios, así que creo que podría estar ocultándolos en ciertos puntos de interrupción. En lugar de ocultar las imágenes y los detalles, preferiría que se redujeran y apilaran unos encima de otros. Aquí hay algunas capturas de pantalla a continuación:

Como puede ver, cuando un producto tiene atributos, el desplegable muestra el texto de forma extraña y desalineado. ¿Hay alguna solución fácil para que el texto se alinee correctamente a la derecha de la imagen? También hay un salto de línea entre cada atributo que crea mucho espacio – ¿podemos eliminar este salto de línea?

Por último, no sé cómo eliminar la sombra gris de los botones “carrito” y “pago”. Lo siento si me he perdido algo fácil, pero he intentado eliminar toda la sombra de los botones y hacerla transparente, pero sigue apareciendo.

Woocommerce video en la galería de productos

Estaba probando una nueva actualización de la galería de productos (RC1 3.0.0) en Twenty Sixteen y Twenty Seventeen. Para los productos variables, he notado que cuando selecciono la variación del producto, la primera imagen en la galería de miniaturas se muestra en su tamaño original, es decir, más grande que el resto de las imágenes de la galería de miniaturas. Mientras que las pruebas en el tema storefront funciona bien, sin miniatura redimensionada.

@James Koster actualmente las nuevas características de la galería funcionan muy bien después de añadir soporte tema para que en mi tema personalizado. Sin embargo, sólo funciona en las páginas de productos individuales, pero no en las páginas de productos que se muestran en otras páginas a través de shortcode [product_page id=”99″] , ¿es esto intencional o se añadirá en una actualización?

  Página de acceso con tu tema

Tienes razón James, me apresuré a sacar conclusiones, el shortcode funciona bien dentro del campo de contenido estándar. Sin embargo, este código corto en particular se muestra dentro de un contenedor generado a través de campos personalizados avanzados plugin y luego se muestra utilizando add_filter( ‘the_content’,…). Parece que el photoswipe y zoom css y js no están siendo llamados … Estoy probando dónde está el problema y voy a informar de nuevo cuando / si lo encuentro (podría ser sólo un poco de mala codificación de mi parte).