Using Global Product Images in WooCommerce Multisite

In this tutorial we’re going to talk about how to make WooCommerce display images from the main store (and we decide which store is going to be the main). The next question that you may have is how did that happen that you have the same products across different stores of your multisite network. And the reasons can be pretty much different, for example:

  • Probably you’re using WooCommerce Multisite as a multilingual solution, so basically you have the same stores with the same products but in different languages.
  • Or maybe you’re using my multisite crossposting plugin to publish your products to the other stores of your network.

And the whole idea of this tutorial is to prevent the product images from being duplicated to every sub-store uploads folders like /uploads/sites/2, /uploads/sites/3 and so on.

How to Create File Uploader on Checkout Page

In this tutorial I will show you step by step how to add a file uploader field to WooCommerce checkout page without any plugins.

2 Ways to Add SVG Support

Usually when I publish something on my blog I never use SVG images in my posts and in theory you would never need them too in your site content.

But the thing is that we’re not always using WordPress publishing tools (The Block Editor, Elementor etc) for content editing, sometimes we create landing pages with them. My decision to create a tutorial like this came to me when some of my customers who use my Simple WordPress Crossposting plugin tried to upload SVG images in Elementor and then to crosspost such articles to another site (which obviously didn’t have SVG support) using REST API.

When you try to upload an SVG icon to a WordPress website, you’re going to have an error like this in Media Upload:

how to add SVG uploads support in WordPress

Or if you try to upload it via REST API, then it will return 500 Server Error with the following response body:

Image Sizes

In this tutorial we are going to talk about image sizes in WordPress. Well, but what image sizes are exactly?

All right, if you open your WordPress /wp-content/uploads directory, you might find something like this there:

default image sizes in WordPress
All of these – are default WordPress image sizes.

As you can see, an image you’ve uploaded once was duplicated multiple times with different image sizes. And in this case I am just using default WordPress theme with no plugins installed.

Users who don’t know what is the thing – image sizes in WordPress could be terrified by what they see in uploads directory.

The key idea is that when you upload an original image (especially unoptimized, up to 10MB) it would stupid to use this exact file everywhere on the website. Maybe you have a list of recent posts displayed somewhere with 100×100px thumbnails and what about srcset and sizes attributes of course?

A great example is the list of products in WooCommerce in admin area:

Product list in WooCommerce admin
Image sizes here are barely 50×50px, what do you think will happen with page load time if we try to display originals instead?

Needless to say that using image resizing software is also not a great idea because it will create huge performance issues on your server.

That’s why WordPress creates so many image copies and in this tutorial we are going to learn to manage them.

How to Create Image Slider without Plugin (almost)

In this tutorial I am going to show you how you can easily create your own WordPress image carousels or sliders without overloading your website with tons of plugins.

A quick disclaimer though – in case you’re using Block Editor (Gutenberg), then probably a better idea would be to create a block for that purpose or to install Simple Carousel Block created by me.

But in this tutorial we are going to use just custom fields (or options) and an external carousel JavaScript library.

How to Create a Shared Media Library in Multisite Network

Every once in a while I am receiving questions about my Simple Multisite Crossposting plugin whether it works with shared media library plugins or not (yes – it works). And when I decided to test it I figured it out that there are multiple shared media library plugins out there and every one of them works a little bit differently.

The key idea of most of these plugins is to store all the media on one “main” blog and not necessarily it should be the blog with ID = 1. Then some of them use switch_to_blog() function every time you’re working with attachments on subsites, the other ones even create attachments in database linked to original files on all subsites (I assume it could lead to issues by the way).

Most of all I like a switch_to_blog() approach because it seems unharmful, you can even stop using network media library any time, just deactivate the plugin and continue to use your websites as usual.

How to Use Image Uploader in WordPress Admin Area

In this tutorial I am going to dive deep in WordPress media uploader functionality. By the way it is possible to implement not for only images but for any supported file types.

This is how it looks in WordPress admin area:

Image uploader field in WordPress option pages
Below in this tutorial I will also describe how to create a settings page like this.