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: