css WooCommerce Shop存档图像

Posted 2021-05-13

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'
        ) );
    }
}

// Register a image size for below-header image on shop page.
add_image_size( 'shop-image', 1600, 400, true );

add_action( 'genesis_after_header', 'sk_shop_image' );
function sk_shop_image() {
    // if this is not the WooCommerce shop page, abort.
    if ( ! is_shop() ) {
        return;
    }

    // get the `product_cpt_archive_image` image object.
    $image = get_field( 'product_cpt_archive_image', 'option' );

    if ( ! empty( $image ) ) { ?>
        <div class="shop-hero" style="background-image: url('<?php echo $image['url']; ?>')">
            <div class="wrap">
                <h1 class="page-title"><?php woocommerce_page_title(); ?></h1>
            </div>
        </div>

        <?php add_filter( 'woocommerce_show_page_title', '__return_false' ); ?>
    <?php }
}

.shop-hero {
    padding: 200px 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.shop-hero .page-title {
    margin-bottom: 0;
    color: #fff;
    background-color: rgba(0,0,0,.75);
    padding: 15px;
    text-transform: uppercase;
    display: inline-block;
}