Recently I was asked to help out a local shop to develop a new WordPress site with WooCommerce. This is normally a super simple, straightforward task, but this one had a catch (don’t they always?).
The customer had a requirement for “Team Stores” wherein they make custom products for Teams (ie local high school) where teams have products that are not displayed in the regular shop. This means they need to be able to add teams, show a list of all teams with logos, and then have shops that only display team products.
Approach – WooCommerce Extension
To approach this requirement I decided to develop a WooCommerce Extension plugin for a few reasons but mainly so that the “Product Teams” features would be portable to any theme that the client chooses now and also in the future, ie the client won’t be locked into one highly custom theme that has their business logic in it. It’s always much better to separate business logic from display wherever possible and this is no exception.
Intro WooCommerce Product Teams
The plugin solution involves several different pieces including a new ‘teams’ taxonomy for WooCommerce Products’ custom post type, custom taxonomy meta for the new teams taxonomy to support Team Logos, and overriding the default products query to filter out team products. The most interesting part of this plugin is registering a new taxonomy for WooCommerce Products and then overriding the product’s query without editing a theme, let’s see how these can be done.
The next semi-challenging thing I needed to do was filter out the “Team Products” from the regular shop without editing the WooCommerce template files or adding any new templates to the theme. To do this, the pre_get_posts action perfectly fits the task to help us override the products query. Note – pre_get_posts overrides all queries on the frontend and backend, so you’ll need to be careful and use some logic on when and where you use this.
Here is the full function that allows us to override the query only on the frontend and also only on the shop index, category and tag archive pages.
The end result is that I was able to register the teams taxonomy and control how they are displayed on the frontend in a theme agnostic manner. Here is a link to the full plugin on github – WooCommerce Product Teams. Enjoy!
A complex system that works is invariably found to have evolved from a simple system that worked. The inverse proposition also appears to be true: a complex system designed from scratch never works and cannot be made to work. You have to start over, beginning with a simple system.”
Working with logos sometimes requires the logo be a perfect square to work with the design style. The tricky part is that logos normally aren’t square at all, most are rectangular and no matter how you crop it, getting a perfect square normally ends up cutting part of the logo off. We also really don’t want to put the extra burden on the user to upload a perfect square or try to get them to use a standard image cropper to cut their own logo because it always comes out messy.
This is normally what happens when we try to resize or crop a logo.
On the other hand, what we really want is a logo placed on a square canvas that matches the logos background color. Lets see what that looks like.
In this second example, we resized the logo first, and then filled the background of the canvas matching the color of the original logo image.
For a Django project I was working on, I wasn’t able to find any out-of-the-box solutions to do this, so I had to start with an existing image thumbnail generator and extend it to do the dynamic
How to Resize and Dynamically Background Fill
Below is an example LogoProcessor class that extends Django ImageKit‘s ImageSpec. The LogoProcessor class does two things to achieve our resized and background filled:
Use Pill’s “getpixel” to detect the color of the first pixel. If it’s transparent it uses white.
Passes the image background to ImageKit’s “mat_color” as a dynamic background fill for the new image.
That’s it folks, hope this helps you work with logo uploads a little bit easier.
I just released my 2nd WordPress plugin to on wordpress.org – Simple Post Alerts. The plugin is simple, it allows users to subscribe to alerts for new posts pending review and/or published.
A Little Background
When it comes to WordPress plugins, they are best done in the most simple form with little to no settings screens. I have been hunting around for a plugin that does notifications for posts “Pending Review” but everything I found was overloaded with settings, options, and lots of things that just really aren’t necessary. It’s much better to to keep things simple, lean, and do it well. I was also looking for something that would be easy for users to understand, ie the settings would be per user and on their profile settings and not hidden deep in a plugin administration page.
Intro Simple Post Alerts
Simple Post Alerts allows users to easily get alerts for new posts pending review and published.
How does it work?
It adds permissions appropriate settings on the user profile for post notifications. For example, Editors (and above) who work with contributors can get notified of new posts that are “Pending Review” so they can know when they need to review and publish a post. Any site user can also get notified of new published posts so they can stay up to date. The notifications aren’t fancy, just a quick note with the title and a link, but that’s the point right?
The plugin is also super simple and hopefully straight forward to make it easy to fork and change to your specific use case. With some small modifications you could use it as the base for custom post types or custom post statuses. See the plugin on Github – Simple Post Alerts on Github.
Hopefully this plugin is just what you were looking for too, enjoy!
Inlining CSS on HTML Emails is a pain point for anyone, it’s just hard, easy to miss things, hard to maintain, and just tiresome. There are some great tools out there that help do this for you, like this CSS Inliner Tool.
If you dig a little deeper, you’ll probably find a library called Premailer which does the same thing but allows you to install it on your own server and integrate it into your workflow.
For static pages, I’m using Gh-pages, hosted free by github and also using Jekyll templates to automatically generate my files – really great tool for maintaining a static site.
So, how does someone use static pages on gh-pages and Premailer together to maintain some HTML email templates?
All of these instructions you’ve already installed and are using Jekyll, learn more.
Step 1 – gem install premailer
Step 2 – Create a new directory called _plugins inside your repo
Step 3 – Use the Gist below to create a new plugin for Premailer
Step 4 – Config premailer.rb. You’ll want to rename the layout and CSS file name to the one you’re project has.
That’s it! Right now Jekyll Plugins can’t be used on Gh-pages but you can copy the generated files from your local to your email tool or app that you’re working on. With some cleanup we might even be able to get this plugin supported on Gh-pages.