Dividing products into categories within WordPress

I am creating a custom WordPress theme for a client and they want a faux ecommerce site. They aren't ready to handle payments so I am not giving them a woocommerce site.

At the moment they have 4 four different product categories but want the ability to expand as they please. I want to create one page template that sorts products by category.

To this point, I have been storing the title function in a variable and comparing it the category dropdown that is set up with the plugin Advanced Custom Fields. I must be doing something wrong because my if statements are all returning false. My code is below. What am I doing wrong to have them all return false when the title of page matches the category type perfectly? Is there a better way to do this?

<?php /Template Name: Product Pages/ get_header(); ?> <!-- <p>This is page-productContact.php</p> --> <section> <div class="row"> <div class="small-12 medium-12 large-12 small-centered"> <?php if (have_posts() ) : while (have_posts() ) :the_post(); ?> <h1 class="column"><?php the_title();?></h1> <?php $title = get_the_title();?> <?php endwhile; endif?>

        <?php

            $args = array(
                'post_type' => 'add_product'
            );
            $the_query = new WP_Query($args);

        ?>


        <?php if (have_posts() ) : 
            while ($the_query->have_posts() ) : 
                $the_query->the_post(); 
                    $product_category = the_field('product_category');

        ?>
        <!-- <div class="small-12 medium-4 large-4 columns"> -->

    <p>

                <?php 

                    if ($title == $product_category) : 
                        //
                        echo "The variables match.";

                ?>

                <?php else: 
                    echo "The variables don't match.";
                ?>
                <?php endif;?>

    </p>
            <?php endwhile; else: ?>
        <?php endif ?>
    </div>
</div>

</section> <section class="section"> <div class="row"> <div class="large-12 column"> <?php if (have_posts() ) : while (have_posts() ) :the_post(); ?> <h1><?php the_content();?></h1> <?php endwhile; endif?> </div> </div> </section> <?php get_footer(); ?>