ACF & WooCommerce possible conflict when using page rule (shop)

• stucow

• December 4, 2020 at 1:04 pm

I have created a slider hero for the woocommerce.php template as well as repeater field with ACF that allows a user to insert additional slides to the slider with a rule that will only display the hero on the shop page.

I have then created a template part that displays the hero so I don’t clogging up the woocommerce.php template with extra code.

At that stage I had not yet added any products to my store and the hero is displaying and working as expected with the WooCommerce notice saying there is no products in the store, great, or so I thought.

After completing the hero, I went ahead and added my first product to the store and guess what, the hero has completely disappeared. Now I’m left wondering how can I fix this? I have removed all of the CPT scripting and just echoed out a test message to see if the template is loading correctly and as expected it is, I see the test message echoed to the top of the store, where the hero should be.

I’ve been at trying to get this working for an hour now and I can’t seem to come across anything that stands out to me. I have included the hero template part as well as the woocommerce.php template.

woocommerce.php

<?php
/**
 * The template for displaying WooCommerce
 * 
 * @package StuCowley
 * @subpackage bellezashop
 * @since 1.0.0
 */

get_header();

get_template_part( 'template-parts/hero/shop-hero' );
?>

<div class="sc-page-content">
  <?php woocommerce_content(); ?>
</div><!-- /.sc-page-content -->

<?php
get_footer();

shop-hero.php

<?php
/**
 * Template part for displaying the frontpage hero.
 * 
 * @package StuCowley
 * @subpackage bellezashop
 * @since 1.0.0
 */

if ( have_rows( 'hero_slide' ) ) :
  while ( have_rows( 'hero_slide' ) ) : the_row();
    
    $headlineHeading = get_sub_field( 'headline_heading' );
    $headlineParagraph = get_sub_field( 'headline_paragraph' );
    
    $primaryBtnTitle = get_sub_field( 'primary_button_title' );
    $primaryBtnLink = get_sub_field( 'primary_button_link' );

    $secondaryBtnTitle = get_sub_field( 'secondary_button_title' );
    $secondaryBtnLink = get_sub_field( 'secondary_button_link' );
    
    $bgImg = get_sub_field( 'background_image' );
    $bgImgOverlay = get_sub_field( 'background_overlay' );
    $bgColour = get_sub_field( 'background_colour' );
    $bgTextColour = get_sub_field( 'background_text_colour' );

    // If the hero has a background image, echo the image
    if ( $bgImg ) {
?>

<div id="shop-hero-slider">
  <section class="sc-hero-feature" style="background-image: url('<?php echo $bgImg; ?>'); background-color: <?php echo $bgImgOverlay; ?>; color: <?php echo $bgTextColour; ?> !important;">

  <?php 
  // Else if there is no background image applied, use the set background colour
  } elseif( $bgColour ) { 
  ?>

  <section class="sc-hero-feature" style="background-color: <?php echo $bgColour; ?>">

  <?php } ?>
    <div class="carousel-cell">
      <div class="sc-hero-feature-container">
        <h2 style="color: <?php echo $bgTextColour; ?>">
          <?php echo $headlineHeading; ?>
        </h2>

        <p style="color: <?php echo $bgTextColour; ?>">
          <?php echo $headlineParagraph; ?>
        </p>

        <?php if ( $primaryBtnTitle ) { ?>
        <div class="sc-hero-feature-btn-group">
          <div>
            <a href="<?php echo $primaryBtnLink; ?>" class="sc-hero-feature-btn sc-hero-feature-btn-primary">
              <?php echo $primaryBtnTitle; ?>
            </a>
          </div>
        <?php } ?>

        <?php if ( $secondaryBtnTitle )  { ?>
          <span></span>

          <div>
            <a href="<?php echo $secondaryBtnLink ?>" class="sc-hero-feature-btn sc-hero-feature-btn-secondary">
              <?php echo $secondaryBtnTitle ?>
            </a>
          </div>
        </div><!-- /.sc-hero-feature-btn-group -->
        <?php } ?>
      </div><!-- /.sc-hero-feature-container -->
    </div><!-- /.carousel-cell -->
  </section><!-- /.sc-hero-feature -->

  <?php
  endwhile;
  endif;
  
  wp_reset_postdata();
  ?>
</div><!-- /#shop-hero-slider -->

I’ve been backwards and forwards, re-typing checking for typos and I have come up empty. Is this feature even possible or is WooCommerce and ACF not going to play nice on this?

• John Huebner

• December 12, 2020 at 6:24 am

Where are these fields located? What post? Options Page?

What page is being shown? What template is being used? Post? Archive?

Try included the post ID of the post the fields are connected to.

// set $post_id to the location of the repeater field
if ( have_rows( 'hero_slide', $post_id ) ) :
  while ( have_rows( 'hero_slide', $post_id ) ) : the_row();