I am developing a new theme and have tired out my brain all morning as to why this is not working. Please can someone guide me on how I can include files into the WooCommerce homepage.
It is my understanding that WooCommerce utilises the Archive-product.php template to generate the homepage layout. I have copied this into the theme folder like it says in the documentation at the top of the archive-product.php file (to avoid updates breaking my store).
So this file is now stored here: /theme-name/woocommerce/archive-product.php.
If I make a simple change like typing 'Hello World!' into the document it is reflected on page reload.
However if I try to include a file that is making use of Advanced Custom Fields (ACF) it doesn't show these changes.
I have double and triple checked the ACF's. They do exist on the site, they are populated with content.
Please help me successfully make the include to the file, and pull through the appropriate pages data for the ACF's.
ARCHIVE-PRODUCT.PHP:
I have placed this code into the template where upon testing a simple change such as adding the phrase 'Hello World!' would show on the page when reloaded (when it echo's the link - it appears correct):
<?php
$heroslider = get_template_directory_uri() . "/template-parts/hero-slider.php";
echo $heroslider;
include_once($heroslider); ?>
HERO-SLIDER.PHP:
This snippet would at the very least show the 'Hello World!', even if the fields are not populated. Yet it has no effect:
Hello World!
<?php
$has_hero_slider = get_field('has_hero_slider');
if( $has_hero_slider === TRUE ): ?>
<style>
</style>
<div class="hero-section">
Can anyone see what the error is with how I am trying to pull through this template-part?
EDIT (More specific information regarding ACF's):
HERO-SLIDER.PHP:
Hello World!
<?php
$has_hero_slider = get_field('has_hero_slider');
if( $has_hero_slider === TRUE ): ?>
<style>
</style>
<div class="hero-section">
<?php
$hero_slides = get_field('hero_slides');
if( $hero_slides != '' ): ?>
<div id="hero-slider" class="hero-slider">
<?php
while( have_rows('hero_slides') ): the_row();
$hero_slide_title = get_sub_field('hero_slide_title');
$hero_slide_content = get_sub_field('hero_slide_content');
$hero_slide_button = get_sub_field('hero_slide_button');
$hero_slide_image = get_sub_field('hero_slide_image'); ?>
<div class="hero-slide"<?php if($hero_slider_image != '') : ?> style="background-image:url(<?php echo $hero_slide_image; ?>);"<?php endif; ?>>
<?php
while( have_rows('hero_slide_title') ): the_row();
$hero_slide_title_text = get_sub_field('hero_slide_title_text');
$hero_slide_title_color = get_sub_field('hero_slide_title_color'); ?>
<?php if($hero_slide_title_text != '') : ?>
<div class="hero-slide-title"<?php if($hero_slide_title_color != '') : ?> style="color:<?php echo $hero_slide_title_color; ?>;"<?php endif; ?>>
<?php echo $hero_slide_title_text; ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php
while( have_rows('hero_slide_content') ): the_row();
$hero_slide_content_text = get_sub_field('hero_slide_content_text');
$hero_slide_content_color = get_sub_field('hero_slide_content_color'); ?>
<?php if($hero_slide_content_text != '') : ?>
<div class="hero-slide-text"<?php if($hero_slide_content_color != '') : ?> style="color:<?php echo $hero_slide_content_color; ?>;"<?php endif; ?>>
<?php echo $hero_slide_content_text; ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php
while( have_rows('hero_slide_button') ): the_row();
$hero_slide_button_text = get_sub_field('hero_slide_button_text');
$hero_slide_button_link = get_sub_field('hero_slide_button_link');
$hero_slide_button_background_color = get_sub_field('hero_slide_button_background_color');
$hero_slide_button_border_color = get_sub_field('hero_slide_button_border_color');
$hero_slide_button_font_color = get_sub_field('hero_slide_button_font_color'); ?>
<?php if($hero_slide_button_text != '') : ?>
<div class="hero-slide-button" style="<?php if($hero_slide_button_background_color != '') : ?>background-color:<?php echo $hero_slide_button_background_color; ?>;<?php endif; ?><?php if($hero_slide_button_border_color != '') : ?>border-color:<?php echo $hero_slide_button_border_color; ?>;<?php endif; ?><?php if($hero_slide_button_font_color != '') : ?>color:<?php echo $hero_slide_button_font_color; ?>;<?php endif; ?>">
<?php if($hero_slide_button_link != '') : ?>
<a href="<?php echo $hero_slide_button_link; ?>" class="box-link"></a>
<?php endif; ?>
<?php echo $hero_slide_content_text; ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
Image of the Hero Slider Custom Fields:
Image of Homepage using the ACF's:
My thoughts are (because I am confident in my ACF usage) that the homepage is not the homepage for WooCommerce. However, this may also be a silly thought as when I am on the homepage and click edit page in the WP admin bar, it gives me the homepage to edit.
EDIT (SOLUTION): You must specify the page ID with the field you are wanting to use:
<?php
if(is_shop()) {
$id = woocommerce_get_page_id('shop');
} else {
$id = $post->ID;
}
$has_hero_slider = get_field('has_hero_slider', $id);
if( $has_hero_slider === TRUE ): ?>
<style>
</style>
<div class="hero-section">
<?php
$hero_slides = get_field('hero_slides', $id);
if( $hero_slides != '' ): ?>
<div id="hero-slider" class="hero-slider">
<?php
while( have_rows('hero_slides', $id) ): the_row();
Thanks, Jason.
I am developing a new theme and have tired out my brain all morning as to why this is not working. Please can someone guide me on how I can include files into the WooCommerce homepage.
It is my understanding that WooCommerce utilises the Archive-product.php template to generate the homepage layout. I have copied this into the theme folder like it says in the documentation at the top of the archive-product.php file (to avoid updates breaking my store).
So this file is now stored here: /theme-name/woocommerce/archive-product.php.
If I make a simple change like typing 'Hello World!' into the document it is reflected on page reload.
However if I try to include a file that is making use of Advanced Custom Fields (ACF) it doesn't show these changes.
I have double and triple checked the ACF's. They do exist on the site, they are populated with content.
Please help me successfully make the include to the file, and pull through the appropriate pages data for the ACF's.
ARCHIVE-PRODUCT.PHP:
I have placed this code into the template where upon testing a simple change such as adding the phrase 'Hello World!' would show on the page when reloaded (when it echo's the link - it appears correct):
<?php
$heroslider = get_template_directory_uri() . "/template-parts/hero-slider.php";
echo $heroslider;
include_once($heroslider); ?>
HERO-SLIDER.PHP:
This snippet would at the very least show the 'Hello World!', even if the fields are not populated. Yet it has no effect:
Hello World!
<?php
$has_hero_slider = get_field('has_hero_slider');
if( $has_hero_slider === TRUE ): ?>
<style>
</style>
<div class="hero-section">
Can anyone see what the error is with how I am trying to pull through this template-part?
EDIT (More specific information regarding ACF's):
HERO-SLIDER.PHP:
Hello World!
<?php
$has_hero_slider = get_field('has_hero_slider');
if( $has_hero_slider === TRUE ): ?>
<style>
</style>
<div class="hero-section">
<?php
$hero_slides = get_field('hero_slides');
if( $hero_slides != '' ): ?>
<div id="hero-slider" class="hero-slider">
<?php
while( have_rows('hero_slides') ): the_row();
$hero_slide_title = get_sub_field('hero_slide_title');
$hero_slide_content = get_sub_field('hero_slide_content');
$hero_slide_button = get_sub_field('hero_slide_button');
$hero_slide_image = get_sub_field('hero_slide_image'); ?>
<div class="hero-slide"<?php if($hero_slider_image != '') : ?> style="background-image:url(<?php echo $hero_slide_image; ?>);"<?php endif; ?>>
<?php
while( have_rows('hero_slide_title') ): the_row();
$hero_slide_title_text = get_sub_field('hero_slide_title_text');
$hero_slide_title_color = get_sub_field('hero_slide_title_color'); ?>
<?php if($hero_slide_title_text != '') : ?>
<div class="hero-slide-title"<?php if($hero_slide_title_color != '') : ?> style="color:<?php echo $hero_slide_title_color; ?>;"<?php endif; ?>>
<?php echo $hero_slide_title_text; ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php
while( have_rows('hero_slide_content') ): the_row();
$hero_slide_content_text = get_sub_field('hero_slide_content_text');
$hero_slide_content_color = get_sub_field('hero_slide_content_color'); ?>
<?php if($hero_slide_content_text != '') : ?>
<div class="hero-slide-text"<?php if($hero_slide_content_color != '') : ?> style="color:<?php echo $hero_slide_content_color; ?>;"<?php endif; ?>>
<?php echo $hero_slide_content_text; ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php
while( have_rows('hero_slide_button') ): the_row();
$hero_slide_button_text = get_sub_field('hero_slide_button_text');
$hero_slide_button_link = get_sub_field('hero_slide_button_link');
$hero_slide_button_background_color = get_sub_field('hero_slide_button_background_color');
$hero_slide_button_border_color = get_sub_field('hero_slide_button_border_color');
$hero_slide_button_font_color = get_sub_field('hero_slide_button_font_color'); ?>
<?php if($hero_slide_button_text != '') : ?>
<div class="hero-slide-button" style="<?php if($hero_slide_button_background_color != '') : ?>background-color:<?php echo $hero_slide_button_background_color; ?>;<?php endif; ?><?php if($hero_slide_button_border_color != '') : ?>border-color:<?php echo $hero_slide_button_border_color; ?>;<?php endif; ?><?php if($hero_slide_button_font_color != '') : ?>color:<?php echo $hero_slide_button_font_color; ?>;<?php endif; ?>">
<?php if($hero_slide_button_link != '') : ?>
<a href="<?php echo $hero_slide_button_link; ?>" class="box-link"></a>
<?php endif; ?>
<?php echo $hero_slide_content_text; ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
Image of the Hero Slider Custom Fields:
Image of Homepage using the ACF's:
My thoughts are (because I am confident in my ACF usage) that the homepage is not the homepage for WooCommerce. However, this may also be a silly thought as when I am on the homepage and click edit page in the WP admin bar, it gives me the homepage to edit.
EDIT (SOLUTION): You must specify the page ID with the field you are wanting to use:
<?php
if(is_shop()) {
$id = woocommerce_get_page_id('shop');
} else {
$id = $post->ID;
}
$has_hero_slider = get_field('has_hero_slider', $id);
if( $has_hero_slider === TRUE ): ?>
<style>
</style>
<div class="hero-section">
<?php
$hero_slides = get_field('hero_slides', $id);
if( $hero_slides != '' ): ?>
<div id="hero-slider" class="hero-slider">
<?php
while( have_rows('hero_slides', $id) ): the_row();
Thanks, Jason.
Share Improve this question edited Jan 24, 2020 at 15:00 Jason Is My Name asked Jan 24, 2020 at 11:39 Jason Is My NameJason Is My Name 3782 gold badges7 silver badges21 bronze badges1 Answer
Reset to default 0You cannot include template files via URL, which is what get_template_directory_uri() returns. You need to use the server file path, which you get get with get_theme_file_path():
$heroslider = get_theme_file_path( 'template-parts/hero-slider.php' );
echo $heroslider;
include_once( $heroslider );
However, if you're including templates (rather than files with function/class definitions), you should use get_template_part() to get the correct path and include it in one go (just leave out the file extension):
get_template_part( 'template-parts/hero-slider' );