Snippet php para agregar una sección productos disponibles dentro de la ficha de producto WooCommerce

por

Snippet php para agregar una sección productos disponibles dentro de la ficha de producto WooCommerce usando el functions.php

Aquí tienes un snippet PHP que puedes agregar al archivo functions.php de tu tema hijo (o con un plugin de snippets) para crear una sección personalizada que muestre todos los productos disponibles de WooCommerce, justo después de los productos relacionados:

php

/**
 * Muestra "Productos Disponibles" después de los productos relacionados
 */
function agregar_seccion_productos_disponibles() {
    // Título de la sección
    echo '<h2 class="productos-disponibles-titulo">Productos disponibles:</h2>';
    
    // Shortcode 


 con parámetros
    echo do_shortcode('


');
}
add_action('woocommerce_after_single_product_summary', 'agregar_seccion_productos_disponibles', 25);

Explicación del Código:

  1. Posicionamiento (woocommerce_after_single_product_summary):
    • El hook se ejecuta después del resumen del producto individual.
    • Prioridad 25 asegura que aparezca después de los productos relacionados (que usan prioridad 20).
  2. Shortcode 
    :
    • limit="-1": Muestra todos los productos sin paginación.
    • columns="4": Muestra 4 productos por fila (ajústalo).
    • visibility="visible": Solo productos visibles en el catálogo.
    • class="...": Clase CSS personalizada para estilos.

Personalización Adicional:

1. Filtrar productos específicos (ej: excluir el producto actual):

php

Copy

Download

echo do_shortcode('


');

2. Mostrar solo categorías específicas:

php

Copy

Download

echo do_shortcode('
');

3. Estilos CSS (agrega a tu tema):

css

Copy

Download

.productos-disponibles-titulo {
    margin: 40px 0 20px;
    font-size: 24px;
    text-align: center;
}

.productos-disponibles-lista .product {
    margin-bottom: 20px;
}

¿Cómo funciona?.

  1. WooCommerce procesará el shortcode 
     y generará una cuadrícula con todos tus productos.
  2. Los estilos CSS te permitirán integrarlo visualmente con tu tema.
  3. Puedes usar cualquier parámetro oficial del shortcode products.

Recomendaciones:

  • Optimización: Si tienes +100 productos, usa paginación (limit="12" paginate="true") para evitar sobrecargar la página.
  • Caché: Usa un plugin de caché (como WP Rocket) para mejorar el rendimiento.
  • Seguridad: Siempe usa un tema hijo para evitar perder cambios en actualizaciones.

Snippet php para agregar una sección productos disponibles dentro de la ficha de producto WooCommerce sin tocar el functions.php.

Si solo puedes usar un snippet PHP externo (sin tocar el functions.php), puedes lograr lo que necesitas con un plugin de snippets como “Code Snippets” o directamente en un custom plugin. Aquí está el código autónomo que puedes agregar:

php

<?php
/*
 * Snippet PHP externo para agregar sección "Productos Disponibles" en WooCommerce
 * Colócalo en un plugin de snippets o donde tengas acceso.
 */

// 1. Agregar la sección después de los productos relacionados
add_action('woocommerce_after_single_product_summary', 'mostrar_productos_disponibles_externos', 25);

function mostrar_productos_disponibles_externos() {
    // 2. Título personalizado
    echo '<h2 style="margin: 30px 0; text-align: center;">Productos disponibles:</h2>';
    
    // 3. Mostrar todos los productos usando el shortcode 



    echo do_shortcode('


');
    
    // 4. Estilos básicos (opcional, agrégalo en tu CSS si es necesario)
    echo '<style>
        .products.columns-4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            list-style: none;
            padding: 0;
        }
        @media (max-width: 768px) {
            .products.columns-4 {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>';
}
?>

¿Cómo usar este snippet?

  1. Instala un plugin de snippets.
  2. Crea un nuevo snippet y pega el código anterior.
  3. Guárdalo y activalo.

Personalización del código:

¿Por qué funciona?

Resultado:

Ejemplo visual
Sección “Productos disponibles” con cuadrícula de 4 columnas.

Notas importantes:

  • Rendimiento: Si tienes miles de productos, usa limit="12" paginate="true" para evitar sobrecargar la página.
  • Estilos: Los estilos incluidos son básicos. Personalízalos en tu tema si necesitas diseño profesional.
  • Compatibilidad: Funciona con cualquier tema que use WooCommerce estándar.

Páginas de mi sitio:

Servicios o productos disponibles:

Categorías de la tienda:

Entradas de blog:

100 entradas:

Otras 100:

Otras 100 entradas:

Otras 100 entradas:

Categorías de blog:

Deja un comentario

uno + 9 =

1
    1
    Servicios/Productos añadidos:
    JUGUETE INTERACTIVO PARA GATOS
    JUGUETE INTERACTIVO PARA GATOS
    1 X COP $ 49.900 = COP $ 49.900
    Subtotal COP $ 49.900
    El envío, los impuestos y los descuentos se calculan en la página de pago.
    Ir a la página del carritoCerrar panel carritoPagar