Bloques de WooCommerce: ocultar imágenes, etc. del bloque de cuadrícula del producto

Business Bloomer ingresa al mundo de Gutenberg hoy, y lo hacemos con un tutorial de personalización simple relacionado con los bloques de WooCommerce Gutenberg de la “Cuadrícula de productos”: actualmente estos son “ Productos más vendidos ”, “ Productos más nuevos ”, “ Productos en oferta ”, “ Productos mejor valorados «, » Productos por categoría » y utilice el mismo código base…

Sin embargo, todos usan código personalizado y no las plantillas predeterminadas de WooCommerce (y, por lo tanto, lamentablemente no podemos aprovechar los ganchos de WooCommerce para la tienda/archivo de productos/bucle de productos ), por lo que debemos encontrar una solución alternativa si deseamos elimine algunos de los elementos predeterminados que aparecen con los elementos de la cuadrícula del producto: enlace permanente del producto, imagen del producto, título del producto*, insignia de venta, precio del producto*, calificación*, botón Agregar al carrito * en este orden exacto.

* Como puede ver en la captura de pantalla a continuación, en realidad, ya puede eliminar la información con un asterisco de la configuración de Bloquear. Entonces, en este artículo, veremos cómo eliminar el resto en caso de que no lo desee: enlace permanente, imagen, insignia de venta. ¡Disfrutar!

Las opciones de contenido predeterminadas de WooCommerce Product Grid le permiten ocultar el título del producto, el precio, la calificación y el botón Agregar al carrito. Pero no puede ocultar la imagen, eliminar el enlace permanente del producto o la insignia de venta. ¡En este tutorial descubriremos cómo!

Núcleo de WooCommerce (código fuente)

Esta es la función responsable de generar los bloques Product Grid (» Productos más vendidos «, » Productos más nuevos «, » Productos en oferta», » Productos mejor calificados «, » Productos por categoría «):

protected function render_product( $product ) {
   $data = (object) array(
      'permalink' => esc_url( $product->get_permalink() ),
      'image'     => $this->get_image_html( $product ),
      'title'     => $this->get_title_html( $product ),
      'rating'    => $this->get_rating_html( $product ),
      'price'     => $this->get_price_html( $product ),
      'badge'     => $this->get_sale_badge_html( $product ),
      'button'    => $this->get_button_html( $product ),
   );
 
   return apply_filters(
      'woocommerce_blocks_product_grid_item_html',
      "<li class="wc-block-grid__product"">
         <a href=""{$data->permalink}"" class=""wc-block-grid__product-link"">
            {$data->image}
            {$data->title}
         </a>
         {$data->badge}
         {$data->price}
         {$data->rating}
         {$data->button}
      </li>""

Deja un comentario

© 2023 AprenderWP