hooks - How to output woocommerce products to a page, style and modify the html structure

I am a complete noob when it comes to woocommerce so bear with me. I have added 6 products into woo. I have a cart and a checkout page that are using shortcodes to output the php/html to those respective pages, now I know I can Edit files in an upgrade-safe way using overrides per the woo documentation. I have successfully modified these pages using that technique.

Also I am using the understrap-child theme, since it is custom do I need to add add_theme_support in my functions.php? as described in the woo docs.

Now getting to what I want to achieve. I want to create a new page in wordpress, lets call it all-products I want to loop through all my products and display them on the page, I also want to access the php file that I can overide html and php for that page, How would I do this. I don't see a shortcode to output all my products. This is where I am stuck. I can clarify this question if it is not clear enough. Would I create a page-products in my theme and use a theming snippet like below?

<ul class="products">
    <?php
        $args = array(
            'post_type' => 'product',
            'posts_per_page' => 12
            );
        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) {
            while ( $loop->have_posts() ) : $loop->the_post();
                wc_get_template_part( 'content', 'product' );
            endwhile;
        } else {
            echo __( 'No products found' );
        }
        wp_reset_postdata();
    ?>
</ul><!--/.products-->

Also is it better to use hooks to overide certain templates as described here could someone explain how do this hooks thing, I don't quite get where the code ends up.

Thanks! ahead of time.

I am a complete noob when it comes to woocommerce so bear with me. I have added 6 products into woo. I have a cart and a checkout page that are using shortcodes to output the php/html to those respective pages, now I know I can Edit files in an upgrade-safe way using overrides per the woo documentation. I have successfully modified these pages using that technique.

Also I am using the understrap-child theme, since it is custom do I need to add add_theme_support in my functions.php? as described in the woo docs.

Now getting to what I want to achieve. I want to create a new page in wordpress, lets call it all-products I want to loop through all my products and display them on the page, I also want to access the php file that I can overide html and php for that page, How would I do this. I don't see a shortcode to output all my products. This is where I am stuck. I can clarify this question if it is not clear enough. Would I create a page-products in my theme and use a theming snippet like below?

<ul class="products">
    <?php
        $args = array(
            'post_type' => 'product',
            'posts_per_page' => 12
            );
        $loop = new WP_Query( $args );
        if ( $loop->have_posts() ) {
            while ( $loop->have_posts() ) : $loop->the_post();
                wc_get_template_part( 'content', 'product' );
            endwhile;
        } else {
            echo __( 'No products found' );
        }
        wp_reset_postdata();
    ?>
</ul><!--/.products-->

Also is it better to use hooks to overide certain templates as described here could someone explain how do this hooks thing, I don't quite get where the code ends up.

Thanks! ahead of time.

• woocommerce-offtopic
• hooks

Share Improve this question asked Dec 18, 2018 at 5:52 Anders KitsonAnders Kitson 15711 silver badge99 bronze badges 1

• you need to learn woocommerce tamplate and hook to design and manipulate woocommerce customization from woocommerce docs. thanks – user147874 Commented Dec 18, 2018 at 6:23

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

To create a product listing page on your site, you just create a normal page in the admin. Then in the admin go to WooCommerce > Settings > Products > General and select that page for the "Shop Page" setting.

If you want a custom product page you could do basically what your saying above. Create a new page in the admin, say its called My Products. Then you could use a page template called page-my-products.php and you could include your query in that template.