skip to main content

Face Masks and easy WooCommerce

So, a friend of mine wanted to sell some face masks to a general audience but without using one of the big marketplaces who tend to take a large cut (and charge insane levels of delivery for small items, upwards of £10 for a face mask in some cases).

I decided to make a simple store using a cheap .xyz domain and list them there, allowing for me and others to list various items for sale. My hosting has a few domains left over, so the cost of running the actual server is neglible.

So, “Always More Designs” by Invisible Dragon was born in a few hours over a weekend to sell a few designs of face masks. Most of it was spend waiting for the domain purchase to propagate and desperately wanting to go gym for the first time in many months!

WooCommerce makes it relatively simple to put products together and list them, and especially with a small amount of custom PHP on the site, makes it even easier to list multiple designs. The only downsize I’d say is the delivery options with it are a little limited, so I added DeliveryPlus straight away.

Adding one of my favourite plugins, Advanced Custom Fields and adding some fields to the category for Face Masks allows the start of some basic, but exciting additions to the store. I added some fields for some sizing information and a notice to display at the top of each product.

Wearing a face mask effectively. Cover both your mouth and nose, and if you have glasses a small amount of tissue paper on top stops the glasses from fogging.
How to wear a mask effectively.

I quickly made the graphic above displaying the ways I know you should be wearing a face mask, unlike a lot of people in my local area. (If you want it, here’s a link).

Custom Code

Next, as I’m using the WooCommerce theme, Storefront, I made a custom private plugin to add some extra code. Everything in Woo is rendered by hooks, so most of the time it’s a case of finding the right hook and the right priority and adding in some custom code.

For example, here’s the code I added which adds a custom sizing tab and just renders out the sizing information to the screen:

function amd_product_tabs($tabs) { global $product; $categories = wp_get_post_terms($product->id, 'product_cat'); $sizing = false; foreach($categories as $category) { $c = get_field('sizing_information', $category); if($c) { $sizing = true; } } if($sizing) { $tabs['sizing'] = array( 'title' => 'Sizing Information', 'priority' => 20, 'callback' => 'amd_sizing_information' ); } return $tabs; } function amd_sizing_information() { global $product; $categories = wp_get_post_terms($product->id, 'product_cat'); foreach($categories as $category) { echo get_field('sizing_information', $category); } } add_filter( 'woocommerce_product_tabs', 'amd_product_tabs' );
Code language: PHP (php)

Next, here’s some code that is similar, but ouputs just after the summary description:

function amd_product_after_description() { global $product; $categories = wp_get_post_terms($product->id, 'product_cat'); foreach($categories as $category) { echo get_field('product_information', $category); } } add_action( 'woocommerce_after_single_product_summary', 'amd_product_after_description', 5 );
Code language: PHP (php)

And if you do want some, hopefully amusing face masks, do check out the website Always More Designs.

Post published 29 Jul 2020



Other Posts

Single Use Coupons

22 Jul 2022 Blog Design of Everyday Things

Dare Motorsport

19 Jul 2022 Portfolio

Interface Design for Displays in the Real World

05 May 2022 Blog Design of Everyday Things