Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Adding Products to a WordPress Theme

Hello Treehouse students, particularly those more versed in WordPressing than me. :)

I'm building a WordPress theme with WooCommerce for a client.

I have WooCommerce installed and I've put together the building blocks of the theme. But I want products to display as they currently do in my static mockup.

website mockup

This is a list of images with a price shown contained inside an unordered list for structure. I've spent the morning so far experimenting with ways to get products added to this list. Clearly the WordPress loop drives it.

So I have the index template for the home page, my header and footer templates as well as 3 other uniqute templates for 3 other product ranges. And I need products added in a similar way.

website mockup #2

And this is how I'm currently trying to rebuild the list.

index.php
<section class="catalog clearfix">

                <h2>"Hot off the Hook!"</h2>


                <ul class="list">

                <?php

                $args = array(
                    'post_type' => array( 'product' )
                );

                $query = new WP_Query( $args );
                ?>

                    <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();    ?>

                        <li>
                            <a href=" <?php the_permalink(); ?> ">

                                <img class="img-catalog" src=" <?php the_post_thumbnail(); ?> " />

                                <p>Price: <?php the_content(); ?> </p>

                            </a>

                        </li>

                    <?php endwhile; else :  ?>
                        <li>
                            <p>Oops! We're not picking up any content! </p>
                        </li>
                    <?php endif;  ?>

                </ul>

            </section>

I have CPTUI and Advanced custom fields installed. I've thought that maybe adding them as a Custom Post Type might work. I have a feeling using WP_Query with the post tupe slug as the parameter will work somehow but I'm stuck.

Help :-)

Felix Yakubov
Felix Yakubov
17,475 Points
Felix Yakubov
Felix Yakubov
17,475 Points

Im more of WP user than developer but I had the same problem. Search the woothemes documentation - custom templates

You have a link on this page to the templates https://www.woothemes.com/2014/08/five-quick-woocommerce-customization-tips/

Also I found this tool yesterday, havent tried it yet but maybe you can too https://wp-types.com/learn/create-an-ecommerce-wordpress-site/designing-woocommerce-product-catalog/

Good luck and let met know how it goes)

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hi Felix

Thanks for your reply.

I've been able to get the effect I want by displaying different products according to the category assigned to them. 

<?php

                    $query = new WP_Query ( array ( 'product_cat' => 'work-it' ));
                ?>

                    <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>

                        <li>
                            <a href=" <?php the_permalink(); ?> ">

                                <p><?php the_title(); ?></p>
                                <img class="img-catalog" src="<?php the_post_thumbnail(); ?>                            
                                <p><?php the_content("price"); ?></p>
                            </a>

                        </li>

                    <?php endwhile; else :  ?>
                        <li>
                            <p>Oops! We're not picking up any content! </p>
                        </li>
                    <?php endif;  ?>

                    <?php wp_reset_postdata(); ?>

But it's a big job on my hands and I have the feeling i hacvw a lot to learn so thanks for those resources, I'll add them to my bookmarks for further reading :)

1 Answer

Felix Yakubov
Felix Yakubov
17,475 Points
Felix Yakubov
Felix Yakubov
17,475 Points

Good luck. My bookmarks is a black hole). Its never the right time to check out the resources