0

I have a custom post type called 'Products'

Within products there is a custom field called 'Sub Category' (selsubcat) which contains 14 different categories.

These categories are; CAM / REC / ACC / SWH / NET / MON / HDMI / ENC / SIGNS / PIR / WIFI / POLE / SOUND.

What I am trying to do display all the products within a different tab, where the tabs are the sub categories, and each tab will display the products for that category. At the moment I've defined the meta_value as 'CAM' and this is displaying all the products with the category 'CAM' within the #tabs-1 div - which is correct.

I now need to somehow loop each category and display the products in the other 13 tabs.

So #tabs-1 will show all the products for the category 'CAM', #tabs-2 will show all the products for the category 'REC' and so on...

Here is what I have at the moment:-

<div id="tabs">
    <ul>
        <?php
        if( have_rows('sub_category', 'option') ): $cat_increment = 1;
            while ( have_rows('sub_category', 'option') ) : the_row(); ?>
                <!-- Tab Sub Categories -->
                <li><a href="#tabs-<?php echo $cat_increment; ?>"><?php the_sub_field('category_name'); ?></a></li>
            <?php $cat_increment++; endwhile;
        else : endif;
        ?>
    </ul>

    <?php 

    $posts = get_posts(array(
        'posts_per_page'=> -1,
        'post_type'     => 'products',
        'order'             => 'ASC',
        'meta_key'      => 'selsubcat',
        'meta_value'    => 'CAM'
    ));

    if( $posts ): ?>


    <div id="tabs-1">   

        <table id="table-products" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th class="hidden">id</th>
                    <th>Image</th>
                    <th>Product Code</th>
                    <th>Description</th>
                    <th>Cost</th>
                    <th>Qty</th>
                    <th>Total Cost</th>
                    <th>Options</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th class="hidden">id</th>
                    <th>Image</th>
                    <th>Product Code</th>
                    <th>Description</th>
                    <th>Cost</th>
                    <th>Qty</th>
                    <th>Total Cost</th>
                    <th>Options</th>
                </tr>
            </tfoot>                        

                <?php foreach( $posts as $post ): 

                    setup_postdata( $post );

                    ?>

                    <tbody>
                          <tr>
                              <td class="hidden"><?php the_ID(); ?></td>
                              <td><span class="product-image" style="background:url(<?php the_field('image'); ?>);"></span></td>
                              <td><?php the_field('code'); ?></td>
                              <td><?php the_field('description'); ?></td>
                              <td><?php the_field('cost_price'); ?></td>
                              <td><input type="text" /></td>
                              <td><input type="text" /></td>
                              <td><input type="button" class="add-row" name="add-row" value="Add"></td>
                          </tr>
                    </tbody>

                <?php $product_increment++; endforeach; ?>

            </table>    

        </div>


        <?php wp_reset_postdata(); ?>

    <?php endif; ?>

</div>

I'm stuck at this point so any help would be much appreciated!

1

You can fire query only by 'meta_key'=> 'selsubcat' without meta_value `and you will get all subcategories. Then you should loop outside you tab with some increment(maybe a name of category or numeric id) something like this:

<?php 
foreach( $posts as $post ): setup_postdata( $post ); ?>
    <div id="tabs-<?php the_ID(); ?>">   
        <table id="table-<?php the_ID(); ?>" class="display" cellspacing="0" width="100%">
          <tbody>
                <tr>
                    <td class="hidden"><?php the_ID(); ?></td>
                    <td><span class="product-image" style="background:url(<?php the_field('image'); ?>);"></span></td>
                    <td><?php the_field('code'); ?></td>
                    <td><?php the_field('description'); ?></td>
                    <td><?php the_field('cost_price'); ?></td>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                    <td><input type="button" class="add-row" name="add-row" value="Add"></td>
                </tr>
          </tbody>
            <?php $product_increment++; endforeach; ?>
        </table>    
      </div>
</div>

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.