WooCommerce Shop Archive Image in Genesis using ACF Pro

In the comments section of How to overlay entry title on featured image in single Posts tutorial, a user asked:

...Now I have the opposite problem on the main shop page of woocommerce: the effect doesn’t work, the image doesn’t appear and the title remains in standard place...

This tutorial provides the steps to relocate the WooCommerce shop page title from top of the content area to below the header and having a full-width image background. We are going to add ACF Pro's image field on a custom settings page for product CPT and set it as the background image.

Thanks to Bill Erickson for sharing the code.

Screencast:

Step 1

Add the following in child theme's functions.php:

add_action( 'init', 'ea_acf_options_page' );
/**
 * ACF Options Page 
 *
 */
function ea_acf_options_page() {
    if ( function_exists( 'acf_add_options_sub_page' ) ) {
         acf_add_options_sub_page( array(
            'page_title' => 'CPT Settings',
            'parent'     => 'edit.php?post_type=product',
            'capability' => 'manage_options'
        ) );
    }
}

Step 2

Install and activate Advanced Custom Fields Pro.

Create a field group having an image field set to appear on CPT Settings options page or simply import this field group.

Step 3

Add the following in child theme's functions.php: