– A different kind of Product Overview Page
Typical WooCommerce shop pages look like this by default. Product tiles and a sidebar with categories and other stuff. When I wanted to do the product overview of the Islamic Zeitung (IZ), I didn’t feel like using the default view of WooCommerce store fronts, which look like this:
The IZ Shop has 3 types of products: subscription products with monthly recurring payment, books and voluntary donations to support this project, which is independently self-financed and not sponsored by any organization. Instead of the usual three-way categorization, I wanted to express the differences purely visually.
Visual Design of the 3 Product Categories
As a first deviation from the rest of the website, the layout spans the full width of the browser window. It doesn’t have a wrapper column limited by
max-width like the rest of the website. The 2 subscription products, which represent the newspaper’s core business, are generously displayed in the front row on patterned backgrounds. By the way, all product photos, except for the coffee cup below, were photographed and edited by ourselves. The stack of newspapers for the print subscription was even shot with a 6-year-old cell phone. The books were scanned with a standard 2D scanner.
The bottom row consists of the tipping and support products (Tip us a coffee and funding subscription). In between, the books are displayed in a slider carousel, which also works on smaller resolutions. On phones, only fewer books are displayed, but it’s the same HTML/CSS code for all resolutions. No special responsive features.
How to Create a Custom Shop Template in WooCommerce
Now to the technical side. The original WooCommerce shop template can be found at /plugins/woocommerce/templates in archive-product.php. To overwrite it, you just have to copy the
archive-product.php file to your theme folder
[your-theme/woocommerce/archive-product.php] and then edit it from there. (More about WooCommerce’s document structure).
You can delete or comment out the original code with the
woocommerce_product_loop() statement, because with this custom design, looped product tiles are not needed.
Using a product shortcode, you can now select the top and bottom 2 products specifically by product ID.
[products ids="1,2" columns="2" class="whatever"]
I moved the product slider for the books to another template, which basically does the same thing. The only difference is that the books are selected by category ID:
[products category="3,4" columns="1" class="whatever"]
This is what it looks like in the current version:
You should make use of these options if you want to design a shop that stands out a little from the others. Instead of presenting taxonomies like product categories in an abstract way with a link list in the sidebar, you can also weight them visually.
About the Author
[mslm dvlpmnt] is delivering custom website design and development since 1998.
He has worked as a lead frontend developer, UX and Accessibility consultant and UI architect in several big companies across Germany and in Istanbul.
Currently he works independently as a freelancer.
You can also find him on 𝕏 at https://twitter.com/ghetto_muslim