How to customize the product image in a WooCommerce

Being able to determine how the images will be displayed in the catalog and for each item is very important, since this is the face of it and what the buyer aspires to acquire.

But this may seem a little tricky for those who don't yet manage all of the tools and programs included with WordPress, such as WooCommerce.

WooCommerce also gives you the ability to have all your sales done in a clean, fast and organized way. You can create and offer your customers electronic invoices and attach payment files thanks to WooCommerce Checkout Manager.




What do I need to have a product image in WooCommerce?

In order to work with this e-commerce tool it will be You must have an account on the WordPress platform and be subscribed to a plan.

The latter is essential because, as you should already know, WooCommerce is a plugin for this content management service. And all extensions are exclusive to subscriber customers.

Beyond that, it is advisable have at one's fingertips the images to use, as well as the rest of the relevant information in relation to the products.

With this ready and present, you can start working on creating and customizing a product image in WooCommerce.

From scratch: create the product

Before you can add or customize any image, you will need to create the item or product you will work with and which will be available to customers.

How to customize the product image in a WooCommerce

 

For this, you need to open and log in to WordPress, then the customizer or " WP admin »Is located in the left side panel.



In this way, it will redirect us to the account administrator screen, where you can access, from the side menu, in the section » WooCommerce »To the card» Product «.


Therefore, the options to choose from will open " Add new «, So that we can fill in the fields with the information corresponding to the article or service.

Before clicking on » Public «, The image must be inserted, otherwise, the platform will place a default one, which will be displayed when you access the product link.

Customizing the default image

Now, to customize the image that will be displayed by default, it is better to have the image to link in the » Multimedia library »Of our WordPress.

Afterwards, you will have to go to the same " WP admin ", But this time by choosing the card" Media " and then " library »To be able to click on the desired file.

When the view opens, the link to the image can be copied from the right side. Through this link, the product image will be added to WooCommerce.

The next step is to access the file " functions.php »Or directly to the plugin» snippets «, The latter is the most recommended.

How to customize the product image in a WooCommerce

So, let's find the card " snippet »From the side panel and click on the mode» Add new »And proceed to paste the following code:


add_filter ('woocommerce_placeholder_img_src', 'bp_woo_placeholder', 10);


function bp_woo_placeholder($image_url) {


$ image_url = ";

returns $ image_url;}

Finally, the link to the library image we copied earlier will be pasted in quotes, and this will change the default image.

Customize a product image with WooCommerce

If what you want is to customize a specific image for a particular product, you have to open " WP admin »E in» WooCommerce " go up " Images product «.



In this section it will be possible to characterize both the images of the individual products and those shown in miniature in the catalog.

Then, you can change the " Width of the main image " and the " Width of the thumbnail »By entering the desired values ​​in numbers.


Also, you can set the specific cropping settings on thumbnail images to » 1:1 «,» custom " And " No clipping «.

It will therefore be up to the user how to customize the image of product with WooCommerce, so we will have to wait for the changes to be made satisfactorily.

If the product you want to customize is in high demand and you have already run out of Stock WooCommerce, it gives you the option of being able to hide them temporarily. 

If you are interested in the world of online sales, remember to also use the Instagram Shooping application to make your products more public.


add a comment of How to customize the product image in a WooCommerce
Comment sent successfully! We will review it in the next few hours.