How to Add a Background to Categories in the WordPress Storefront Theme without Plugins

“WOW”…said no one ever.
“Oh…I’ve been meaning to get a hike in and I am flying to Sarasaland, let me throw some money at these cats cuz they might be able to fit me with some dope, sturdy threads made to withstand the elements”
  1. Make a Child Theme
  1. functions.php
  2. style.css

/*!

Theme Name: Storefront Child

Template: storefront

*/

These are the minimum lines you need in your style.css file for this to work.

<?php

add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );

function my_theme_enqueue_styles() {

$parent_style = ‘storefront’; // This is ‘storefront’ for the Storefront theme.

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );

wp_enqueue_style( ‘child-style’,

get_stylesheet_directory_uri() . ‘/style.css’,

array( $parent_style ),

wp_get_theme()->get(‘Version’)

);

}

?>

This basically sets up your new child-theme, allowing you to fall back on the parent theme (“storefront”) and letting you use any custom styling rules you may write in your child-theme’s style.css file with CSS or what have you.

We can see that our class area for the page title is “woocommerce-products-header__title”

* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.

3. Setup your child theme to properly display your version of this file

You little ingrate!

It should basically look like this:

<header class=”woocommerce-products-header”>

<section class=“woocommerce-header-background”>

<?php if ( apply_filters( ‘woocommerce_show_page_title’, true ) ) : ?>

<h1 class=”woocommerce-products-header__title page-title”>

<?php woocommerce_page_title();?>

sucks, where the videogames at?

</h1>

<?php endif; ?>

<?php

/**

* Hook: woocommerce_archive_description.

*

* @hooked woocommerce_taxonomy_archive_description — 10

* @hooked woocommerce_product_archive_description — 10

*/

do_action( ‘woocommerce_archive_description’ );

?>

</section>

</header>

Fire up your site again and if you open inspector tools and hover around over that area with the insolent text, you’ll notice something: your section you just made is wrapping the innards of all the stuff that was there before:

:)

style=”background: linear-gradient(transparent, #ffffff), url(‘https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2018/09/12/105447212-1536781636091mariomiyamoto-gettyimages-154746064.1910x1000.jpg?v=1536781772'); padding: 5vw; color: black; background-size: cover; padding-top: 10vw;”

The final line should look like this:

<section class=’woocommerce-header-background’ style=”background: linear-gradient(transparent, #ffffff), url(‘https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2018/09/12/105447212-1536781636091mariomiyamoto-gettyimages-154746064.1910x1000.jpg?v=1536781772'); padding: 5vw; color: black; background-size: cover; padding-top: 10vw;”>

I have utilized a linear-gradient combining transparency and the color white with an additional argument of a photo of Shigeru Miyamoto and Mario & Luigi. Also, there are some padding rules to set up the section the way I like, I’ve ensured the text is black, and I’ve made sure that the background-size covers the size of the section tag, because repeating images would look silly. Do all this, refresh your page after saving and you should see this:

Yeah, Shiggy…where my games at?

global $wp_query;

$cat_slug = $wp_query->query_vars[‘product_cat’];

$args = array(

“slug” => $cat_slug

);

Um…what?

global $wp_query;

$cat_slug = $wp_query->query_vars[‘product_cat’];

echo $cat_slug

$args = array(

“slug” => $cat_slug

);

And then refresh…you’ll see the slug in the upper left hand corner.

Sh-weet

categoryPageBanner($args);

This is a function we are calling (which we are about to create) that takes the $args variable we just made as an argument.

<?php

function categoryPageBanner($args){

?>

/*Paste the HTML in here so it looks like this:*/

<header class=”woocommerce-products-header”>

<section class=’woocommerce-header-background’ style=”background: linear-gradient(transparent, #ffffff), url(‘https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2018/09/12/105447212-1536781636091mariomiyamoto-gettyimages-154746064.1910x1000.jpg?v=1536781772'); padding: 5vw; color: black; background-size: cover; padding-top: 10vw;”>

<?php if ( apply_filters( ‘woocommerce_show_page_title’, true ) ) : ?>

<h1 class=”woocommerce-products-header__title page-title”>

<?php woocommerce_page_title();?>

sucks, where the videogames at?

</h1>

<?php endif; ?>

<?php

/**

* Hook: woocommerce_archive_description.

*

* @hooked woocommerce_taxonomy_archive_description — 10

* @hooked woocommerce_product_archive_description — 10

*/

do_action( ‘woocommerce_archive_description’ );

?>

</section>

</header>

<?php

}

?>

If you refresh now, you should be able to see the same thing as before. Now I want you to go to the inline styling we did in the section tag and clear out the contents of the url portion where we pasted that long image location address and instead place the following inside the parentheses:

<?php echo $args[‘photo’];?>

The line should look like this now:

<section class=’woocommerce-header-background’ style=”background: linear-gradient(transparent, #ffffff), url(<?php echo $args[‘photo’];?>); padding: 5vw; color: black; background-size: cover; padding-top: 10vw;”>

What’s happening here is that we are having the function load up our HTML for us and we drop into PHP to enter the url of the background image that we want with the value of whatever the key ‘photo’ is pointing to in our $args array.

if($args[‘slug’] == ‘clothing’) {

$args[‘photo’] = “https://longreadsblog.files.wordpress.com/2017/05/34474444071_827d60d72d_o.jpg?w=1200";

}

if($args[‘slug’] == ‘food’){

$args[‘photo’] = “https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/1024px-Good_Food_Display_-_NCI_Visuals_Online.jpg";

}

if($args[‘slug’] == ‘fish’) {

$args[‘photo’] = “http://scibosnian.com/wp-content/uploads/2017/12/Grilled_Fish_Fillets_1.jpg";

}

if($args[‘slug’]== ‘alcohol’){

$args[‘photo’] = “http://ichef.bbci.co.uk/images/ic/640x360/p03r1528.jpg";

}

if($args[‘slug’] == ‘clothing-men’){

$args[‘photo’] = “https://filson.imgix.net/media/wysiwyg/campaign/902/20190201a/store-front/mens/cb2_filson_mens_vests.jpg?auto=format%2Ccompress&fit=max&ixlib=php-1.1.0&w=1920";

}

We set up some if statements where if the $arg’s “slug” key is “alcohol”, then we drop into a block where we define the $arg’s “photo” key as a particular link to a photo. We do this for each of our categories.

<?php

function categoryPageBanner($args){

if($args[‘slug’] == ‘clothing’) {

$args[‘photo’] = “https://longreadsblog.files.wordpress.com/2017/05/34474444071_827d60d72d_o.jpg?w=1200";

}

if($args[‘slug’] == ‘food’){

$args[‘photo’] = “https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/1024px-Good_Food_Display_-_NCI_Visuals_Online.jpg";

}

if($args[‘slug’] == ‘fish’) {

$args[‘photo’] = “http://scibosnian.com/wp-content/uploads/2017/12/Grilled_Fish_Fillets_1.jpg";

}

if($args[‘slug’]== ‘alcohol’){

$args[‘photo’] = “http://ichef.bbci.co.uk/images/ic/640x360/p03r1528.jpg";

}

if($args[‘slug’] == ‘clothing-men’){

$args[‘photo’] = “https://filson.imgix.net/media/wysiwyg/campaign/902/20190201a/store-front/mens/cb2_filson_mens_vests.jpg?auto=format%2Ccompress&fit=max&ixlib=php-1.1.0&w=1920";

}

?>

<header class=”woocommerce-products-header”>

<section class=’woocommerce-header-background’ style=”background: linear-gradient(transparent, #ffffff), url(<?php echo $args[‘photo’];?>); padding: 5vw; color: black; background-size: cover; padding-top: 10vw;”>

<?php if ( apply_filters( ‘woocommerce_show_page_title’, true ) ) : ?>

<h1 class=”woocommerce-products-header__title page-title”><?php woocommerce_page_title(); ?></h1>

<?php endif; ?>

<?php

/**

* Hook: woocommerce_archive_description.

*

* @hooked woocommerce_taxonomy_archive_description — 10

* @hooked woocommerce_product_archive_description — 10

*/

do_action( ‘woocommerce_archive_description’ );

?>

</section>

</header>

<?php }

/*the rest of the code*/

9. Success

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adrian Rosales

Adrian Rosales

is a web developer, opera singer, actor, and lover of cats. (adrian-rosales.tech)