Advanced Custom Fields Repeater – How to reverse order (WordPress)

1 Views

I’m using the advanced custom fields repeater plugin to create a a big grid of images with links. I would like the newest items I create at the top, so what I’m asking is how do I reverse the the order via the code?

Any help would be great. Here is my current code

<?php if( have_rows('shop_product') ):        

            while ( have_rows('shop_product') ) : the_row(); 

        ?>

                <div class="shop-item">
                    <div class="image-hover">
                        <div class="image-hover-inner">

                            <img src="<?php the_sub_field('product_image');?>">

                            <div class="image-caption">
                            <div class="image-caption-inner">
                            <a href="<?php the_sub_field('product_url');?>" target="_blank"><?php the_sub_field('product_brand');?><br>
                            Buy Now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        <?php endwhile; 
        else :
        endif;
        ?>
Post Views: 1

Related posts

Leave a Reply

3 comments

  1. You can use get_field('my_repeater') to get the repeater fields as an array which you can loop over.

    Then using PHP’s array_reverse() function, you get a reversed array you can loop over.

    The only difference is you have to access the fields as array keys rather than using ACF’s sub_field functions.

    For your example:

    <?php $products = array_reverse(get_field('shop_product'));

foreach ($products as $product): ?>

    <img src="<?php echo $product['product_image']; ?>">
    <a href="<?php echo $product['product_url']; ?>">Buy now</a>

<?php endforeach; ?>

  2. It may not answer the actual question, but may solve the problem.
    If you are displaying rows of repeater, you could use CSS display:flex together with flex-flow:row/column-reverse;

    As it may only be necessary to swap order to DISPLAY it

    Example:

    display:flex;
flex-flow:row-reverse;

  3. off the top of my head, using output buffer – not the cleanest way though

    <?php $outs = array(); if( have_rows('shop_product') ):        

            while ( have_rows('shop_product') ) : the_row();  ob_start();

        ?>

                <div class="shop-item">
                    <div class="image-hover">
                        <div class="image-hover-inner">

                            <img src="<?php the_sub_field('product_image');?>">

                            <div class="image-caption">
                            <div class="image-caption-inner">
                            <a href="<?php the_sub_field('product_url');?>" target="_blank"><?php the_sub_field('product_brand');?><br>
                            Buy Now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        <?php $outs[] = ob_get_clean(); endwhile; 
        else :
        endif;
        $outs = array_reverse($outs);
        echo implode($outs);
        ?>