I’ve used two new techniques in creating this collection: parallax design and sorting items by tags (not categories).
- My products were becoming commingled and I needed to start putting them into collections. I focus on a theme in my store for a bit and then change it up. So far, I’ve focused on outer space and am now wrapping up a series of items about jellyfish and octopuses (I know, eclectic, but heh, it’s my site). Woocommerce’s SHOP page is a problem since you can’t really fuss with it, nor break out items within a category.
- I needed a way to identify each collection as unique while leaving the base database of all items alone. Design-wise, it was fun trying different techniques that allowed me to retain the unique voice and tone of the site that I’m creating.
NOTE: I Live on Planet Divi
It’s important to note that I’m using the Divi theme (and all it’s weird and sometimes frustrating features). I do use other themes and find that I can’t really apply any technique across the board, but… it’s worth a try even if the functions are labeled differently.
1. Sorting Products for Idiots (Like Me)
I hurt my head banging it against the wall on this one. All my products are in one database, of course. I’ve been a good boy by dutifully categorizing and tagging them. For the life of me, I could not understand how to get all of the outer space-related items separated from, say, the inner-space related ones. Since the SHOP page in WooCommerce is notoriously a huge, uncompromising bitch, I spent hours trying to plug-in my way around it. I started sweating thinking about building custom CSS. I nearly passed out when it seemed like Java was the route. Of course, the answer was simple, if inelegant:
I tagged (not categorized) all the products with a common term. So, in this case, “JPL.” You can have other tags for other reasons, but as long as that tag is present, we’re good to go:
PROS: Easy sneezy, no need for Xanax. Gets the job done.
CONS: The list supplied is unfiltered, so if you have a lot of products, it generates a long page scroll.
2. True Parallax vs. CSS Parallax
I was offered the option of using True Parallax vs. CSS Parallax. Not knowing the difference, I’ve started playing with both. Generally (and I mean generally), True Parallax keeps your background image fixed, whereas CSS Parallax nudges the background as you scroll down with the text or other elements scrolling at a faster rate. Both the Jupiter and Mars images in the Outer Space Collection are CSS Parallax, while the Enceladus image is True Parallax simply because the image is smaller.
Generally speaking, the larger the image, the more likely CSS Parallax will work better (or look more appealing). For much more detailed explanation, check out this much better-written example at Elegant Themes’ blog: Ultimate Guide to Using Parallax with Divi
cgk.ink develops, maintains and grows ecommerce sites for fashion, decor, design and other companies. I am attempting to create a site that both serves as a learning tool for business owners and other designers/developers. I truly welcome your comments below or by using my contact form.