First of all, you can use the_field() and you should check if a field exists. Second change all quotation marks… use ‘ or use ” …
<?php
$args = array(
'post_type' => 'products', // post type slug
'post_status' => 'publish', // post status
'posts_per_page' => '10' // if not set, you can use the wp-admin settings -> read
);
// posts per page are only showing 10 posts here... you need to setup an pagination, if you want to show more!
$products_loop = new WP_Query( $args );
if( $products_loop->have_posts() ) :
while ( $products_loop->have_posts() ) : $products_loop->the_post();
?>
<div class="product">
<!-- two times the same image? just place the post thumbnail, if exists (wordpress default, no acf) -->
<?php if( has_post_thumbnail() ): ?>
<!-- the post thumbnail (wordpress default, no acf) -->
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<!-- post title, name (wordpress default, no acf) -->
<h2><?php the_title(); ?></h2>
<!-- two times the same image? just place the acf image here -->
<?php if( get_field( 'product_image' ) ): ?>
<img src="<?php the_field( 'product_image' ); ?>" alt="product-detail" class="product-detail align-right" />
<?php endif; ?>
<!-- post content (wordpress default, no acf) -->
<?php the_content(); ?>
<!-- download field is filled or exists? -->
<?php if( get_field('download') ): ?>
<p><a href="<?php the_field('download'); ?>" target="_blank" name="Spec Sheet">Download Spec Sheet</a></p>
<?php endif; ?>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;
And if you create an image field with ACF, you can choose how something is output. So you can decide if an array() or the direct image path is output. If you choose an array(), you can also use the alt tags of the image.
Usefull links:
has_post_thumbnail()
the_post_thumbnail()
the_field()
get_field()
PHP: Strings
