4 Ways to Download WordPress Media Library

There are many scenarios in which downloading all WordPress media files become required.

It could be when you create a brand new website and you want to keep those valuable files in place. Or you simply want to create a backup for media files during WordPress migration. You can also regularly export a full media library archive in case you’re about to install a new plugin or update WordPress core and you don’t want strange conflicts.

What to look for when downloading WordPress media?

Downloading the WordPress media library helps keep your media files safe when testing new updates or staging new developments.

While it is possible to go through each image, download it one by one, and then sort them out, that manual work is not enjoyable at all. It is even very time-consuming when you have thousands of media files. You would want something fast, simple, and neat.

This article is going to show you 4 straightforward ways to download the entire library of your WordPress media files. It works perfectly for FileBird document library as well.

With a few clicks and a full copy of your WordPress media library will be ready on your computer or cloud storage services with minimum effort.

Now let’s hop on the first method.

1. Use FileBird plugin

FileBird is a media library organizer plugin that has frequent new features from time to time. And Download media folder is one of them!

FileBird media folders for WordPress

This plugin is super useful for media-heavy websites like cuisine blogs, fashion showcases, photographer websites, or designer portfolios.

How to download your entire WordPress media library?

FileBird comes with a user-friendly interface that allows you to drag and drop to organize all media files. After you categorize them the way you want, you can easily use the right-click to access its smart context menu.

From the menu dropdown, click Download to download the entire selected folder.

Export or download a WP media folder easily

This action will save your media folder in a ZIP file, keeping the same folder structure of the main folders and nested folders. With this method, you can scientifically keep the media data backup in the organized order — thus very easy to check back and sort them out.

Pros:

The exported ZIP file contains the original files only. By excluding the WordPress auto-generated image sizes, you will have the main files and the structure of media folders to save on your hard disk or cloud drive services.

How to export WordPress media library folders?

CSV export/import is an exclusive feature of FileBird Pro to allow you to keep a backup of your folder organization. Imagine that you’ve done the hard work of categorizing thousands of files into folders in your development environment, and now you want to migrate them to your live website.

In order to export your WordPress media library structure, go to FileBird Settings > click Export and then Download File. This will be saved as a CSV file to your computer.

Export and import filebird folders

After that, just go to your live website, import the CSV file, and you’re good to go. You will be able to restore the folder organization on your main website in just a few clicks.

💎 This feature is available in FileBird – WordPress Media Library Folders (Pro Version).

Learn more about the comparison FileBird Free vs Pro.

Now let’s head over to other download/export options for your WordPress media library.

2. Filester File Manager Pro plugin

Filester is actually a handy yet versatile file manager for all of your WordPress server files. The free version already offers all the professional features you need to manage WP configuration.

In this section, I’m going to show you only a tiny built-in feature to help you see how it works in exporting WordPress media library.

To start off, you need to go to your WordPress admin dashboard and install Filester – File Manager Pro.

This can be done easily by running a search of FilesterActivate the plugin.

Filester file manager pro for WordPress

 

After activation, the Filester plugin creates a new menu item File Manager on the left sidebar. And you can click on it to view all the files that compose your current WordPress website.

Filester file manager pro user interface

This user-friendly interface allows you to browse files and folders at ease like on your computer. I would expect it’ll be extremely simple for you to find the folder for all WordPress media files. By clicking on the folder wp-content > uploads, you’ll locate all your media files arranged in folders by year and month.

By now you can just right-click the folder you want to download and choose Download to get them automatically downloaded to your computer in a ZIP file.

download wordpress media library using filester

Quick note:

In case you have many other addons and page builders installed in your WordPress, you’ll see their own folders nested under wp-content/uploads/, too.

For instance: elementor folder & css folder in the screenshot below.

filester file manager folders

You can just ignore them and only choose the folder you want to keep an extra copy.

Pros:

This download process right from WordPress file manager is conducted very fast and smoothly.

It maps the whole year- and month-based folder structure so that you can import to the new site correctly.

Cons:

If you haven’t set up user role permissions in File Manager, other users might interfere in your settings.

That said, for those who are more of a techie, refer to the second method below.

3. Use FTP Client

Your next option is to use the FTP (file transfer protocol), which requires you to download an FTP client and install it to your computer. FTP is basically a method of transferring files between a client (your computer) and a server (your WordPress website).

FTP is, of course, an excellent solution for WordPress management.

Caution: However, if you’re just taking the first steps in creating a blog on WordPress, it’ll be quite frustrating with this file transfer software’s user interface. When you accidentally move or make changes to a file or folder, it can easily break your website.

Now that when you feel confident to run FTP client, connect to Site Manager and navigate to your WordPress contents via the path /public-html/wp-content/uploads/.

Every time you upload images and videos to WordPress media library, they will be stored in year- and month-based folders. This system follows a chronological order which means the files uploaded in the year 2020 will be stored in the folder 2020, and so on and so forth for the subfolder of months.

You can do almost the same as the operations of Filester, let’s find the folder you want to keep and right-click to download them.

download-wordpress-media-library-using-ftp

Pros:

You don’t have to install a new plugin just for the export.

Cons:

Can be hard for WordPress starters.

 

4. Use Export Media Library Plugin

If you have an excellent collection to be backed up on your system or simply because you need the media files for immediate distribution, using a dedicated plugin for this task is very much recommended. With this WordPress media library export plugin, you can utilize it as a one-off and then uninstall it once all media files are safely stored.

This is an easier way to download the entire media library for non-techies, like me. Just download the free Export Media Library plugin and you’ll be able to download a zip file of your entire library!

Upon activation, you can find the Export settings right under Media menu. Simply choose the folder structure (a single folder for all files OR nested folders) and compression mode for all media.

Those are great for the media library, be sure to check out this additional guide if you want to export WordPress users with custom fields.

export media library

Pros:

Simple and easy to use.

Cons:

You have to install a new plugin with the sole purpose of downloading the WP media library.

Note that, depending upon your media library capacity, downloading media uploads could take too long and lead to a timeout. You may need to discuss how to best utilize this plugin with your hosting provider.

WordPress media library seems unresponsive? Check out to learn how to fix WordPress media library not loading.

Conclusion on downloading WordPress media library

Once you have correctly downloaded your WordPress media library, you will have a full backup of WordPress documents and media files. Bear in mind that WordPress generates many different sizes of one image, so the media library you get has more files than original files.

Therefore, using FileBird folder download (premium feature) comes in handy when you need to sort out all pictures and videos for your next projects later on.

If you would love to organize your WordPress media files better with folders, just install FileBird for free.

Did I mention that Filester has many other powerful features? Something you can do with the help of Filester includes drag and drop to move files, right-click to smart context menu, restrict access for user type, advanced settings for different user roles, etc.

If you like this article, you should check out this useful tutorial: How to Upload and Create a Document Gallery in WordPress

See you next time! 🤗

 

 

WhatsApp Chat Event Tracking in Google Analytics 4 and Google Tag Manager

Wondering how to properly track WhatsApp chat events in Google Analytics 4? Well, you’ve reached the right place.

Dive in this guide to figure out a suitable way for you to do it. This tutorial comes in two parts:

  1. Basic Guide (recommended for regular use)
  2. Advanced Guide (for further event categorization and alias setup)

Basic Guide

How to track NinjaTeam WhatsApp Event in Google Analytics 4

In this short guide, you will learn how to track click events made through the NinjaTeam WhatsApp Chat WordPress plugin. Here are the required tools you need to prepare:

Step 1: Insert gtag.js to your WordPress site

Please navigate to analytics.google.com > Google Analytics 4 > Admin, under your website property panel, click on Data Streams.

Then click Add stream to create a new data stream with these information:

  • STREAM URL: Paste your website URL
  • STREAM NAME: Give it a suitable name, for example, “Website Name – GA4”
  • MEASUREMENT ID: This ID will be given, and you will need this for future use (e.g. “G-CNMKLDZKZ7”)

In the current data stream, click on Tagging Instructions and you will find the Google Analytics global site tag.

Please copy this script and paste into the Header section of your WordPress site.

You can easily insert this code by using NinjaTeam Header Footer Custom Code (free plugin).

Then please click Save changes to save the new tag.

Step 2: Enable Google Analytics 4 in WhatsApp Chat plugin

From your WordPress dashboard, please visit WhatsApp > Settings > Analytics.

Under Google Analytics options, please enable the option for Google Analytics 4. Then click Save changes.

Step 3: Test the WhatsApp Chat events

Once you finish the two steps above, the tracking is actually working. But if you want to be sure, you can install Google Analytics Debugger to test the events.

So go ahead and add the extension to Chrome.

Once added, please enable it on your current Chrome profile.

While the extension is on, visit one of your website’s pages and click on the WhatsApp chat widget. This creates an event on your website, which would be recorded by Google Analytics tag.

After that, please navigate to GA4 window, choose Configure > DebugView, here you will see a live view that records the current events on your website.

If you’re seeing NinjaTeam WhatsApp event on the timeline, your new configuration is set up correctly and working well.

Advanced Guide

Step 1: Add Google Analytics 4 tags through Google Tag Manager

In this step, you will be creating two GA4 tags that work together:

  • Google Analytics: GA4 Configuration
  • Google Analytics: GA4 Event

To start off, navigate to https://tagmanager.google.com/ and select your Tag Manager Account, or create a new account if you haven’t. Under the Tag Manager Account, add your website as a new Container, which includes these details:

  • Container Name: “yourwebsite.com”
  • Container Type: “Web”
  • Container ID: This ID will be given (e.g. “GTM-PCPS4LD”)

After that, you can enter the Container > Workspace and land on a new dashboard with a left panel including Overview, Tags, Triggers, Variables, etc.

In order to create a new GA4 tag, you can click on Add a new tag, or alternatively, go to the Tags tab, and select New.

GTM Overview dashboard

A new untitled tag will open in a drawer, please click Tag Configuration and:

  • Choose tag type: Google Analytics: GA4 Configuration.
  • Measurement ID: Copy the ID from GA4 Data Streams and paste into this tag configuration.

Then, save your Google Analytics: GA4 Configuration tag.

In the next required tag, before adding Google Analytics: GA4 Event tag, you have to add new variables. So please navigate to Variables and click New.

Choose variable type as Data Layer Variable.

Specify the new variable name by giving it a title as “number” and Data Layer Variable Name as “number”.

Then, please save the new variable, and you can repeat it if you’d like to add more variables.

Now, you create a new tag as Google Analytics: GA4 Event tag. In the tag configuration, specify the Event Name.

For Event Parameters, you can add a new row and enter its Parameter Name and Value, for example, “Phone” with value {{number}}, “Page” with value {{url}}.

 

Step 2: Create Event with Google Tag Manager using dataLayer

From Triggers tab, please add a new trigger.

Choose trigger type as Custom Event.

You can title the trigger as “NinjaTeam WhatsApp Trigger”.

Important: Set Event name as “NinjaTeam WhatsApp” and Event contains “NinjaTeam WhatsApp“.

Event contains NinjaTeam WhatsApp

Once the tag and trigger configuration is done, you will see two tag types showing like this.

GA4 tags configuration preview

Step 3: Send Events to Google Analytics 4

From the Tag Manager Workspace screen, click on Preview to open Google Tag Assistant. This will open a new debug session and when the popup prompted, click Continue.

Then, navigate to your web pages, and you will see the GTM Tag Assistant Connected badge. Now you can run a test by performing a click action on the page. For instance, try clicking on the WhatsApp widget and selecting a support agent to chat.

Google Tag Assistant connected

Then, go to the Tag Assistant screen, if you see the two tags fired under the Output of your GTM, then the event triggers are set up properly.

Additionally, from Google Tag Assistant Summary, you can click on Data Layer to check the values of the Data Layer being sent to Google Analytics 4. Here you can see the Data Layer values such as number, url, event_category, etc.

And in Variables tab, you can see the new number and url Data Layer Variables which you have set up in Step 1. The more variables you set up, the more event labels appear in your Google Analytics reports.

API call dataLayer in GTM

You can repeat the test several times, and check back with GA4 real-time reports to make sure the NinjaTeam WhatsApp events are working well and returning all the desired variables that you have set up.

If you have used “Phone” as the Event name in Event Parameters (Step 1), you should see “Phone” events counted under “NinjaTeam WhatsApp” event in GA4 real-time report.

Event tracking realtime in GA4 (1)

Over to you

I hope this guide has helped you set up Google Analytics 4 event tracking successfully. And don’t forget to share with us how your website is performing with WhatsApp Chat WordPress plugin and GA4 event tracking.

How to Customize WooCommerce Subscription Emails

Subscription is a business model that we are using a lot nowadays. Since WordPress is a platform which owns 30% websites all over the world and its WooCommerce is its right hand weapon for online shops, we can see that a lot of shop owners are using WooCommerce Subscription plugin for their sites. However, WooCommerce Subscription plugin itself does not offer much customization for their emails. This becomes a high demand since shop owners always want to make their emails which are sent out to their customers beautifully and match with their shop brand.

If you are one of those users who is using WooCommerce Subscription and would like to make its emails stand out from the crowd, you came to the right place.

In this article, I will guide you on how to customize your WooCommerce Subscription emails at ease with no coding required.

Where these emails come from?

Display WooCommerce Default Emails 

Normally you can see a list of emails in WooCommerce settings like this

But today I’ll show you how to display all WooCommerce emails in a friendly user interface.

First you need to install a free plugin called YayMail.

In your WordPress dashboard, search for “YayMail” and install it.

 

Then go to YayMail interface, you will see 11 default templates generated from WooCommerce. When selling physical or one time payment products, you have these emails to communicate with your customers.

Display WooCommerce Subscription Emails

When selling subscription products, you can have 10 extra emails from WooCommerce Subscription plugin

These 10 emails includes:

New Renewal Order:  This email was sent when a subscription renewal payment is made. It is sent to shop admin by default, but you could also customize it to be sent to fulfillment or drop shipping third parties.

Subscription Switched: It is sent when a client choose to upgrades or downgrades a subscription, sent to the shop admin by default.

Processing Renewal Order: This is sent to a customer when payment has been made for a subscription which is now being waiting for fulfillment. The payment can be a manual renewal payment or an automatically recurring payment.

Completed Renewal Order: A client receives this email when his subscription renewal order is marked complete. This means the client has received their order.

On-hold Renewal Order: This will be sent to a client when his subscription renewal order is on hold. 

Subscription Switched Complete: This is sent to a customer when he/she successfully upgrades or downgrades a subscription. This gets sent instead of the WooCommerce Completed Order email for orders to switch subscriptions.

Customer Renewal Invoice: A customer will receive this when the subscription is due for renewal and the renewal requires a manual payment, either because it uses manual renewals or the automatic recurring payment failed. This email contains renewal order information and payment links.

Cancelled Subscription: This gets sent when a subscription has been canceled by the customer (at the time when they click ‘cancel’) or shop admin. Shop admin get this mail by default.

Expired Subscription: This email is sent when a subscription is changed to expired. It is sent to the shop admin by default.

Suspended Subscription: This email gets sent when a customer manually suspends their subscription from his My Account page. Shop owner receives this email by default.

Customize WooCommerce Subscription Emails

 

You can see those templates from the WooCommerce Subscription plugin in YayMail interface, but now it comes with “Addon”. It means that you need a YayMail addon for these templates.

Please go to YayMail addon for WooCommerce Subscription and purchase an addon for your WooCommerce Subscription emails. Install it like what you do for any plugin.

After installing the addon, you can see that those templates are supported now.

Just click each one to customize your emails.

The addon added some elements that you can use to customize your WooCommerce Subscription.

Let us do an example on the first template of WooCommerce Subscription,

It’s the New Renewal Order.

Let’s change the logo.

Now change the email heading

You can customize color, background, padding, etc. or change titles of the WooCommerce Subscription information.

You can change body text and other text as well.

Now we change billing shipping design into the color we want.

Let’s come to the footer now. You can drag the footer element into your email and start designing it.

Now done! We have a very beautifully designed template!

To help you save time on designing other templates, you can use Copy template option.

Or you can copy each element like this

Conclusion:

I hope this article gave you some information on how you could customize your Subscription Emails. If you like it, don’t hesitate to share or if there is something that you need our help, please just contact us. Cheers!

YAYMAIL FREE YAYMAIL PRO YAYMAIL ADDONS for WOO SUBSCRIPTIONS

How To Build Web Silos On WordPress Site

Search engine optimization (SEO) experts around the world consider web silos as one of the most effective ways to get your site at the top of Google’s search engine results pages (SERPs).

One of the main purposes of creating web silos on WordPress websites is to get more organic traffic from search engines. These silos are structures made by putting all kinds of pages, posts, and content under a single domain name. When this structure is applied in a well-thought-out way, you can increase user experience and SEO potential.

Web silo structure SEO is an approach where you set up a content site and each page targets a keyword phrase. Silo SEO is one of the best techniques to rank your blog because you can create an interconnected set of pages featuring related information using this method. The goal here is to group all the pages of your site together, focusing them on a certain topic. You can then connect those pages using internal links.

This article will show you how to build web silos with WordPress and give some useful tips on how to do it right. So, if you’ve been wondering how to rank your blog, you’re in the right place.

But before getting into these steps, it’s important to first look at the advantages of creating web silos.

Benefits Of Creating Web Silos On Your WordPress Site

You’ll reap several benefits when creating web silos on your WordPress site if you do it well. Here are some of these benefits:

  • Improved site structure and organization – By structuring your website content in a meaningful way, you make it easier for both humans and search engine robots to understand what each page is about. This improved organization will help your site rank better in the SERPs for relevant keywords.
  • Easier crawling and indexing of all pages by search engines – Search engine robots crawl and index websites by following links from one page to another. When they come across a web page with little or no internal linking, it can be difficult for them to understand what the page is about and determine whether it’s worth including in their index. Siloing your content helps to overcome this problem by providing more internal linking opportunities for the robots, making it easier for them to crawl and index your site at scale.
  • More backlinks – One of the most effective ways to improve your website’s ranking in SERPs is by increasing its link authority, which requires inserting backlinks from other websites pointing to your content. The more links you have pointing to these pages, the better that page will rank for relevant keywords and phrases in SERPs. Since siloed pages provide more internal linking opportunities than individual posts or pages, this makes it much easier for you to build a good number of high-quality backlinks pointed at each of them. This is an essential part of creating an authoritative blog with enough clout so as not to lose its rankings over time.
  • Content expansion – This is one of the most exciting things about siloing your content. It allows you to expand upon each blog post by using it as a starting point to create additional unique pages within your site’s overall web structure. Each new piece of content you generate in this way will become another page on your website that Google sees and can index, which means more traffic for you.
  • Knowledge expansion – All successful business owners know how important it is to learn from their own experiences or the experiences of others. These days, many are turning online for education and learning opportunities because they find it easier than attending courses at colleges or universities (which requires time away from work, family, etc.). That said, those who can provide valuable advice to these people will gain a competitive edge over the rest. By creating web silos for each blog post that functions as a knowledge base on its own, you enable yourself to expand upon your initial content and increase the amount of learning potential that it offers.

These are some of the top benefits for your WordPress site if you create web silos. With this knowledge, you may now get into structuring your first silo. It’s really easier to do something when you know full and we’ll what it’s supposed to achieve.

Steps To Build Web Silos On WordPress Site

  1. What To Do First

Before you even think about siloing the content on your website, you need to have everything in order on the back-end.

First, make sure that your permalinks are clean and optimized for SEO. You can do this by going to ‘Settings > Permalinks’ within your WordPress dashboard. If you’re not sure how to optimize them for search engines, leave it on the default setting of ‘Post name.’

Make sure that your internal linking structure is sound as well. You don’t want too many links pointing to the homepage of each section within your site—this will likely cause confusion with search engine spiders. It’s recommended that no more than 200 links point to any one page on your site. You can check this by going to the All Pages section of your WordPress dashboard and clicking on each page.

You want to keep all of your content available for search engines, so use the default permalink structure instead of creating custom ones. The standard URL structure looks like this: www.yoursite.com/year/month/day/postname.

This means that your post name will be indexed separately from your domain name, allowing you to retain full control over how you utilize that content. Once you’ve made sure that everything is in order with both internal and external linking structures, then it’s time to start building web silos.

  1. Connect Inner Pages With Categories And Subcategories

After putting everything in order, you may now start building your silos. You’ll need to create related inner pages that are connected with categories and subcategories. This way, you can group similar content in different buckets that are easy for users to find just by looking at the main category name. The more content available under each category, the better.

These are usually the basic pages that’ll need a web silo on WordPress: About Us, Services, Clients and Testimonials, Portfolio, and Contact pages (if any).

Related posts can also act as silos where relevant content can be found. These internal links shouldn’t only consist of text, but they should also include featured images and media posts.

  1. Create A Unique Description For Each Inner Page

One very important step in helping Google understand what your site is about is to create a unique meta description for each inner page. Your meta descriptions should never replicate themselves on any two or more pages. This is because you want to avoid internal competition between pages when someone searches specific keywords on your site.

If you have a silo structure and it’s done correctly in almost all aspects but you have closely related meta descriptions, then there will be a lot of pages that could very well end up at the top of search results when someone searches for an exact keyword phrase. Because those types of web pages are so similar to each other (at least as far as content goes), they would probably be competing against one another. Therefore, you would need to set up some kind of strategy in order to get one page on top of the search engine list.

In this case, duplicating meta descriptions would have worked against you because Google is likely to see that you’re trying to manipulate search results so that your site would rank high in search results for this particular keyword phrase. And they could potentially penalize you or even blacklist you! So, to protect and even improve your site’s SEO, it’s best to stay away from closely related meta descriptions as you create your web silos.

  1. Connect Your Inner Pages With Internal Links

The final step is going through each inner page and adding links that go back to the category pages where all the other related content is organized. You should create links within posts and pages, not only in titles but also in the content.

The navigation menus on all other pages should take users back to the homepage when clicked, which is where they can find all of your content inventory grouped together into web silos. You’ll need to ensure that none of your categories are nested inside one another because search engines won’t index anything deeper than one level down (with some exceptions).

Also remember that when it comes to keyword use, the goal here isn’t to reach a certain keyword density. Rather, you should always ask yourself, ‘would someone find these links useful within this body of content?’ If the answer is yes, then go for it!

Just keep in mind that, generally speaking, it’s better to make your site user-friendly rather than having a ton of keywords within posts but without any effective structure.

Conclusion

Siloing helps with SEO because you can create higher ranked pages for various keywords categories under one category, which means that you would be ranking better for many more relevant keyword phrases simultaneously.

Going through this process is something that you should always do before you start to build a page or a website because it’ll help you understand how the site’s content can flow and whether or not it’s easy for users to find what they’re looking for. If you also keep in mind some of the other SEO tips mentioned in this article, then your WordPress site could be optimized to rank high in search engine results without too much effort.

Now go write those silo descriptions and start adding some internal links!

 

 

How to set up WooCommerce multi currency for your store

We all know that WooCommerce is by far one of the best tools for operating a full-fledged ecommerce website. WooCommerce already allows you to set a specific currency type to be used in your store. Most businesses, however, sell their products and services to different regions across the world and so it is important and even more beautifying to have WooCommerce multi currency set up for a website, in order to improve shoppers experience which in turn improves website sales.

Contents to be discussed

  • How to add multi currency to your store
  • How to enable Checkout in different currencies
  • How to set multi currency display at different location

How to add multi currency to your store

  1. Inside your WordPress dashboard, under Plugins, click on Add new.
  2. Search YayCurrency, click Install now and then click on Activate.

After the plugin has been activated successfully, You will be able to access the settings by clicking on YayCurrency under the WooCommerce tab. This will reveal the four main sub-tabs that would allow you to make different settings and multi currency changes as you want. These sub-tabs include;

  1. Manage Currency
  2. Checkout Options
  3. Display Options
  4. Settings
  • Manage Currency: This allows you to Add New Currency, update currency rates, configure currencies and delete currencies.

How to enable Checkout in different currencies

  • Checkout Options: This tab allows you to allow or disallow frontend users to Checkout in different currencies as you have set in the ‘Manage Currency’ tab and also to associate specific payment methods to specific currency you have activated.

How to set multi currency display at different location

  • Display Options: This tab allows you to select the size of the currency switcher, set where it should appear on your site and to copy the shortcode you could use it to display anywhere on your website.

  Here is a screenshot showing how the multi currency switcher looks on the website’s single product page at the frontend:  

  • Settings: This settings tab allows you to set Exchange Rate to be updated automatically, select specific countries that you want a specific currency to display for and to set currency to be automatically determined and displayed based on the visitor’s country.

  • Widget Option: You can display multi currency at various widget locations supported by your website’s theme.

Here is a screenshot showing how the multi currency switcher looks on the website’s sidebar at the frontend:

Menu Option: YayCurrency allows you to display the multi currency switcher on your website’s menu in just one click.

Here is a screenshot showing how the multi currency switcher looks on the website’s menu at the frontend:

Wrapping Up

In conclusion, we have talked about how to set up WooCommerce multi currency for your store, so that you can enhance better shopping experience for your customers. We learnt about YayCurrency which is one of the best WooCommmerce multi currency plugin for this purpose. The YayCurrency plugin is available in both free and paid version, the free version is very much enough to get your store going. However, if you want to enjoy even more functionalities, you might later consider upgrading to the premium version.

YAYCURRENCY FREE
YAYCURRENCY PRO

How to Customize Germanized email templates

In recent years, WordPress and WooCommerce users have been on the rise and because of this growth in popularity, a lot of developers are also developing supporting addon plugins for WooCommerce in other to further enhance the user experiences.

One of the main functions of WooCommerce is it’s ability to send out different transaction Emails to Customers and Operators of a WooCommerce powered store. However, since millions of store owners uses WooComemerce, it thus works very similarly for all its users by sending very generic Emails and less customizable Emails.

In other to have these customization capabilities and get more controls over how your Emails look, we would employ a free plugin called ‘YayMail – WooCommerce Email customizer’.

In this article, we will go through how to customize WooCommerce Email templates added by a plugin called ‘Germanized for WooCommerce’ by using the addon plugin developed for YayMail called ‘YayMail Addon for Germanized’.

Contents to be discussed

 

  1. Why Customize Email Templates?
  2. What’s YayMail?
  3. What is Germanized for WooCommerce?
  4. YayMail’s Addon for Germanized Plugin?
  5. The Germanized Templates Customizable With YayMail
  6. Common Design Customizations
  7. How to Customize Germanized Email Template With YayMail

Why Customize Germanized Email Templates?

  There are many benefits that come with customizing Germanized Email templates, some of which include the following:

  1. The default Email template that comes with Germanized plugin will certainly appear very similar across all web stores that uses the plugin. You therefore need to customize these templates with YayMail in other to make your Germanized Emails stand out and add a unique touch to the Emails your store sends out.
  2. Besides the fact that YayMail allows you to add Germanized plugin elements to the Email designs, it also gives you more flexibilities by allowing you to add so many extra elements to the Germanized Email templates. Helping you spice up your designs, instead of accepting the default ‘take-as-is’ kind of design.
  3. You have the ability to include more information in the Emails like personalization and brand centralization etc.

What is YayMail?

YayMail – WooCommerce Email Customizer is a WordPress plugin that gives you the ability to customize emails sent out by WooCommerce. Its drag and drop editor makes it super easy to edit the emails to the desired state that suits your business. You can add images, use different fonts, icons, colours, and so on.

YayMail comes in two forms including:

Free: A free plugin to help you fully customize 11 standard WooCommerce email templates

YayMail Pro: A paid plugin including all the free features and compatible with various third-party WordPress/WooCommerce plugins

What is Germanized for WooCommerce?

Germanized extends WooCommerce to technically match specific german legal conditions. The objective of this plugin is to adapt WooCommerce to the special requirements of the German market.

What is YayMail Addon for Germanized?

The YayMail’s addon for Germanized is an additional PRO version addon plugin for the stand-alone YayMail plugin. It works either with the Free version or the Pro version of the YayMail plugin. It can help you customize the majority of the Germanized plugin Email templates.

Note:

This YayMail Addon for Germanized will work with either the free version or the Pro version of YayMail stand-alone plugin, but it is a PRO plugin itself.

The Germanized Templates Customizable with YayMail

The Germanized plugin have 18 different default mail templates that comes with it, all of these template designs are customizable and they can be branded with Colors, Logos, Fonts etc.

These templates include:

Paid for order – This notifies the buyer when their payment for the item has been successfully received by the seller

Cancelled order – This notifies the buyer after their order cancellation has been successfully processed.

New account activation – This notifies a new user, informing them with a link to activate their newly created account.

Withdrawal – This notifies the user when their revocation or withdrawal request is successful

SEPA Direct Debit Mandate – This notifies the seller about SEPA agreement once a buyer submits payment.

Invoice (PDF) – This is sent to customer after an order is fulfilled. 

Document Admin (PDF) – This notifies admin about info of an order.

Cancellation (PDF) – This notifies customer about their cancelation.

Document (PDF) – This notifies customer about info of an order.

Packing Slip (PDF) – This is packing slip of an order. 

OSS Delivery Threshold Notification – This notifies buyers about the OSS delivery policy threshold

Trusted Shops Review Reminder – This notifies the buyers to review the recently purchased products

Order shipped – This notifies the buyers once their items have been shipped

Order return – This notifies the buyers who trigger a return with more information about how to return the items

Order return delivered – This notifies the buyers when their returns have been received successfully.

Order guest return request – This notifies the buyers when they request to add a return request to their order.

New order return request – This notifies the seller whenever a buyer adds a return request

Order confirmation – This notifies customer about order confirmation.

Common Design Customizations

Some of the common Design Customizations you can use include:

Header Image – An image that you’d like to display at the top of all emails. You might want to use your logo or other brand imagery here.

Footer Text – Information found at the bottom of each email. Include a link to your website and contact information to make it easy for your customers to get in touch.

Base Color – The color used for headings, links, and the background of your email title.

Background Color – The color used for the background of the email.

Body Background Color – The color of your email content background.

Body Text Color – The color for all written email content.

How to Customize Germanized Email Template With YayMail

As an example, I will explain how to customize the ‘Paid for Order’ Email template. Ideally, it is just the same method if you are customizing other Germanized Email templates too.

You can customize the ‘Paid for Order’ Email template via your wp-admin > WooCommerce > Email Customizer > Paid for Order.

Here is a screenshot that shows the default WooCommerce design for this Germanized template:

Germanized Design Elements

The Germanized plugin adds its own various designs elements which is recognized and supported by YayMail.  Some of these elements include:

Germanized Document (PDF) – This element adds order item details to the Email Template

Germanized Cancel Invoice – This element adds order item cancellation details to the Email Template

Germanized Shipment Goes to – This element adds shipment address to the Email Template

Germanized Shipment Details – This element adds details of the order items to be shipped to the Email Template

Germanized Return Details – This element adds order item to be returned details to the Email Template

Now, we can follow these easy steps to make a better design:

Change the Logo: You can change the Logo by clicking on the default WooCommerce Logo and change it or simply by clicking on the “Element” tab and then drag and drop the Logo element to the top layer of the design.

Set the Heading color: This the color of your Order Title background and it is better to set this based on your website’s color scheme and color consistency.

Change the Title text: This is the title of the email and this can be designed by clicking on the title and then changing the font type, font color etc.

Add a Heading text: You can add a header texts, something nice to motivate your customers by clicking on the “Elements” tab and dragging and dropping the “Text” element to the canvas.

Personalize some parts of the Email content: This is a very cool way to win the hearts of your customers with a touchy and personal email, you can add or edit a “Text” element, then click on the “shortcode” options to see available name shortcodes to add in the text, so as to call each customers name in the email.

Add a Button at the bottom and change its color for consistency: You can add a button by dragging and dropping to the working canvas via the basic “Elements” tab.

Add a nice footer text: A footer text is not so necessary but in fact, if well used it might add some spice to your designs and it might just be a great way to add watermarks, special link, unsubscribe link etc. You can click to edit the existing one or add a new footer text via the basic elements from the “Elements” tab.

What next after customizing Email template?

  1. Send test email: One-click to send a test message to any email address to see how your designed email would look like in the inbox.
  2. Preview: Instantly view your customized email in a pop-up at full-screen mode. You can see how it looks on desktop and mobile devices.
  3. Save: Save your edits at any point in time.

Here is a screenshot that shows our new design for this Germanized template customized with YayMail:

Wrapping Up

In conclusion, this article has discussed how to customize Germanized Email templates with an easy to use Germanized addon plugin for the YayMail plugin. We now understand why it is important to have better, personalized and brand-centralized Emails sent to your customers, vendors and site admins.

Basically, there are three tools discussed in this article; YayMail, YayMail addon for Germanized and Germanized for WooCommerce plugin. YayMail is an Email Customizer for WooCommerce that is accessible in both free and premium variants.

The free form is presumably enough for most sites, but you need the premium addon for Germanized to help you design Germanized Email templates.

YAYMAIL FREE YAYMAIL PRO YAYMAIL ADDON for GERMANIZED

How to Customize Dokan Emails

As an experienced WordPress and WooCommerce user, I have come to realize the importance of having nice and much better Emails sent out to WooCommerce store clients. Since the basic WooCommerce Email does not allow for much customization that would help serve store customers in the best possible way.

Thus, it is necessary to introduce another plugin that would help you have this WooCommerce Email customization capability. The tool to be employed must be able to help you customize the generic WooCommerce Emails and also should be compatible with many other WooCommerce addon plugins since there are other addons that also add some extra Email templates to the regular WooCommerce templates.

Therefore, in this article, I’ll take you through the basic things you need to know about customizing extra Email templates added to WooCommerce by a specific WooCommerce addon plugin called ‘Dokan’ using a specific WooCommerce Email customizer called ‘YayMail’.

Contents to be discussed

  1. Why Customize Email Templates?
  2. What’s YayMail?
  3. What is Dokan Multi Vendor?
  4. YayMail’s Addon for Dokan?
  5. The Dokan Templates Customizable With YayMail
  6. Common Design Customizations
  7. How to Customize Dokan Email Template With YayMail

Why Customize Dokan Email Templates?

For many beneficial reasons, you can customize your Dokan Email templates, some of these include the following:

  1. The generic Email template that comes with Dokan will certainly appear very similar across all web stores that use Dokan. To make your Dokan Emails stand out, customize these generic Dokan templates. It will help you add some unique touches of customization to them by editing with YayMail.
  2. YayMail gives you more flexibilities by allowing you to add so many extra elements to the Dokan Email templates. Helping you spice up your designs, instead of accepting the generic ‘take-as-is’ kind of design.
  3. You have the ability to include more information in the Emails like personalization and brand centralization.

What is YayMail?

YayMail – WooCommerce Email Customizer is a WordPress plugin that gives you the ability to customize emails sent out by WooCommerce. Its drag and drop editor makes it super easy to edit the emails to the desired state that suits your business. You can add images, use different fonts, icons, colours, and so on.

YayMail comes in two forms including:

Free: A free plugin to help you fully customize 11 standard WC email templates

YayMail Pro: A paid plugin including all the free features, AND compatible with various third-party WordPress/WooCommerce plugins

What is Dokan Multi Vendor?

Dokan – WooCommerce Multi Vendor Marketplace extension allows you to create an online marketplace with multiple sellers. You will be able to earn via various types of products: physical, downloadable, bookable, auction products and so on.

What is YayMail’s Addon for Dokan

The YayMail’s addon for Dokan is an additional PRO version addon plugin for the stand-alone YayMail plugin. It works either with the free version or the PRO version of the YayMail plugin. It can help you customize the majority of the Dokan Multi Vendor plugin Email templates.

Note:

This YayMail Addon for Dokan will work with either the free version or the PRO version of YayMail stand-alone plugin, but it is a PRO plugin itself.

The Dokan Templates Customizable With YayMail

The Dokan Multi Vendor plugin have different default mail templates that comes with it, all of these template designs are customizable and they can be branded with Colors, Logos, Fonts etc.

These templates include:

Dokan New Product – This notifies the admin when seller added a new product of status publish.

New Pending Product – Email notifies the admin when seller add a new product of status pending

Dokan Pending Product Published – Notifies sellers when admin review sellers product and make it publish

New Seller Registered – Notifies admins when a new seller registers on dokan

Dokan New Withdrawal Request – Notifies admin when seller make a withdraw request

Withdraw Approved – Notifies seller when admin approve seller withdraw request

Dokan Withdraw cancelled – Notifies sellers when admin cancel seller withdraw request

Contact Vendor – Notifies sellers when a new customer contacts them via message form

Dokan Vendor New Order – Notifies sellers when a new customer places new order

Vendor Completed Order – Notifies customers when their order is completely processed by seller

Dokan Announcement – Notifies the sellers when admin makes an announcement

Updated Pending Product – Notifies sellers when admin updates their pending product

Dokan New Refund Request – Notifies the seller when vendor request refund

Refund Processed – Notifies the customer when their refund is processed by seller

Dokan Vendor Enable – Notifes the vendors when their account is enabled by the admin

Vendor Disable – Notifes the vendors when their account is disabled by the admin

Common Design Customizations

Some of the common Design Customizations you can use include:

Header Image – An image that you’d like to display at the top of all emails. You might want to use your logo or other brand imagery here.

Footer Text – Information found at the bottom of each email. Include a link to your website and contact information to make it easy for your customers to get in touch.

Base Color – The color used for headings, links, and the background of your email title.

Background Color – The color used for the background of the email.

Body Background Color – The color of your email content background.

Body Text Color – The color for all written email content.

How to Customize Dokan Email Template With YayMail

As an example, I will explain how to customize the ‘Dokan New Product’ Email template. Ideally, it is just the same method if you are customizing other Dokan Email templates too.

You can customize the ‘Dokan New Product’ email template via your wp-admin > WooCommerce > Email Customizer > Dokan New Product.

Here is a screenshot that shows the default WooCommerce design for this Dokan template:

Now, we can follow these easy steps to make a better design:

Change the Logo: You can change the Logo by clicking on the default WooCommerce Logo and change it or simply by clicking on the “Element” tab and then drag and drop the Logo element to the top layer of the design.

You have many customizations for the logo such as align, padding, link, width, background color, .etc

Set the Heading color: This the color of your Order Title background and it is better to set this based on your website’s color scheme and color consistency.

Change the Title text: This is the title of the email and this can be designed by clicking on the title and then changing the font type, font color etc.

Add a Heading text: You can add a header texts, something nice to motivate your customers by clicking on the “Elements” tab and dragging and dropping the “Text” element to the canvas.

Personalize some parts of the Email content: This is a very cool way to win the hearts of your customers with a touchy and personal email, you can add or edit a “Text” element, then click on the “shortcode” options to see available name shortcodes to add in the text, so as to call each customers name in the email.

Add a Button at the bottom and change its color for consistency: You can add a button by dragging and dropping to the working canvas via the basic “Elements” tab.

Add a nice footer text: A footer text is not so necessary but in fact, if well used it might add some spice to your designs and it might just be a great way to add watermarks, special link, unsubscribe link etc. You can click to edit the existing one or add a new footer text via the basic elements from the “Elements” tab.

What next after customizing Email template?

  1. Send test email: One-click to send a test message to any email address to see how your designed email would look like in the inbox.
  2. Preview: Instantly view your customized email in a pop-up at full-screen mode. You can see how it looks on desktop and mobile devices.
  3. Save: Save your edits at any point in time.

Here is a screenshot that shows our new design for this Dokan template customized with YayMail:

Wrapping Up

In conclusion, this article has discussed how to customize Dokan Email templates with an easy to use Dokan addon plugin for the YayMail plugin. We now understand why it is important to have better, personalized and brand-centralized Emails sent to your customers, vendors and site admins.

Basically, there are three tools discussed in this article; YayMail, YayMail addon for Dokan and Dokan multi-vendor plugin. YayMail is an Email Customizer for WooCommerce that is accessible in both free and premium variants.

The free form is presumably enough for most sites, but you need the premium addon for Dokan to help you design Dokan Email templates.

YAYMAIL FREE YAYMAIL PRO YAYMAIL ADDON for DOKAN

How to troubleshoot WordPress media library not loading

WordPress media library is responsible for storing the site’s multimedia files: images, videos, audio files, and documents. Many a time, you might encounter the issue in which WordPress media library is not loading/showing thumbnails. So you have to follow this 6-step tutorial to fix this error. Otherwise, you can’t upload files, and users may face difficulties when visiting your site.

wordpress media library not loading not showing

We want you to never have to deal with such an error. However, bookmark this post to help you fix this issue if it arises. Here is a complete guide showing you how to troubleshoot WordPress Media Library not loading error step by step. Each step is thoroughly described, so even less-trained users will be able to follow the instructions.

IMPORTANT: In the best-case scenario, plugin incompatibility may generate an error, and fixing the issue takes around five minutes. In the worst-case scenario, the issue is with file permissions, and you’ll have to change the sites’ files. Before taking action, we strongly recommend performing a complete site backup. No matter what you do, a site backup gives you that needed peace of mind when fixing a site.

Recommended: Use WordPress Media Library Folders

FileBird – WordPress Media Library Folders was born to help you manage thousands of files in WordPress media library quickly and easily.

This will help you save a ton of time trying to solve WordPress media library not loading issue. The hierarchical view of your folders will help you quickly find specific folders in just a blink of an eye. And FileBird loads one folder at a time, so the risk of media library inability of loading will be reduced.

How FileBird troubleshoots WordPress media library not loading?

Once you install the plugin, you will be able to organize thousands of your images and other media files into folders/ categories, drag and drop to upload/move files into folders and drag and drop to rearrange folders.

You have the toolbar on the left which allows you control all of your folders/ files. You can create, rearrange, rename or delete folders.

Right-click your mouse to quickly create, rename or delete folders like what you do on your computer.

More than that, you can even get your entire folder and files in a downloadable ZIP file with a single click.

Download entire WordPress media library files

Give FileBird a try and WordPress media library not loading issue will not exist anymore.

DEMO

FILEBIRD LITE

The FileBird plugin allows an infinite list of uploaded media library files. But if you’re looking for some alternatives around troubleshooting this issue, you can hop on how to fix the issue in which WordPress images are not showing by following the next steps.

1. Check Plugin Incompatibility

Even if you use premium plugins or ones from the WordPress repository, they might not be perfect and could conflict with each other. Some incompatibilities don’t have a visible impact on your site, but some result in major problems, like making it impossible to upload images or videos. Here is what you have to do to find the culprit:

1. Go to your WordPress admin dashboard and click on Plugins. You’ll see a list of plugins. Select all of them and choose Deactivate from the Bulk Action drop-down menu.
plugin check

2. Clear the cache memory if you have installed a caching or performance plugin.

3. Visit the Media Library and check if it works. Even if you see the thumbnails properly, upload a new image to make sure it works.

4. If the Media Library works, then a plugin was causing the issue. Reactivate each plugin one at a time and check the Media Library after each reactivation. If you see the Library’s thumbnails and uploading works fine, then the plugin is okay. Repeat the process until you find the guilty plugin. It’s boring, but it’s the only way to find the culprit.

5. If the problem persists after deactivating all the plugins, then there is no plugin incompatibility. Reactivate them and go to the next potential source of the problems: the theme.

Hints:

  • According to Murphy’s law, the last plugin you re-installed generated the issue. To save time and break this law, we suggest starting with the plugin you most recently installed or updated before the Media Library stopped working. Most likely, that’s the one that generated the issue.
  • Contact the team that developed the plugin responsible for your issue. Explain the problem and work with them to update the plugin. It won’t help your site get more visitors, but it’s always nice to help the WordPress community.

2. Check Theme Incompatibility

Install and activate a new theme – let’s say a default one, such as Twenty-Twenty. Check the Media Library, and if it works, then the problem is your theme. In this instance, contact the theme developer and describe your issue.

There is a good plugin called Health Check to help you troubleshoot plugin- or theme-related issues. It allows you to toggle your plugins on/off and switch between themes.

Good news: Using Health Check plugin won’t affect normal visitors to your site.

3. Update WordPress Core

You have to update the WordPress core from time to time. While the team behind WordPress works hard to make it faster, more secure, and more versatile, errors do happen. Don’t worry, many of these errors are fixed so fast that you won’t even notice them. Still, your version of WordPress may produce such an error, and there is a slight chance that the WordPress core is guilty of the Media Library malfunction.

The deficient WordPress update is the most probable cause of the Media Library not loading issue. A poor internet connection or a server misconfiguration may result in an incomplete update of your site’s WordPress core. All you have to do is to make sure that the update works fine. Head to your WordPress admin dashboard, click on Home > Update > Re-install now to re-install the WordPress core.

update wordpress core
4. File Permissions

The next suspect could be invalid file permission if there is no problem with your plugins, theme, or WordPress core. Here is what you have to do:
1. Open your FTP client of choice (Filezilla, Cyberduck, FreeFTP) and connect to your site host.
2. Access your site’s files and go to the wp-content/ folder. Identify the upload/ folder.

file manager file permission

3. Select File Permissions and change them to 755, unless there is a different numeric value. Check the Recurse into subdirectories box and choose Apply to directories only.

file permission for wordpress media library

4. Pay Attention! Go back to the upload/ folder and select File Permissions once again. This time, change the numeric value to 644, check the Recurse into subdirectories box, and choose Apply to files only.

file permission fix wp media library

5. Go to the Media Library and check if it works. If it still doesn’t work, apply this algorithm again but choose 777 instead of 755. Verify the Media Library, but bear in mind that 777 presents a serious security issue for your site.

In theory, you have done everything possible to fix this problem. Contact your hosting provider if the problem persists; it might be a server malfunction or an issue out of your control.

Types of File Permissions

You can change file permissions without having a clear idea of what they are. However, it helps if you have a basic understanding of file permissions.

File permissions determine what actions a user can perform on a file: read, write, or execute. Consider the following rules:

  • Read (4): Allowed to read files
  • Write (2): Allowed to write or modify files
  • Execute (1): Read, write, delete, modify, or direct files

file permission explanation

Each digit of the numeric values from above has a particular meaning. The first digit says what actions a user can perform (read, write, or execute), the second says what a group can perform, and the last says what a site visitor can perform. You calculate the value of each digit of a permission’s numeric value by adding the value for each type of action.

For example, 755 means that the users read, write, and execute (4 + 2 + 1 = 7), the group members can read and execute (4 + 1 = 5), and the site visitors can read and execute (4 + 1 = 5). Check out this resource for more information about file permissions.

5. Image Hotlinking

Hotlinking refers to instances when a website links to images hosted on an external hosting platform. The fair method is to link to the image, credit the artist, and store the image on your site’s server—that is, of course, if the image owner allows it.

While copyright infringement is beyond the scope of this article, image hotlinking is a way to poorly display images and reduce the site’s performance. The site using hotlinked images doesn’t consume its own bandwidth; instead, it uses the original host’s bandwidth. Fortunately, most hosting providers offer hotlinking protection. Many security plugins also package this feature.
However, there are cases where webmasters prefer hotlinking—for instance, people who run multiple sites. No matter the reason, they use a single site to store images.

The hotlinked images won’t work if you don’t set up the proper configuration from cPanel (or a similar account) or the .htaccess file. Check out these steps to disable hotlinking while whitelisting particular websites.

Disable Image Hotlinking from cPanel

Go to cPanel (or a similar account) and search for Hotlinking Protection in the Security area. It depends on your site’s host, but Hotlinking Protection usually falls under the Security area.

disable image hotlinking in cPanel

Click on it to enable hotlink protection. You also list the URLs you want to allow access. You can also block access to particular types of file extensions. Include here the image extensions used on your website, such as .jpeg, .jpg, .bmp,.gif, and .png.

image hotlinking protection

IMPORTANT: Pay attention when you create your list of URLs with access to your site. Include the www, non-www, http, and https versions to avoid any potential errors.

Disable Image Hotlinking from .htaccess

Access your site’s files using an FTP client or through the File Manager on cPanel. Go to the site’s root directory and look for the .htaccess file.

htaccess file hotlinking

IMPORTANT: The files starting with a dot are hidden by default. Check the FTP client’s or File Manager’s settings and change them to allow you to view the hidden files. That’s why you won’t see .htaccess file directly when you open up the root directory.

Edit the site’s .htaccess file and paste the following snippet of code:

RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourwebsite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourwebsite1.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourwebsite2.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [F]

Replace “yourwebsite” with the name of your site and “yourwebsite1” and “yourwebsite2” with the name of the sites you will allow to hotlink. Delete the lines of code for “yourwebsite1” and “yourwebsite2,” and you will block the sites from hotlinking your site’s images.

Over to You

Fixing WordPress errors isn’t the most fun activity, but you should be prepared for the worst-case scenario. Don’t panic if your site’s Medial Library doesn’t work; check this article instead and carefully apply the suggestions.

Have you ever experienced the Media library not loading error? How did you resolve it? Please leave a message in the chatbox below and share your experience!😘

Free Download FileBird Plugin

You may also like: How to Upload and Create a Document Gallery in WordPress

Tools for Building and Editing Shopify Themes

Selling online is the most popular and easiest way to generate additional income. Consumers these days prefer to buy products through e-commerce websites or special marketplaces. Many of them earn from the difference between the wholesale and retail prices. In any case, people who want to automate processes will need Shopify.

Even after people have spent a lot of time looking for the perfect theme for their online store, it may not quite fit their creative vision. This is because most drop-shippers and store owners want to make visual improvements. If you are a completely new user, it may seem daunting and overwhelming at first. But this is a misconception. Don’t let it slow you down. Here’s the curation of the advanced tools and visual editor apps to get you started.

Developer Tools

If you prefer creativity and have some initial HTML knowledge, use one of the following editors.

Shopify CLI

It’s a must-have tool that helps automate many routine tasks. With Shopify CLI for themes, developers can use dummy data when testing applications. By filling stores with fictional products marketers can customize all pages and test the effectiveness of a particular template. This is the backbone of any online business theme development for Online Store 2.0.

Shopify Cheat Sheet

At the heart of this e-commerce platform is Liquid, a programming language based on visual objects and different filters. Without this Liquid cheat sheet, effective analytics can hardly be obtained through this platform. It’s a database of all visual elements to load the content of your stores. Be sure to use this if you prefer an original style for every platform through which you sell products.

Theme Kit

It’s an editor that is understandable even for a beginner. That is why the number of downloads is in the hundreds of thousands. Once the theme pack is activated, people track changes and improve visual objects. This can be done in 2-3 clicks and even on mobile devices. Theme Kit editor is compatible with Windows, Linux, and OS X.

Visual Tools for Merchants

Ways to help you as merchants customize the content and appearance of your store.

Code Customizer

Code Customizer on Shopify app store

Code Customizer is a free-to-install app for custom HTML/CSS/JS bt Ecomfy. An easy-to-use app with many useful features allows online store owners to simplify their business. We are talking about suppliers of food, clothing, souvenirs, auto repair shops, and others. With universal tools, they can easily insert a predefined framework of code in seconds. The same goes for integrations with Google Analytics, FB Pixel, etc. This is especially useful for entrepreneurs who are involved in a variety of services, including repairs and delivery.

Plus, this app helps to validate custom HTML, JavaScript code by displaying an error in the code editor. This is a must-have for any beginner.

Custom Css Pro

Custom Css Pro on Shopify app store

For any store owner who mastered coding and wants to change liquid files, this editor is the best tool. Custom CSS Pro App is confirmed by dozens of reviews from marketers who supply a wide variety of goods. With this app developed by Heaven3000, users add CSS code to Shopify templates, that allows them to customize the page as they see fit. We’re talking about redesigning, hiding certain elements, and so on.

Other tools

Due to the launch of new section-based theme architecture, some previously helpful code editors are out of support. However, you can still fork the repo to suit your own needs.

Shopify Liquid code examples

This resource helps you see how different website elements can be written in Liquid.

Many developers prefer examples that allow them to see how to implement specific components. Of course, without such a strategy, users would always see errors on the pages of the website. Divided into 7 categories, this library contains the most important global templates and other sections/products examples. Such pre-defined code snippets help managers understand how the modular sections work. People can even add such examples directly to their Shopify themes.

Find out more: Add a clickable Call-to-Action Button to your Shopify Theme

Slate

Slate Shopify theme code editor

Slate guides developers by providing a tested workflow and opinionated development toolkit.

This editor is realized to help marketers with their workflow. People who want to speed up the process should choose it. The new general-purpose platform has an integrated guide. This editor is known for its ability to adapt to the needs of more experienced developers. With such a tool, the user adds CSS for different screen sizes and uploads themes in a few clicks.

Polaris

It is a design customization platform that includes the React library. Polaris helps developers craft the Shopify admin and optimize that space for merchant workflow.

This product is integrated with an HTML/CSS editor which allows users to improve interface elements. Polaris is more than just a toolkit for developers. This is due to the flexibility of being able to change almost any element.

Each of the listed editors is original in its own way, so you can choose any option. These nine programs are suitable for a beginner and a wholesale developer in different ways. Therefore, before loading a specific version, it is worthwhile to figure out what tasks will have to be performed.

Avoid common issues when editing Shopify themes

The task is difficult when it comes to making updates and people have not mastered HTML or Liquid. This is especially true when designers prefer complex ideas or when time is of the essence for them. In this case, business owners or managers can make a lot of mistakes and have to rebuild the template from scratch. If novice developers and designers can’t find a suitable theme for their store, they should follow our advice to tailor the current template to specific needs:

Inspect before deployment

If users have no experience with customizing websites, they should use additional tools and guides. This is the only way to figure out how certain HTML and CSS segments affect the way content is displayed. Of course, in this case, you cannot do without a detailed guide. In Chrome, novice developers can use the inspector for the main elements they should improve. Once checked, people can use this code to edit theme files.

Use backup files

Such a feature is integrated into every editor. Whenever people make changes, it takes effect after clicking the Save button. Since any minor mistake in theme customization can ruin the graphic design of your website, be sure to back up your theme files. Be especially careful so that you don’t have to constantly redo the template.

Try to make small updates

Shopify is usually designed for more than just making your templates visually appealing. In most cases, you will have to adapt the style to the needs of managers and customers. This means that the parameters of the objects affect the correctness of filling out forms and placing an order. E-commerce focused on mobile devices is also important. When people make a lot of changes, it affects the functionality significantly, which is undesirable. Avoid adding graphics that slow down page loading.

In Summary

Editing Shopify content gives people more control. We’re talking about customization and design of visual elements.

After spending some time mastered HTML or Liquid, store owners and novice developers can make changes in 2-3 clicks. Using effective tools also eliminates the need to spend extra time on design and programming. So, finding a good editor is considered a key challenge for business owners looking to launch their own store. If you take our advice into account, you will definitely not be disappointed.

Guest Author

David Walker economic writer and content creator. Strives to meet your requirements within your given deadline. David has acquired over ten years of work experience in finance and investing. Now he working for the company ICOholder.

How to Upload and Create a Document Gallery in WordPress

Want to create a good-looking document gallery in WordPress?

A content-rich WordPress website is not only written in words but also showcases plenty of media, documents, and graphics.

When you want to share those contents, you can’t upload them to the WordPress media library. Or when you managed to do it, it looks kind of austere and unappealing to readers. They might think that is some issue or harmful file and hesitate to click on it.

This article will help you successfully upload those necessary file types. And display them nicely on any WordPress page or post gallery.

Uploading Document File Types to WordPress

What’s allowed to be uploaded and what’s not?

WordPress by default allows many document file types:

  • .pdf (Portable Document Format)
  • .doc, .docx (Microsoft Word Document)
  • .ppt, .pptx, .pps, .ppsx (Microsoft PowerPoint Presentation)
  • .odt (OpenDocument Text Document)
  • .xls, .xlsx (Microsoft Excel Document)
  • .psd (Adobe Photoshop Document)

Those are the most widely used file types. But if you need to upload a document file type that is not supported, you can easily get the know-how below.

WordPress 5.8 adds WebP support

Also, it’s worth mentioning that WordPress 5.8 adds new fields to Site Health to help determine if a site is capable of processing WebP format image files. And you can also manage these WebP files efficiently with the FileBird plugin.

In my personal experience, I often use these ebook formats including .prc, .epub, .mobi, .azw, .djvu, etc. Despite not being common, those file types have been existing for a very long time and actually got many advantages in terms of sharing among platforms and reading user experience on different devices.

Or when designers want to upload their graphic files such as .svg, .cad, .dwg, motion graphic files, etc. And Apple documents such as .numbers, .pages, and so on?

Upload unpermitted document file types

To allow those file types to be uploaded, you got to install some WordPress pre-built code to implement it, and here I choose File Upload Types. This is a fast and direct solution.

A plugin to allow uploading more file types

Right after activation, you’ll see a list of file formats that are well categorized in different functionality and media types.

A quick tip: You can use Ctrl + F (or Cmd + F) to search for the file type/format you want.

So when I want to get webp file types, I can easily locate them and tick the corresponding checkbox. Then all I have to do is to click Save changes and carry on uploading those files. Yayks!

Categorized File Type list in Upload Plugin

Another good thing about this plugin is it allows you to add custom file types. It’s just as easy as shown in the screenshot above. Just fill those fields including the file description, MIME type, and its extension, and then you’re good to go.

We won’t have to refresh or leave the page in order to complete those tasks. But of course, make sure you click Save Settings after making changes.

When you finish uploading all the necessary file types, we move on to the next step of adding those files to a document gallery.

How to Create a Document Library with FileBird and Gutenberg

1. Organize Your Documents in Folders

This tutorial is about how to post a document gallery page in the WordPress Gutenberg block editor.

These are the prerequisites to make this guide work for you:

Let’s start by categorizing your uploaded document attachments. It can be done very easily thanks to FileBird’s drag-and-drop user interface and smart context menu.

Categorized document folder files

2. Install FileBird Document Library plugin

FileBird Document Library is a free plugin to help you showcase your document category on your WordPress page/post. So please install and activate this plugin on your WordPress site.

filebird document library plugin

DOWNLOAD

3. Add the Gutenberg Document Library Block – and Done!

Search for “FileBird Document Library” and add it to your current page.

Creating document gallery with Gutenberg block

On the left settings panel, you can choose a single folder, alternatively, hold Ctrl or Shift to select multiple folders. There are various built-in options to help you display the library layout in the perfect design for your web styling. So feel free to play around with pagination, number of document items per page, sort type, sort by, and so on.

Select a folder to output files and display document library

Those folders will then output the list of document files. If you choose to publish the library as a grid gallery, then the page looks like this on the front end.

FileBird document library grid view

If you want to publish the library as a list table, then here’s how the end result of your published page looks.

FileBird document library list view

Great, this little task is done now! I hope you’re able to achieve the look and feel you’ve always wanted for your document gallery. :)

Alternative Ways to Publish a Document Library

Create a Document List in WordPress

If you manually add a document to a WordPress page or post, all it shows is the file name which is also linked to that file’s URL or download link.

A document file without its thumbnail makes it less appealing and fewer people will click it.

Here’s a document with its link.

Link to Document in WordPress post

In Gutenberg, you can make it look a bit better by using the File block. This is how it looks when I use File blocks to add documents one by one.

Document list in Gutenberg

That’s all you can do within WordPress default.

Fortunately, there’s a plugin to help you enhance the document gallery with thumbnails for each file type and also provides multiple options to display them in a good-looking showcase.

Now think about which page/post editor you’re currently using because Gutenberg editor takes some different aspects from the classic editor. Following are the guidelines for these 2 different WordPress page/post editors.

Create a Document Gallery in Classic Editor

Required plugins: Document Gallery

In order to add a well-aligned gallery of documents in WordPress classic editor, all you need is the plugin Document Gallery by Dan Rossiter. Just download and install it for free from the WordPress repo.

1. Navigate in Document Gallery plugin

Upon activation, you’ll see a new menu Document Gallery created under Settings menu. That is where you head over to when you need to adjust advanced settings.

In the scope of this tutorial, you don’t need to dive into it too much as this plugin actually allows convenient access right from the WordPress page/post editor.

2. Add Media to your document library

When editing any page or post, click Add Media > Create Document Gallery > select all necessary document files > Create a New Document Gallery.

3. Set up links, layouts, and thumbnails

Next, you’ll be seeing the setup part for this gallery.

Edit document gallery settings

You would want to care about these settings:

  • Link To: choose Media File if you want the users one-click to download, or Attachment Page if you want to direct users to the file page.
  • Columns: how many columns you want your gallery to display in
  • Use auto-generated document thumbnails

Then you click Update to save all the changes. This is how your 3-column document gallery looks on the front-end.

Document gallery display in WordPress post

Create a Document Gallery in Gutenberg Editor

Like it or not, Gutenberg is enforced and will likely replace the Classic editor in a few years. The fact that many clients really enjoy using Gutenberg blocks makes sense for us to keep it updated with the right Gutenberg-friendly plugins.

Below is the tutorial on how to use Document gallery for Gutenberg users.

Required plugins: Document Gallery & FileBird

For those who are not familiar with FileBird, it is a WordPress media organizer that comes with a great Gutenberg image gallery block. Now FileBird v4.3.1 and its later releases also support document gallery block via dg shortcode (Document Gallery plugin supported shortcode).

1. Organize document files in a folder

After activating those two plugins, navigate to your Media library and upload your document files to a folder. If your files were already uploaded, just bulk select and drag n’ drop them to the destination folder.

Here I’ve renamed the folder as Document and placed it on the top of the folder tree for easy view.

Document Folder ID in list mode

2. Look for the folder ID

In the media library’s List mode, select that Document folder and look into its URL. You’ll see fbv=folderid. Refer to the screenshot above, fbv=308 meaning the folder ID is 308.

3. Paste the document display shortcode to your page/post

[dg id=-1 fbv=308]

To display this document folder in a page or post using Gutenberg editor, you add this shortcode along with the folder ID:

Create a document gallery with shortcode in Gutenberg

This shortcode pulls the document gallery settings and applies them to this FileBird folder to help those contained documents display on the Gutenberg front-end.

Just as simple as that, when published, your new WordPress document gallery looks like this.

WordPress-Document-gallery-on-the-front-end

As you can see, there are some workarounds to creating a document library for your WordPress website. If you want to have predesigned icons/thumbnails for your file types, just use FileBird Document Library. It is ultralight and works seamlessly with Gutenberg. It also comes with a shortcode to work with other WordPress editors.

DOWNLOAD DOCUMENT LIBRARY PLUGIN

Final Thoughts

This article aims to demonstrate all the steps you have to take to upload unallowed file types and create a nice document gallery in WordPress with auto-generated thumbnails.

Should you have a better solution, don’t hesitate to leave your opinion in the comment box or chatbox below.

We hope you can get it done in no time. Can’t wait to see your document gallery published!

You may also like: Best WordPress Media Plugins for Your Ecommerce Store