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

Entitlement Engine with AppStore and GooglePlay — Part 1: Concepts

HTTP Request Methods: A Complete Guide

Translating ASN.1 BER Types to Modern C++

How String In .NET C# Works

All about String in DotNet (.NET) CSharp (C#). Immutable StringBuilder Memory Performance Optimization Optimisation thread Safe Copy Clone Stack Heap Code Coding Programming Software Design Development Engineering Architecture Best Practice

Cheap Kubernetes single node cluster using VPS and Ubuntu 18.04

Pandas : Get the rows that are not in another Data Frame.

Grasshopper-Tekla Live Link — find the closest object and add connection component

Must know Docker commands

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

Future Scope and Benefits of Laravel in Web Development

Why You Need a WordPress Developer for your New Site — Mania Developers

Why You Need a WordPress Developer.

How to use Wink (Laravel-Based Publishing Platform) in Laravel 9 to create a blogging application

How To Change WordPress Login URL Without A Plugin