How to Set Up WooCommerce Dynamic Pricing & Discount to Scale Up

A good product-pricing practice is one of the most effective strategies that could be used to scale or multiply sales on your website, as it is a way by which you dynamically offer various kinds of suiting prices, discounts, or offers to your customers. The WooCommerce dynamic pricing & discount feature is a fantastic way to set up all kinds of discounts and pricing quickly, effortlessly, and automatically on your WooCommerce-powered site.

In this article, we will teach you how to set up a WooCommerce dynamic pricing strategy for your store with the help of a powerful WordPress plugin called YayPricing developed by YayCommerce. Below are the contents to be discussed:

  1. What is WooCommerce?
  2. What is the YayPricing plugin?
  3. Advantages of using WooCommerce dynamic pricing on a website.
  4. Understanding the features of the YayPricing plugin.
  5. What are the different pricing rules and their pricing types?
  6. How to use the additional setting option available in YayPricing

What is WooCommerce?

WooCommerce is a very popular WordPress plugin developed by ‘Automatic’, it is the world’s most popular open-source eCommerce solution for WordPress, WooCommerce’s core platform is free, flexible and it is amplified by a global community of users and developers. With this plugin solution, anyone can turn their regular website into a fully functioning online store, with all the necessary e-commerce features integrated.

WooCommerce-cover-1

What is the YayPricing – WooCommerce Dynamic Pricing & Discount plugin?

YayPricing – WooCommerce Dynamic Pricing and Discounts is a WordPress plugin for your WooCommerce-powered website, which helps you adjust WooCommerce pricing, create multiple pricing and discount rules to further enhance buyers’ experience and make more sales from your store.

This plugin with its very nice and easy UI/UX will help you create beautifully-planned campaigns suitable for promotions, special offers, bulk pricing, BOGO, bundle pricing, deals of the day, flash sales, etc.

Advantages of using WooCommerce dynamic pricing & discount on a website.

The benefits that come with using WooCommerce dynamic discount and pricing on a website is so enormous, and here are a few to mention:

  • Converse more targeted sales to improve the buying percentages of specific products or services.
  • Build customer loyalty by offering discounts to repeat customers.
  • Attract new customers with competitive pricing and promotions.
  • Increase the overall sales revenue through bulk purchase settings.
  • Acquire a better understanding of your shoppers’ behavior and statistics.
  • Reduce cart abandonment through valuable offerings and credibility prooves.

The features of the YayPricing plugin.

Once you’ve installed the YayPricing plugin successfully on your site, navigate to WooCommerce > YayPricing. This is where you would get tabs that will allow you to create rules applicable to your products.

01-YayPricing-Features

Some of the different option tabs include:

  • Product Pricing – This helps you create product pricing rules that affect the price of products. You can also create a product fee or discount.
  • Cart Discount – This helps you create cart discount rules and is used to create cart discount coupons that apply at checkout. You can also combine discounts in the Settings section.
  • Exclude Rules – This helps you create rules to decide which products will not be affected by Product pricing rules.
  • Settings – This helps you activate further, various settings related to the rules and exclusions that you had created. In a manner of how the rules are to be applied to various products or product types.

What are the different pricing and discount rules?

02-YayPricing_Types-of-Rules

This tab will assist you with making rules to change the cost of items.
The cost will be changed when customers add them to their cart (these changed costs won’t be displayed on the item page ).

There are three principal sorts of rules to set for product pricing and discount:

  • Simple adjustment
  • Bulk pricing
  • BOGO (same product)
  • Buy X Get Y

Simple adjustment

03-YayPricing_Types-of-Pricing

This rule type allows you to set up basic, non-complex rules for product pricing and then gives you the option to select product categories, names, variations, tags, prices, or specific products that get affected by this rule.

There are 5 types of pricing methods in this rule.

  • Fixed discount
  • Percentage discount
  • Fixed fee
  • Percentage fee
  • Fixed price

(1) This sub-tab will allow you to see the 5 methods of the Simple Adjustment Rule.
(2) This option will allow you to activate or deactivate the Cart option, Product page option, and Schedules.
(3) This will allow you to set the condition for the application of the Simple Adjustment Rule, either to have it applied to All/Any of the set conditions.

Bulk Pricing

04-YayPricing_Bulk-Pricing-rule

This is the pricing and discount rule type that will allow you to set up bulk pricing rules (in form of product quantity range or single quantity) for product pricing and then gives you the option to select product categories, names, variations, tags, prices, or specific products that get affected by this rule.

Just like the previous rule type mentioned above, there are also 5 types of pricing methods available in this rule.

  • Fixed discount
  • Percentage discount
  • Fixed fee
  • Percentage fee
  • Fixed price

Similarly, the further options in the sub-tab are exactly the same as the options in the Simple adjustment rule mentioned previously.

(1) This sub-tab will allow you to see the 5 methods of the Simple Adjustment Rule.
(2) This option will allow you to activate or deactivate the Cart option, Product page option, and Schedules.
(3) This will allow you to set the condition for the application of the Simple Adjustment Rule, either to have it applied to All/Any of the set conditions.

BOGO and Buy X Get Y

05-YayPricing_Buy-X-Get-Y

The Buy X Get Y rule type allows you to configure a pricing rule which is gift-oriented, i.e You can offer free items or items with a discount when a customer buys any of the products that fall in this rule. Then it gives you the option to select product categories, names, variations, tags, prices, or specific products that get affected by these rules.

The BOGO rule type allows you to offer free items (of the same product) if someone buys a specific quantity.

(1). This is a sub-tab that will allow you to see 2 methods available for the Buy X Get Y Rule.
(2). This sub-tab will allow you to activate or deactivate the Cart option, Product page option, and Schedules.
(3). This sub-tab will allow you to set the condition for the application of the Buy X Get Y Rule, either to have it applied to All/Any of the set conditions.

Get a free item: To easily understand this, with the Buy X Get Y rule. When a customer buys a certain product A for a certain amount, they will get a free amount of product B added to their cart. To understand this with the BOGO rule. Think of when a customer buys a certain product A for a certain amount, they will get a free amount of the same product A added to their cart.

06-YayPricing_Get-Free-Items

Example

Consider the screenshot above, we are setting up the rule which allows customers to get 1 Cap for free when they buy 1 quantity of T-shirt.

Here is how the cart looks like with the free cap item added at 0 costs after we added 1 quantity of T-shirt:

07-YayPricing_Get-Free-Item-in-Frontend-Look

Cart Discounts

This rule type allows you to set up a product pricing campaign that affects only the Cart page and also allows you to Show a tooltip when hovering the price on the cart page.

The pricing methods available in this rule are of 3 types.

  1. Fixed discount
  2. Percentage discount
  3. Fixed product discount

(1) This is a sub-tab that will allow you to see the 3 methods of the Cart Discount Pricing Rule.
(2) This sub-tab will allow you to set the condition for the application of the Cart Discount Rule, either to have it applied to All/Any of the set conditions.

Show the Tooltip option on the cart page and checkout page when hovering over the discount.

08-YayPricing_Cart-Discount-Settings

It will appear like this in frontend:

09-YayPricing_Cart-Discount-Tooltip

Percentage discount: It means a fixed discount based on a set percentage. Example: If you set the T-shirt product discount to 20%, and its basic cost is $40, the discount on the cart page is $8.

Fixed product discount: It means a fixed discount based on the line item. Example: If you set a fixed product discount to $10. If your cart has 1 item of T-shirt, the discount is $10.

Exclude Rules

This tab is where you can exempt some products by method of product filters from being impacted by all the pricing rules that you’ve set up for the site.

11-YayPricing_Exclude-Rule-Settings

Wrapping Up

To wrap up, WooCommerce dynamic pricing and discounts are an essential part of any online store. Setting up WooCommerce dynamic pricing automation is a great way to maximize revenue and keep customers coming back. With the help of the YayPricing plugin, you can automate the entire process and make it easier to manage your store. Not only will this help you save time, but it can also help you increase your sales and profits in the long run. Don’t hesitate to invest in this smart practice today and reap the rewards of increased sales.

7 Actionable Tips to Speed Up Your WordPress Website

The first few seconds a visitor spends browsing a website are often the most important. If a site is slow, users may leave in search of a better site.

Did you know?

  • More than 4 seconds delay in loading a website causes 1 in 4 visitors to abandon it.
  • Almost 46% of visitors won’t return to a website if it takes too long to load.

In this post, we’ve shared some tips to ensure that your WordPress website is running at peak speed and performance. But first, it’s important to understand how speed can affect the success of a site.

How speed can affect the success of your WordPress site?

Website speed has an impact on everything from sales to search engine rankings, meaning slow websites will pay the price for delays. Most users claimed that they are less likely to visit a website again if it takes too long to load.

  • 1-second delay in page loading results in 11% fewer views.
  • If you had a $100,000-per-day business, a one-second page delay may cost you $2.5 million in lost sales per year.
  • A one-second delay decreases customer satisfaction by 16% and 7% loss in conversions.

In short, speed is the most important factor for any website. So, let’s test how fast your WordPress website is.

You May Also Like: 10 Proven Tips To Prevent Your WordPress Site From Being Hacked

How Fast is Your WordPress Website?

With the help of several well-known tools, including Google’s PageSpeed Insights, GTmetrix, Pingdom Tools, etc. you can evaluate the speed of a WordPress website. It should be noted that if you utilize several tools, the outcomes may differ due to the underlying testing methodologies.

Site Speed Test GTmetrix

Does Your WordPress Website Pass Core Web Vitals?

In June 2021, Google officially changed its ranking algorithm to include Core Web Vitals.

Core Web Vitals Metrics Include

Core Web Vitals

LCP: This metric evaluates the speed of your page in proportion to the biggest element that is on your site—whether it is an image, a video, an animation, or text.

A favorable LCP score will be anything less than 2.5 seconds when the page starts to load.
A poor LCP is typically caused by your server’s response time, slow resource load times, client-side rendering, and blocking CSS and JavaScript.

FID: FID measures how quickly users interact with your page upon first impression or when they first visit your website.
The First Input Delay should not exceed 100 milliseconds.

The poor FID is typically caused by heavy JavaScript execution. Other factors include redundant CSS and HTML resources and render-blocking JS, which stops the main thread and leaves the user staring at an unresponsive screen.

CLS: CLS measures a website’s visual stability. It looks for any advertising with no dimensions, undefined animations, or images. Additionally, CLS evaluates the speed at which web fonts load and how much the viewable portion of a webpage’s layout shifts.

CLS score should be less than 0.1

The poor CLS is typically caused by images, ads, iFrames without dimensions, and custom fonts that can damage the user interface.

Want to revamp your website? Get top talent for your project with our Custom Web Development Services.

How to Speed Up Your WordPress Website: 7 Tips and Plugins

1. Reduce the Size of the Image

Images bring life to your content and drive engagement. According to research, using colored images increases people’s likelihood to read your content by 80%.

But if your images aren’t optimized, then it can harm rather than help. In fact, non-optimized images are one of the most common speed issues that are observed on WordPress websites.
Image optimization is all about striking the right balance between reducing your image files’ size and preserving an acceptable level of quality.

PNG and JPEG/JPG are the two most widely used image file formats for websites. According to W3techs, more than 70% of websites utilize these file types and around 54.3% use SVG, and 22.4% use GIF.

WordPress allows common image formats like WebP (Version 5.8+), JPG/JPEG, PNG, GIF, and ICO by default. ICO format is used for favicons.

Using WebP as an image format, images on the web are more lossless and lossy than with other image formats. A webmaster or web developer can create small, rich images with WebP to make the web load faster. Lossless WebP images are 26% smaller than PNG images.

Compressed Image

There are several web tools and plugins (e.g. Optimizilla) available online that you can use to compress your existing images without loss of their clarity.

2. Set Up a Website Cache

Implementing a website cache is another good move to make your website load faster. All requested files are saved when a site is accessed for the first time. When the same website is accessed again, these cached files are shown.

A CDN (Content Delivery Network) caches content on a proxy server that is situated closer to end users than the origin servers. A CDN can deliver content more quickly since the servers are located closer to the user making the request.

This makes sure that the files on your website won’t need to be retrieved and loaded directly from the server each time a user accesses it. Caching greatly reduces the number of resources needed to run your site, which can significantly speed up your website.

W3 Total Cache and WP Super Cache are the two most popular WordPress Cache plugins.

W3 Total Cache improves the SEO, core web vitals, and overall user experience by increasing website performance and decreasing load times by utilizing features like content delivery network (CDN) integration.

WP Super Cache, this plugin turns your dynamic WordPress blog into static HTML files. After an HTML file is generated your web server will serve that file rather than performing the relatively bulkier and more expensive WordPress PHP scripts.

Also, one can use Cloudflare, it helps speed up your WordPress site by up to 300% with Cloudflare’s Automatic Platform Optimization (APO) plugin.

3. Minify CSS, JavaScript, and HTML

Your website’s CSS, HTML, and JavaScript files can be minified to speed up page load time.

The term “Minify” is programming jargon for the process of eliminating unnecessary characters from source code. These characters, which are important for people but not for computers, include whitespace, line breaks, comments, and block delimiters. Minify the files of websites containing HTML, CSS, and JavaScript code so that your web browser can read them faster.

It’s simpler to combine files if their sizes are smaller. But, combining every line of code for each of your website files isn’t exactly efficient.
Instead, use the WordPress Autoptimize plugin to minify your HTML, JavaScript, and CSS. This well-liked plugin makes it simple to automatically aggregate and minify your scripts and styles.

You may also like: 4 Ways to Download WordPress Media Library

4. Reduce the Number of Web Fonts

The use of more web fonts frequently causes performance and speed reduction for website owners. To the rescue comes web font optimization.

Each font you use extends the time it takes for a website to load. Therefore, you must optimize each font you use. In addition to increasing page speed, optimizing web fonts also reduce overall page size and improves the core web vitals, particularly the CLS metric.

Web Fonts

If you use web fonts on your website, you should take every precaution mentioned below to ensure that they are delivered to your pages as quickly as possible and that their external hosting doesn’t slow things down.

  • Use a provider of web fonts that sends fonts via a CDN, or content delivery network. This is what Google Fonts does, and it speeds up font delivery.
  • Use fonts that you actually need. Don’t include font weights or style variations in your CSS that you won’t be using. You can always add them if you decide you need them in the future.
  • If using web fonts, be sure to correctly enqueue them.
  • Instead of hosting your own fonts on your own server, consider using a CDN.
  • Enqueue only the characters you require rather than the entire font library if you’re using a different font for the site title.

5. Reduce the Number of Redirects for Users

Users and search engines can use redirects to go to web pages with different URLs than what they originally requested. Sometimes a page is removed or its URL changes.

Follow the below steps when setting redirects on your website to make sure they don’t have a detrimental impact on the user experience:

  • Avoid Redundant Redirects: It is advised to avoid redirects where possible and to use this method only when needed. This will reduce unnecessary overhead and enhance the page’s perceived performance.
  • Chain Redirects: A chained redirect occurs when one URL is linked to another. The page becomes slower as more URLs are added to the chain. Chained redirects are bad for both page speed and SEO.
  • Clean-up Redirects: Your website may include hundreds of redirects, which can be one of the major problems affecting page speed. Old redirects may not work with new URLs, and backlinks can result in weird page errors. It is advised that you double-check every redirect you’ve set up and delete any that are no longer required. Keep the older links that receive a lot of referral traffic; delete the connections that get very little traffic. The practice will considerably increase page speed.

6. Choose a Quality Web Host

The hosting provider you select has an impact on your website speed and performance so choose a quality web host.
You must take into account a number of important factors when selecting your WordPress hosting, including speed, security, and dependability. The most key element you should take into account is “Your Needs”. You can save hundreds of dollars by analyzing your requirements before investing in WordPress hosting.

There are different types of web hosting services available, you can select the one which suits your needs and requirements:

  • Free WordPress.com hosting
  • Shared WordPress hosting
  • WordPress VPS hosting
  • WordPress dedicated server hosting
  • Managed WordPress hosting

Web Hosting

Now, after selecting the web host service type, you must be wondering which WordPress web hosting providers are best:

  • Bluehost: With over 2 million websites across the globe, Bluehost is a market leader in web hosting, particularly for WordPress sites. In fact, it’s one of the few web hosting providers that’s officially recommended by WordPress.

With Bluehost, you have to not worry about your website being slow even when there is a lot of traffic.

  • DreamHost: Over 1.5 million WordPress blogs and websites are powered by DreamHost. Additionally, they are an authorized WordPress hosting provider.

You receive a custom dashboard, one-click WordPress installation, automatic WordPress updates, unlimited space, unlimited bandwidth, and free SSDs with DreamHost, which makes your website load faster.

7. Try These WordPress Plugins

You can try out below WordPress plugins to skyrocket your WordPress website speed.

  • NitroPack [Freemium]: NitroPack has an all-in-one speed optimization solution. It integrates all the elements required for a lightning-fast website. NitroPack includes everything you need, including image optimization, code minification, caching, CDN, and lazy loading.

All optimizations are carried out by NitroPack in the cloud. In comparison to standard caching plugins, this makes it a very lightweight solution.

Nitropack claims that its users get a 69% page speed score boost on average after installing NitroPack.

  • WP Rocket [Premium]: WP Rocket is a premium caching plugin that offers various features. In addition to the features of cache preloading and GZIP compression, it offers to minify and combine CSS and JS files, lazily load images, get rid of render-blocking JavaScript resources, remove unused CSS, and schedule automatic database cleanups.

It’s the ideal solution for enhancing your Core Web Vitals scores and quickly speeding up your website.

  • WP Fastest Cache [Free]: The top-rated cache plugin in the official WordPress directory is WP Fastest Cache. WP Fastest Cache’s free edition comes with a number of advanced features.

With this plugin, site admins can delete all cached files or schedule them to be deleted at a specific time as well as minified CSS and JS files. They can also choose to enable or disable the caching option for logged-in users and mobile devices.

WP Fastest Cache plugin not only minifies HTML and CSS files- it combines them to make your code clearer and web pages leaner.

Wrap up

Go ahead and try out these actionable tips and plugins to speed up your WordPress website. Don’t forget to test your website speed before and after implementing these tips and tools. You will be surprised to see the results!

4 Effective Ways to Download WordPress Media Library

There are many scenarios in which downloading all WordPress media files becomes 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

DOWNLOAD

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 the 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 with 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 with your settings.

FREE DOWNLOAD

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 on 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 on 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.

The 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 the 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.

FREE DOWNLOAD

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 the 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 that owns 43,2% of websites all over the world (W3Techs, 2022) 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 the emails that are sent out to their customers beautiful and match their shop brand.

If you are one of those users who is using WooCommerce Subscription and would like to make your 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 do 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 include:

New Renewal Order:  This email was sent when a subscription renewal payment is made. It is sent to the 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 chooses to upgrade or downgrade 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 that 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 gets 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. The 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 an “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 you do for any plugin.

Note: Just in case your current WooCommerce plugin used for the Subscription model is not WooCommerce Subscription Plugin, YayMail can be easily integrated with SUMO Subscription and YITH WooCommerce Subscription thanks to their addon development.

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 the color, background, padding, etc., or change the titles of the WooCommerce Subscription information.

You can change the body text and other text as well.

Now we change the billing shipping design to 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 with, 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.

Steps to Adding WooCommerce Currency Switcher

  • How to add YayCurrency 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 locations

  • 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:

How to set up fixed product price per currency

To avoid fluctuation due to market rates, or to display a fixed price for specific products, you might want to use fixed product price per currency. To enable this function, go to WooCommerce product > Edit > Product data > General, and enter your fixed price to the product price fields.

In the video below you can see the steps to enable the WooCommerce currency switcher, add conversion fees, and set up a fixed price for each product based on the local currencies.

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 learned 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