12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Oct 31, 2018

WooCommerce product category image as background with title overlay in Oxygen

Sridhar Katakam

In Oxygen's Facebook group, a user asks:

Anyone know of a way to call product category thumbnails for use as a background? Normal custom PHP functions don't seem to be enough looking at what solutions to call the image normally are suggested. https://docs.woocommerce.com/document/woocommerce-display-category-image-on-category-archive/

Or maybe there's an easier way I'm trying to create a dynamic archive title area with a background that shows the relevant image for each category.

We can

  • use `woocommerce_show_page_title` filter hook to conditionally remove the page title on product category archives
  • add a snippet with custom function based on the code given here that returns the product archive image URL if present or a placeholder image if not present and
  • use the PHP Function Return Value feature of Oxygen to set this image as the background for a Section in the Template that applies to WooCommerce product taxonomy archives.

Let us see how the above can be done in this members-only tutorial.

Backend:

Frontend:

Note: It is assumed that you have already set up WooCommerce, especially the Template for the product category and tag archives in Oxygen.

Step 1

Install and activate Code Snippets plugin.

Snippets > Add New.

Title: Remove WC page titles on product category archives

Code:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right