WooCommerce Template Structure | Help me wrap the contents of my page inside a div

Inspector View showing DOM Tree

I am making changes to my WooCommerce homepage in archive-product.php hosted in a child theme folder. This part is going to plan and I have successfully created the contents of my page. However, I now need to wrap the content between the header and footer in a div with an id of lets say page-contents for clarity.

However if I place an opening div in my header file, then place a closing div in my footer it doesn’t yield the results I would have predicted. There is something in the template structure of WooCommerce that closes all of the divs opened before it… This happens if I make the div within the same file as archive-template.php too.

Here is my inspector view of the site:

As you can see there are several divs that are indeed told to be within the div with an id of page-contents. However, the div is just closed after the WooCommerce loop before the sidebar.

Here is the code I am running:

Archive-Product.php

<?php
/**
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

get_header();

$display_count = 9;
$page = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$offset = ( $page - 1 ) * $display_count;
$args = array(
    'post_type'         => 'product',
    'post_status'       => 'publish',
    'posts_per_page'    => $display_count,
    'page'              => $page,
    'offset'            => $offset,
    'orderby'           => 'menu_order',
    'order'             => 'ASC'
); ?>

<div class="homepage-content">

    <div class="product-list-contain">

        <?php
        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) :

            // do_action( 'woocommerce_before_shop_loop' );

            woocommerce_product_loop_start(); ?>

            <div id="product-list">

                <?php
                while ( $loop->have_posts() ) :

                    $loop->the_post();

                    wc_get_template_part( 'content', 'product' );

                endwhile;
                ?>

            </div>

            <?php
            woocommerce_product_loop_end(); ?>

            <?php
            do_action( 'woocommerce_after_shop_loop' ); ?>

        <?php
        else :

            do_action( 'woocommerce_no_products_found' );

        endif; ?>

        <?php
        wp_reset_postdata(); ?>

    </div>

</div>

<?php
do_action( 'woocommerce_after_main_content' ); ?>

<?php
get_footer(); ?>

Header:

NAV then...
<div id="page-contents">
    <div id="content" class="site-content">

Footer:

        <?php
        // The template for displaying the footer
        ?>
        <!-- closing page-contents -->
        </div>

        <?php wp_footer(); ?>
    </body>
</html>

I simply need a div wrapping the whole content of my site, navigation and footer excluded from this div. Please can someone help me identify and work around the issue of WooCommerce automatically closing my id=”page-contents” div?

Read more here:: WooCommerce Template Structure | Help me wrap the contents of my page inside a div

Leave a Reply

Your email address will not be published. Required fields are marked *