Published on Jun 11, 2020

Product Category Drilldown for WooCommerce in Oxygen

Sridhar Katakam

Updated on August 05, 2020

This members-only tutorial provides the steps to set up the WooCommerce Shop page and product category archives in Oxygen.

We shall display the non-empty parent categories on the Products page.

On product archives, products that belong to only that category will be set to appear and below that, a grid of direct subcategories. The user can drilldown further to any subcategories if present and if not, to the product grid.

Note: For a more robust/different implementation, consider this plugin instead.

Step 1 - Shop page

Create/Edit the Template that applies to product CPT archive. You may want to set it to inherit from the Main catch all Template and set a priority of 1 or higher depending on whether there is a generic Template that applies to all the archives.

Edit it with Oxygen.

Add a Section for the page header.

Text Color: #ffffff

Background Color: #566d8f

At Advanced > Background
Background Image: <select your desired image>
Image Overlay Color: rgba(86,109,143,0.7)
Background Repeat: no-repeat
Left: 50%, Top: 50%

Add a Code Block inside the Section.

PHP & HTML:

This is a premium members-only content.

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

Already a member? Log in below or here.

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