• By Nacho
  • 29 de marzo de 2023

Incluir productos en las entradas de blog de WordPress sin plugins

Incluir productos en las entradas de blog de WordPress sin plugins

Incluir productos en las entradas de blog de WordPress sin plugins 1024 768 Nacho

Dificultad Alta

Cuando trabajamos el blog de una web montada en WordPress, es habitual crear contenidos relacionados con los productos de tu tienda virtual. En muchas ocasiones, los templates de WordPress tienen un editor bastante avanzado para las páginas, pero no está disponible para las entradas de blog (a no ser que pagues la versión Premium). Esto nos ha ocurrido con WPBackery por ejemplo, un excelente editor. Si no tienes la versión de pago, no podrás crear de manera amigable una fila de 3 productos, eligiéndolos con el complemente de turno del editor.

Si es este tu caso, que sepas que puedes añadir los productos que quieras debajo del contenido de texto, con el fin de que complementen a la entrada de blog. Siempre podemos hacer interlinking dentro del contenido de texto, pero ya sabéis lo que dicen: una imagen vale más que 1.000 palabras.

Añadir productos al final de una entrada de blog de WordPress con el fichero functions.php

Bueno, el resultado es perfecto utilizando este método, que aunque se puede considerar un poco complicado para gente sin conocimientos, para aquellos desarrolladores con un mínimo de rodaje, será coser y cantar.

function agregar_contenido_adicional_a_descripcion($content) {
    global $post;
    $id_articulo = 1003636;
    if ( is_singular('post') && $post->ID == $id_articulo ) {
        $args = array(
            'post_type'      => 'product', // Tipo de contenido que queremos recoger
            'posts_per_page' => 3, // Cantidad de páginas
            'orderby'        => 'date', // Campo de orden
            'order'          => 'DESC', // Tipo de Orden
            'post__in'       => array( 1003121, 1003045, 1003525 ), // Tus IDs de los productos deseados
        );

        $products = get_posts( $args );

        if ( $products ) {
            $contenido_adicional = '<br style="clear:both;" /><br style="clear:both;" />'; // Añadiremos el contenido que queramos incluir en la variable $contenido_adicional
            $contenido_adicional .= '<h2 class="claseH2">Productos Relacionados</h2>
            <ul class="products columns-3">';
            // Recorremos los productos elegidos
            foreach ( $products as $product ) {
                setup_postdata( $GLOBALS['post'] =& $product );

                // Mostrar la vista previa del producto aquí
                $product_id = get_the_ID();
                $price = get_post_meta( $product_id, '_regular_price', true );

                
                $contenido_adicional .='<li class="clase13 product type-product post-'.$product_id.' status-publish first instock product_cat-pulidoras has-post-thumbnail taxable shipping-taxable purchasable product-type-simple">

                  <a href="'.get_permalink().'" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
                  </a><div class="grve-product-item"><a href="'.get_permalink().'" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
                    </a><div class="grve-product-media grve-image-hover"><a href="'.get_permalink().'" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">

                      </a><a href="'.get_permalink().'">

                        <img src="'.get_the_post_thumbnail_url().'" class="attachment-shop_catalog size-shop_catalog" alt="" decoding="async" loading="lazy" sizes="(max-width: 300px) 100vw, 300px">
                      </a>

                      <div class="grve-product-content">
                        <div class="grve-product-switcher">
                          <div class="grve-product-price grve-link-text">
                          
                          
                                  </div>
                                  <div class="grve-add-to-cart-btn grve-link-text">
                                  <a rel="" href="'.get_permalink().'" data-quantity="1" data-product_id="'.get_the_ID().'" data-product_sku="" class="product_type_variable add_to_cart_button">Seleccionar opciones</a>         </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <h4 class="woocommerce-loop-product__title"><a rel="" href="'.get_permalink().'">'.get_the_title().'</a></h4>
                          <p><a style="color:#4d4d4d;" rel="" href="'.get_permalink().'">Ver Más</a></p>
                        </li>';                         
            }
            $contenido_adicional .= '</ul>';
             
            wp_reset_postdata();

        }
    }
    echo $contenido_adicional;
}
add_filter('wp_articulos_post', 'agregar_contenido_adicional_a_descripcion');

Estilos para los contenedores de los productos

A continuación os dejamos unos estilos MUY BÁSICOS para que los bloques de los artículos relacionados se vean de manera correcta en una línea y que hagan el responsive al llegar a 720px de ancho en la pantalla del navegador.

.clase13 {
  width: 30%;
  padding-right:2%;
  display: inline-block;
}

.claseH2 {
  padding-left: 15px;
  padding-right:15px;
}

@media(max-width:720px){
  .clase13 {
    width:100%;
    margin-bottom:45px;
  }
}

¿Qué debes saber antes de copiar y pegar el código a lo loco?

En nuestro código PHP hemos empleado el formato HTML que se emplea en la tienda. Para ello, hemos ido a la página de inicio (o a la página de categoría de producto) y hemos buscado el código que se corresponde con la «mini ficha» de un producto, mediante el inspector de elementos. Para abrir el Inspector de Elementos puedes pulsar F12 o puedes darle al botón derecho en la página en la que te encuentres y pinchar en «Inspeccionar».

Una vez abierto, busca el contenedor de un producto y verás su código HTML. Puedes copiar este código del contenedor al completo, y sustituir en él los enlaces, imágenes y títulos de las etiquetas por las variables de la programación. Recuerda las clases que crean el responsive: ubícalas según corresponda en el código si el diseño no es el adecuado al no estar en una página de WooCommerce.

A continuación os ponemos un ejemplo con una tienda virtual cualquiera montada en WordPress que hemos encontrado por ahí en 8ª o 9ª página y en la que se han preocupado mucho porque no se pudiese acceder al código 😆

Utilizar el html de tu página, nos servirá para que tengas que tocar los estilos lo mínimo posible, aunque es posible que tengas que hacer algún arreglo.

Dejar una Respuesta