WooCommerce product category image as background with title overlay in Oxygen

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: