Cómo sobrescribir el bucle específico de WooCommerce o archive-product.php

Question

Cómo sobrescribir el bucle específico de WooCommerce o archive-product.php

30 may 2018, 00:18:55

Vistas: 58.6K

Votos: 9

Hasta ahora, mientras mi tema de WooCommerce recorre todos los productos en la página de la tienda, estoy tratando de personalizar y agregar algunas clases de Bootstrap para darle estilo de manera adecuada, ya que los estilos predeterminados generados causan problemas de diseño. Después de investigar la página, descubrí que esto estaba en el corazón del bucle:

wc_get_template_part( 'content', 'product' );

No sé qué es eso, pensé que se vería como clases HTML y CSS regulares que puedo editar, pero todavía pienso que podría estar oculto en algún lugar pero no sé dónde encontrarlo.

Estoy atascado desde ayer tratando de editar los elementos HTML, todavía soy principiante en desarrollo de temas, así que por favor ayúdenme o al menos aconséjenme. Este es el archivo archive-product.php completo que es el siguiente:

get_header(); ?>

<div class="row">
    <div class="small-12 medium-12 large-12 columns text-left">
        <!--migas de pan-->
        <?php
        /**
         * gancho woocommerce_before_main_content.
         *
         * @hooked woocommerce_output_content_wrapper - 10 (genera divs de apertura para el contenido)
         * @hooked woocommerce_breadcrumb - 20
         * @hooked WC_Structured_Data::generate_website_data() - 30
         */
        do_action( 'woocommerce_before_main_content' );
        ?>
    </div>

    <header class="small-12 medium-6 large-6 columns text-left woocommerce-products-header collapse">
    <!--título-->
        <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>

        <h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>

        <?php endif; ?>

        <?php
            /**
             * gancho woocommerce_archive_description.
             *
             * @hooked woocommerce_taxonomy_archive_description - 10
             * @hooked woocommerce_product_archive_description - 10
             */
            do_action( 'woocommerce_archive_description' );
        ?>
    </header>

    <div class="small-12 medium-6 large-6 columns collapse">

        <?php if ( have_posts() ) : ?>
        <?php
            /**
             * gancho woocommerce_before_shop_loop.
             *
             * @hooked woocommerce_result_count - 20
             * @hooked woocommerce_catalog_ordering - 30
             */
            do_action( 'woocommerce_before_shop_loop' );
        ?>
        <?php endif; ?>
    </div>

</div>


<div class="row small-up-2 large-up-4">
    <?php if ( have_posts() ) : ?>

    <?php #woocommerce_product_loop_start(); ?><!--elimina ul-->

        <?php woocommerce_product_subcategories(); ?>

        <?php while ( have_posts() ) : the_post(); ?>

            <?php
                /**
                 * gancho woocommerce_shop_loop.
                 *
                 * @hooked WC_Structured_Data::generate_product_data() - 10
                 */
                do_action( 'woocommerce_shop_loop' );
            ?>

            <?php wc_get_template_part( 'content', 'product' ); ?>

        <?php endwhile; // fin del bucle. ?>

    <?php #woocommerce_product_loop_end(); ?>

    <?php
        /**
         * gancho woocommerce_after_shop_loop.
         *
         * @hooked woocommerce_pagination - 10
         */
        do_action( 'woocommerce_after_shop_loop' );
    ?>

    <?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>

    <?php
        /**
         * gancho woocommerce_no_products_found.
         *
         * @hooked wc_no_products_found - 10
         */
        do_action( 'woocommerce_no_products_found' );
    ?>

    <?php endif; ?> 
</div>

OT AMD

95

personalización loop temas woocommerce fueradetema

Todas las respuestas a la pregunta

Comentarios

Me alegra, feliz de poder ayudar :)

user3135691

31 may 2018 04:46:45

user3135691 1.04K · Accepted Answer · 2018-05-30T10:30:12Z

El sistema de plantillas de WooCommerce funciona de diferentes maneras dependiendo de tus necesidades y/o habilidades.

La función:

<?php
    wc_get_template_part('content', 'product');

es el equivalente en WooCommerce de la función de plantillas del núcleo de WordPress:

<?php
    get_template_part('filename');

Es importante saber que esto es lo mismo que el require de PHP pero sin usar la extensión .php al final.

Antes de realizar cualquiera de los pasos mencionados a continuación, asegúrate de que tu tema sea compatible con WooCommerce buscando en el archivo functions.php esta línea de código:

<?php

// El hook after setup theme añade soporte para WC
function mytheme_add_woocommerce_support() {
    add_theme_support( 'woocommerce' ); // <<<< aquí
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

Para usar tu propio diseño/plantilla tienes diferentes opciones:

1) La forma más sencilla:

Crea un archivo "woocommerce.php" en la carpeta de tu tema

Este archivo tendrá la máxima prioridad en términos de qué archivo usará WordPress en tu tema. Elimina este archivo si deseas utilizar el segundo método.

2) Forma avanzada:

Crea una carpeta "woocommerce" y copia la plantilla que deseas modificar dentro de esta carpeta.

WooCommerce/WordPress la reconocerá y utilizará las plantillas proporcionadas en esta carpeta. Este método se llama "sobrescritura de plantillas" y te permite insertar y modificar partes de la salida del frontend de WooCommerce en tu tema. Esta es la forma más avanzada de personalización de WC, puede ser un desafío para ti pero sin duda es la manera más profesional de hacerlo.

En este caso probablemente estés buscando este archivo:

woocommerce/archive-product.php

Ese es el archivo de plantilla que muestra la vista principal de productos de la tienda. Después de crear la carpeta y copiar el archivo en ella, puedes crear tu propio marcado para este diseño.

Al final, tu nuevo archivo podría verse así:

<?php get_header(); ?>
    <div class="container">
        <div class="row">
            <?php get_template_part('sidebars/sidebar-left'); ?>
            <main class="col-xs-12 col-sm-9 col-md-9 col-lg-9">

                <?php
                    // Solo se ejecuta en páginas de archivo de tienda, no en productos individuales u otras páginas
                    if ( is_shop() || is_product_category() || is_product_tag() ) {
                        // Productos por página
                        $per_page = 24;
                        if ( get_query_var( 'taxonomy' ) ) { // Si está en un archivo de taxonomía de producto (categoría o etiqueta)
                            $args = array(
                                'post_type' => 'product',
                                'posts_per_page' => $per_page,
                                'paged' => get_query_var( 'paged' ),
                                'tax_query' => array(
                                    array(
                                        'taxonomy' => get_query_var( 'taxonomy' ),
                                        'field'    => 'slug',
                                        'terms'    => get_query_var( 'term' ),
                                    ),
                                ),
                            );
                        } else { // En la página principal de la tienda
                            $args = array(
                                'post_type' => 'product',
                                'orderby' => 'date',
                                'order' => 'DESC',
                                'posts_per_page' => $per_page,
                                'paged' => get_query_var( 'paged' ),
                            );
                        }
                        // Establece la consulta
                        $products = new WP_Query( $args );
                        // Bucle estándar
                        if ( $products->have_posts() ) :
                            while ( $products->have_posts() ) : $products->the_post();
                                // Tu nuevo marcado HTML va aquí
                                ?>
                                <div class="col-xs-12 col-md-3">
                                    <h2><?php the_title(); ?></h2>
                                    <?php the_content(); ?>
                                    <?php // más cosas aquí... marcado, clases, etc. ?>
                                </div>
                                <?php
                            endwhile;
                            wp_reset_postdata();
                        endif;
                    } else { // Si no está en una página de archivo (carrito, checkout, etc), realiza operaciones normales
                        woocommerce_content();
                    }
                ?>

            </main>
        </div>
    </div>
</div>
<?php get_footer(); ?>

Espero que esto te ayude a entender cómo funciona. También puedes echar un vistazo a la página del sistema de backend de WC en la parte inferior. Allí se mostrará qué plantillas utiliza WC.