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

*/

<?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’)

);

}

?>

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.

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>

:)

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;”

<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;”>

Yeah, Shiggy…where my games at?

global $wp_query;

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

$args = array(

“slug” => $cat_slug

);

global $wp_query;

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

echo $cat_slug

$args = array(

“slug” => $cat_slug

);

Sh-weet

categoryPageBanner($args);

<?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

}

?>

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

<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;”>

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";

}

<?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*/

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Review of InvArch project

How do we save time debugging?

Spring Boot GraphQL Quick Start Template

Scraping HTML with Nokogiri and Ruby

Create PDF using Angular 6 + Spring Boot + Thymeleaf

Going Cloud-first for the first time?Here’s the catch!

Smart Buffering — and the two types of player configurations

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)

More from Medium

Add a favicon to your Wordpress website using PHP

Favicon in Wordpress

How To Create A Custom Popup Modal In WordPress

WordPress: User Login Authentication Without Plugin

Modifying a query for a archive page in Wordpress