– 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:

Demo of the default WooCommerce store front
Demo of the default WooCommerce store front

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"]

Screenshot of the actual code snippet
Screenshot of the actual code snippet

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"]

Screenshot of the actual code snippet
Screenshot of the actual code snippet

This is what it looks like in the current version:

Screenshot of the actual IZ store front in desktop browsers
Screenshot of the actual IZ store front in desktop browsers
Screenshot of the actual IZ store front in mobile phones
Screenshot of the actual IZ store front in mobile phones

Conclusion

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]

[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

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Sign In

Register

Reset Password

Please enter your username or email address, you will receive a link to create a new password via email.