0

(1) Hello smart people, this is my very first time creating a template... I made a small sketch of my goal: enter image description here

I was able to do it by starting the loop before each div section and pulling the post of each specific category:

$params = array('posts_per_page' => 4, 'post_type' => 'product', 'product_cat' => 'Pies', ); $wc_query = new WP_Query($params);

But crearly that only works with specified categories, so I need it to automatically add the products of a newly created category (like cat 4 after cat 3...)

How can I accomplish this?

(2) I wish to add a "more" button at the bottom of each category div, so it shows the rest of category's posts, like this:

when more is toggled

Can this be done with wordpress? or do I create a JQuery function that increases 'posts_per_page'? I really appreciate your time and help.

0

You should first make a query to retrieve all your categories. This can be done using:

$categories = get_categories(array('hide_empty'=> 0,));

Now that you have a list of your categories as object, you have to run a foreach to output their content:

foreach ($categories as $category) {
    $params = array(
        'posts_per_page' => -1, 
        'post_type' => 'product', 
        'cat' => $category->term_id, 
    ); 
    $wc_query = new WP_Query($params);
    //From here you can start outputting your query
    if ($wc_query->have_posts()) { ?>
        <div id="<?php echo $category->term_id;?>" class="product-list-grid">
        while ($wc_query->have_posts()) {
            $wc_query->the_post(); ?>
            <div class="product-grid">
                <a href="<?php the_permalink(); ?>">
                   <?php the_post_thumbnail(); ?>
                   <?php the_title(); ?>
                </a>
            </div><?php
        }
        wp_reset_postdata();?>
        <a class="more-products" href="#" onclick=" document.getElementById("<?php echo $category->term_id;?>").style.height = "auto";">More</a>
        </div><?php
    }
}

Don't forget to use wp_reset_postdata() when you are finished with your query.

Now let's style it, shall we?

.product-list-grid {
    width:100%;
    height:100px;
    padding:10px;
    float:left;
    display:block;
    position:relative
}

.product-grid {
    float:left;
    width:auto;
    height:80px;
    display:block
}

.product-grid img {
    float:left;
}

.more-products {
   position:absolute;
   bottom:10px;
   right:10px;
}

Now, after clicking More button, all your products will be visible. Remember, you have to change the number of queried products to return all available product if you want this to work.

  • Thank you for the help! I found a similar function in an answer of another question but I failed to adapt it to my style, it displays all products within "col"s but I would like each category to end where div "pFlex" ends, if it is not too much of a bother can you help me find where I went wrong? pastebin.com/39ffuVUe – gallantsun Apr 7 '17 at 18:10
  • @gallantsun Sure. Since the first part of your provided function is the same as mine, i just added the second part to my answer, and modified it. Please read the answer FULLY again, i changed the content. – Jack Johansson Apr 7 '17 at 18:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.