News Blog: WordPress & Joomla Extensions

WooCommerce Media Library With Folders and Filters

WOOCOMMERCE-MEDIA-LIBRARY-WITH-FOLDERS-AND-FILTERS

WooCommerce has become essential when creating e-commerce due to the facilities and tools it offers, but could this awesome plugin be a better tool? Well, the answer is Yes! But  think about a shop that contains thousands of products, options with, for each one, 5 images. Finding a media in order to reuse would be nearly impossible but… Good news! We have the solution for it ;)

Since we have talked about what it might take to have the perfect e-commerce, we are talking about one of the best solutions available in the market such as WP Media Folder, which is a plugin that offers wonderful galleries that you can use when you’re inserting images and videos on your Wordpress site but in addition to this, it also allows you to sort your files in folders and subfolders.

As you can see, you can use these two plugins to get a better performance because WP Media Folder is totally compatible with WooCommerce so you’ll have the perfect combination, WooCommerce to create and manage your e-commerce and WP Media Folder to have all your files ordered but that’s not all, let’s see how can we use this combination.

 

 

 

Using WooCommerce Media Folders

With the use of WooCommerce media folders, you’ll be able to improve your work as all the media will be ordered and you will be able to find in one or two clicks in order to use it to create a new post about the product or create a new one using the media inside the product.

We’re going to show an example of how to create and use these folders and create some case of use to give you ideas for your e-commerce improvement.

For this example, we’re going to use a clothing store, in the next image, you’ll see completely disordered media library with the product images inside.

 

disordered-media-library

 

As you can see, all the images are mixed; Shirts, sweaters, pants, theme images, everything is disordered and it could be really difficult to find one image in specific so… What I can do to solve it with WP Media Folder? With WP Media folder you will be able to order it to make the selection process easier, for example, we can create a folder for men and other for women inside them subcategories like pants, shirts, glasses and you can create a limit of 8 levels of subcategories so you can order it as you like.

The process to create a folder with this awesome plugin is really easy, just use the left side menu.

 

 

Create the parent folder by clicking on “Create Folder”, type the name and click on “Create”.

 

 

In order to create a sub-folder just place in the folder where you want to create the sub-folder and repeat the steps, you will be able to see an arrow that you can click to see all the subfolders.

 

 

Really easy process and the process to add the images to their respective folder is easier, just click on “Bulk Select”, select all the images and drop them into the folder/sub-folder where you want to add it.

 

 

You can also keep ordering the images by creating more subfolders for example shirts and pants, the subfolders will be also visible on the upper side of the folders dashboard.

 

 

And everything will be really easy to find.

 

 

But if you have a lot of folders? It could be really hard to find one in specific, WP Media Folder has a tool to make it easier too, the Textbox above the folders, just type the folder that you’re looking for and click on the enter key.

 

 

You’ll be able to see all the folders related to the one that you’ve typed.

 

Creating a product with the WooCommerce Media Manager

Okay, everything is perfect, you can create all the folders and order all your media inside the media library but, Can I use it in the WooCommerce media manager? The answer is absolute Yes! All the media will be available at the moment of creating a product for your e-commerce, just go to the product that you want to edit/add and click on “set product image”, you’ll be able to see the media manager with all the folders and images inside.

 

 

There are some options to filter and sort the images inside the folder/subfolder to help you to find the exact image that you’re looking for, you can edit the filtering options in Settings > WP Media Folder > Media Filtering.

 

filters-modify

 

Just modify and click on the Save Changes button. In order to use the filtering and sort options in the media library just click on “Sorting / Filtering” and select the options that you need.

 

 

You can also sort the folders in the menu by Id, name or custom order, it will help you to find the folder in the fastest way.

 

 

The process to set the image is the same so just select the images that you want to use for your product and click on the “Set product image” button.

 

Set your Logo with Image Watermarks

The images that we use in our products are really important as we sometimes could pay to models in order to have the best pictures to display our product's media, that's why we should use a watermark, a watermark is the best sign that we can add to the media that we have in our store.

Let's say we hire a professional model to take some pictures and show them to promote a show that we are selling but there are other stores selling the same product.

What happens if we don't have a watermark? Othe stores are going to be able to use these professional pictures that we took and the worst part is that they are not going to share the credit with our store.

But don't worry, with WP Media Folder you're going to be able to set a watermark to all your product images in the easiest way.

In order to set the Watermark to our product images, let's go to WP Media Folder Configuration > Rename & Watermark > Watermark Tab.

 

 

In this section, we are going to be able to see all the options available for the Watermark, first of all, let's enable the Image Watermark function and select an image for watermark by clicking on Select.

 

 

As you can see, we have selected the watermark, and also set the size of the watermark from pictures in order to make it smaller, there are other options that you can set like the position and the image margin, also opacity if you don't want the watermark to be full opacity.

The next step is, select the folders where we want to add that Watermark, that's the best part of this, you can select only the images from the Store and don't touch the images where you don't want to add the Watermark, so we will select only the Folder that we have created for this tutorial called Store Images.

 

 

Finally, click on Thumbnail regeneration and the Watermark will be added on all the sizes selected for all the folders selected.

 

 

The process will start and you'll see a bar indicating it, so when it finishes, the watermark will be added.

 

 

You can go back to your Media Library and see that all the images that we have selected, now have the Watermark.

 

Add Remote Videos to your Products to Make them Looks Really Professional

 

Another good practice when we are adding our products is to add videos.

Usually, depending on the product we offer, we could need a video describing what the product we're selling is, for example, if we sell video games.

Sometimes we can just reuse the videos that are already made, for example, for video games that have trailers and we can add it directly from YouTube using WP Media Folder.

In this example, we are going to add a trailer from a videogame to be promoted in our store, for this, we can go directly to the Product section of WooCommerce and Add New.

 

 

In this section, we can proceed to add the product as we normally do it.

Let's say we want to add the video directly into the description of the product, then we just go to the description, click on Add Media and we will see the option to Insert From URL so click on it and add the video URL, a shortcode will be added.

 

You'll see the shortcode in the description.

 

 

Finally, you can finish your product creation and you'll be able to see the video in the description at the frontend.

 

 

Now you can add videos to your products in the easiest and most professional way.

 

Another way to see the WooCommerce image folders

Here we’ll see an idea of how to use the WooCommerce image folders to show your products by creating galleries, it will look really great and you’ll use WP Media Folder to its max.

The clients are always looking for the most professional and easiest way to see the product that they want to purchase and what more professional than displaying your products in an awesome and responsive by using galleries? WP Media Folder can make that work really easier because you’ll be able to create awesome and different galleries just by clicking and selecting.

For this example, we’re going to create a gallery for a men’s clothing section, first, go to the media library, click on one of the images that you’re going to use for the gallery and find the “Image gallery link to” option at the right section of the lightbox that will be showed and click on the paperclip icon. 

 

linking-product-image

 

You will be able to see all the pages and products available in your wp site, select the product that corresponds to that image, you can use the search textbox to find the right product and click on “open link in a new tab” if you want it to be shown in a new tab, finally click on “add link”.

 

looking-for-product-link

 

Repeat this process with all the images that you’re going to use for the gallery, after it, go to  Add New Post/Page, and select the “Wp media folder gallery” Block at the WP Media Folder section.

 

wp-media-folder-block

 

Now Click on Media library.

 

selecting-media-library-on-block

 

Select the mages that you want to use for the gallery (the ones where you’ve selected the link) and click on Create New Gallery.

 

Create-new-gallery

 

Now define the order by dragging and drop the images, delete images from the gallery if you want and click on Insert Gallery.

 

Insert-gallery

You will be able to see a menu on the right section of the block, choose the theme that you want to use for your gallery.

 

select-theme

 

Finally, find the “Action on click” dropbox and select the “Attachment page” option at the right menu.

 

image-action

 

Finally, click on publish and that’s it, you’ll have an awesome store made with a gallery.

 

Men-slide-store

 

Just click on it and let the magic work, you´ll be able to see all the products that you´ve set.

 

Product-finished

 
As we can see here, we have created an amazing gallery that besides looking professional, it can fit in any part of your website and will allow the clients the easy access to your products, since they will only have to do is slide and click on the product that they want to see or buy.

Customers always look for stores on the Internet that are pleasant to look at and easy to handle, as well as being quite original and have a large catalog displayed in the most professional way possible, as it was previously observed, the combination of these plugins allow you to make several of them in a really fast and simple way, what are you waiting?

Go now and get WP Media Folder now: https://www.joomunited.com/wordpress-products/wp-media-folder
 

3
Applying Watermarks on WordPress Images
WordPress File Download and Themes: Download Files...
 

Comments

No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Guest
Monday, May 10 2021

Captcha Image