Share
Lo que vas a crearWooCommerce le ofrece algunas opciones sobre lo que puede mostrar en sus páginas de archivo:
Cuando configuro una tienda, normalmente selecciono la tercera opción: productos y categorías / subcategorías. Esto significa que los visitantes a mi tienda pueden seleccionar productos directamente desde la página de inicio o refinar su búsqueda haciendo clic en un archivo de categoría de producto.
Sin embargo, hay una falla en este enfoque: muestra las categorías / subcategorías juntas, sin separación entre las dos. Esto significa que si las imágenes de su producto tienen diferentes dimensiones de las imágenes de su producto, el diseño puede parecer un poco desordenado. Incluso si sus imágenes tienen el mismo tamaño, si una de las líneas en la página de archivo incluye tanto categorías como productos, la ausencia de un botón 'Agregar al carrito' para categorías hace que esa fila se vea desordenada, ya que no todos sus elementos tienen el mismas dimensiones.
En este tutorial, le mostraré cómo mostrar categorías en una lista separada antes de mostrar productos.
Para ello, seguiremos cuatro pasos:
Pero antes de comenzar, necesitará una instalación de WooCommerce con algunos productos agregados y categorías de productos y subcategorías configuradas..
Para seguir adelante, necesitarás:
Echemos un vistazo a lo que WooCommerce nos da de forma predeterminada.
Comencé agregando algunas imágenes a mis categorías y subcategorías de productos, ya que los datos ficticios de WooCommerce no los incluyen. Simplemente he usado una imagen de uno de los productos de cada categoría o subcategoría, como se puede ver en la captura de pantalla:
Ahora veamos cómo WooCommerce muestra las categorías de productos y los productos en las páginas de archivo..
Si aún no lo has hecho, ve a WooCommerce> Configuraciones, Selecciona el Productos pestaña, y luego elija la Monitor opción. Para cada uno de los Mostrar la página de la tienda y Visualización de categoría predeterminada opciones, seleccione Mostrar ambos:
Haga clic en el Guardar cambios Botón para guardar su configuración y visitar la página de la tienda de su sitio. El mío se parece a esto:
Da la casualidad de que, como tengo tres categorías de productos y las imágenes de mi categoría son del mismo tamaño que las imágenes de mis productos, se ve bastante bien. Pero aquí está uno de los archivos de categoría de producto:
Debido a que esta categoría tiene dos subcategorías, el primer producto se muestra junto a ellos, en una cuadrícula de tres elementos de ancho. Quiero hacer que mis categorías y subcategorías sean más prominentes, y simplemente presentarlas por separado de las listas de productos. Entonces hagamos eso.
El primer paso es identificar cómo WooCommerce produce categorías y subcategorías. Así que vamos a profundizar en el código fuente de WooCommerce para encontrar la función relevante.
El archivo que WooCommerce usa para mostrar las páginas de archivo es archivo-producto.php, que está en el plantillas carpeta.
Dentro de ese archivo, puede encontrar este código, que genera las categorías y productos:
Así que hay una woocommerce_product_subcategories () función que genera las categorías o subcategorías antes de ejecutar el bucle que genera los productos.
La función es conectable, lo que significa que podríamos anularla en nuestro tema. Desafortunadamente, eso no funciona del todo, ya que WooCommerce tiene un estilo incorporado para borrar elementos, que aparecería al principio de una fila con la pantalla predeterminada.
Así que en lugar de eso, desactivaremos la visualización de categorías y subcategorías en nuestras páginas de archivo, para que solo se muestren los productos. Luego, crearemos una nueva función que genere las categorías o subcategorías de productos, y la conectaremos a la woocommerce_before_shop_loop Acción, asegurándonos de que usamos una prioridad alta para que se active después de las funciones que ya están enganchadas a esa acción.
Nota: dado que WooCommerce agrega claros a cada tercer listado de productos, no podemos usar el woocommerce_product_subcategories () Función o una versión editada de la misma para mostrar las categorías. Esto se debe a que borrará la tercera, sexta (y así sucesivamente) categoría o producto listado, incluso cuando usamos esta función para mostrar categorías por separado. Podríamos intentar anular eso, pero es más simple escribir nuestra propia función.
Así que vamos a crear un plugin que hace eso.
En tus wp-content / plugins directorio, cree una nueva carpeta y asígnele un nombre único. Estoy llamando al mio tutsplus-separado-productos-categorías-en-archivos. Dentro de eso, crea un nuevo archivo, de nuevo con un nombre único. Estoy usando el mismo nombre: tutsplus-separado-productos-categorías-en-archives.php.
Abra su archivo y agregue este código:
Es posible que desee editar los detalles del autor, ya que este es el complemento que está escribiendo. Guarde su archivo y active el complemento a través del administrador de WordPress.
Escribiendo nuestra función
Ahora vamos a escribir la función. Pero antes de comenzar, desactive las listas de categorías en las pantallas de administración. Ir WooCommerce> Configuraciones, Selecciona el Productos pestaña, y luego elija la Monitor opción. Para cada uno de los Mostrar la página de la tienda y Visualización de categoría predeterminada opciones, seleccione Mostrar productos. Guarda tus cambios.
La página de tu tienda ahora se verá así:
En su archivo de complemento, agregue esto:
función tutsplus_product_subcategories ($ args = array ()) add_action ('woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50);Ahora agregue este código dentro de la función:
$ parentid = get_queried_object_id (); $ args = array ('parent' => $ parentid); $ terms = get_terms ('product_cat', $ args); si ($ términos) echo '
Echemos un vistazo a lo que hace esa función:
Accentsconagua
$ parentid.get_terms () para identificar los términos con el elemento consultado actualmente como su padre. Si esta es la página principal de la tienda, devolverá las categorías de nivel superior; Si se trata de un archivo de categoría, devolverá subcategorías..para cada bucle y un ul elemento.li elemento, y luego saca la imagen de la categoría utilizando woocommerce_subcatgeory_thumbnail (), seguido del nombre de la categoría en un enlace a su archivo.Ahora guarda tu archivo y actualiza la página principal de la tienda. El mío se parece a esto:
Las categorías se muestran, pero necesitan un poco de estilo. Hagamos eso siguiente.
Para que podamos agregar estilo, necesitamos una hoja de estilo dentro de nuestro complemento, que tendremos que poner en cola.
En su carpeta de plugins, cree una carpeta llamada css, y dentro de eso, crea un archivo llamado style.css.
Ahora, en su archivo de complemento, agregue esto encima de la función que ya ha creado:
función tutsplus_product_cats_css () / * registrar la hoja de estilo * / wp_register_style ('tutsplus_product_cats_css', plugins_url ('css / style.css', __FILE__)); / * encolar la hoja de estilo * / wp_enqueue_style ('tutsplus_product_cats_css'); add_action ('wp_enqueue_scripts', 'tutsplus_product_cats_css');Esto encola correctamente la hoja de estilo que acaba de crear..
Ahora abra su hoja de estilo y agregue el siguiente código. WooCommerce utiliza el primer estilo móvil, así que eso es lo que usaremos también.
ul.product-cats li list-style: none; margen izquierdo: 0; margen inferior: 4.236em; text-align: center; posición: relativa; ul.product-cats li img margen: 0 auto; @media screen y (min-width: 768px) ul.product-cats margin-left: 0; Limpia los dos; ul.product-cats li ancho: 29.4117647059%; flotador izquierdo; margen derecho: 5.8823529412%; ul.product-cats li: nth-of-type (3) margin-right: 0;
He copiado los anchos y márgenes exactos del estilo utilizado por WooCommerce.
Ahora revisa la página principal de tu tienda de nuevo. Aquí está el mío:
Aquí esta la Música categoría de archivo:
Y así es como se ve en pantallas más pequeñas:
Las categorías de productos son una gran característica de WooCommerce, pero la forma en que se muestran no siempre es ideal. En este tutorial, aprendió cómo crear un complemento que genere categorías o subcategorías de productos por separado de las listas de productos, y luego diseñó sus listas de categorías..
Puede usar este código para generar una lista de categorías o subcategorías en otra parte de la página (por ejemplo, debajo de los productos), conectando la función a un gancho de acción diferente dentro del archivo de plantilla de WooCommerce.
Si actualmente tiene una tienda que desea ampliar, o si está buscando algunos complementos adicionales para estudiar en relación con WooCommerce, no dude en ver qué complementos están disponibles en Envato Market..
