Transform WooCommerce Attributes into Images

Transform WooCommerce Attributes into Images

Attributes can be utilized for essential product refinements, for example color or size. In addition they give more specialized data about your products and can be used for setting variable products. In this article, you’ll learn more about item attributes in WooCommerce and how to turn these attributes into images with ease.

What are WooCommerce Attributes?

Attributes work likewise to Categories in WordPress. Notwithstanding, for this situation, Attributes are connected to Products as Categories are appointed to Posts or Pages in WordPress.Attributes are a key element of most WooCommerce stores, however, they are effectively misjudged. They’re additionally regularly mistaken for WooCommerce varieties. Attributes add additional information to your WooCommerce products. Attributes are likewise helpful for searching and sifting products. In the event that you offer attributes to products, clients can channel utilizing them. Frequently this separating is finished by WooCommerce gadgets that enable clients to channel products.

How to add Attributes and how to use

Go to Products > Attributes to manage, alter, or delete attributes and their terms. Here you can rapidly and effectively create global attributes and their terms.

Create a new Global Attribute

In the left sidebar of the attributes page you can add new global attributes. Here you can set the following data:

  1. Choose a Name (e.g. Color)
  2. Include a Slug (e.g. color)
    if empty the URL will be adapted by the attribute name automatically
  3. Enable Archives (e.g. attribute page with all “black” products)
    When enabled you can see a page with all products having this attribute.
  4. Select a Default sort order.
    Pick between “Name”, “Name (numeric)”, “Term ID” or “Custom requesting” where you choose by relocating the terms in the rundown while arranging the terms. “Name (numeric)” is pertinent if the qualities are numbers. On the off chance that you select “Name”, it sorts sequentially with 1 and 10 going before 2. In the event that you select “Name (numeric)” it sorts dependent on numerical esteem.

Add Attribute Terms (Values)

After you have added a global attribute you can assign values to this specific item.

  1. Click on “Configure Terms” link to add fitting attribute values (terms)
  2. Next Add New “Term name” (e.g. Black)
  3. Set a custom URL
  4. Add a description
  5. Click on “Add new …” button

Add global attributes to the item:

Now you have setup a new Attribute called color with a term “black”. Last step is to assign this to your products of course. This will enable customers to filter by black colored products for example.

  1. Go to: Products > Add / Edit Product.
  2. Select the Attributes to tab in the Product Data.
  3. Here you can pick any of the attributes that you’ve made in the drop-down menu.
  4. Select Add
  5. On the off chance that you chose a global property that you recently made,
    you can choose terms that you included already.
  6. Otherwise you can also create new attribute values directly

Create Custom Product Attributes

Alternatively you can create custom attributes you just need for one product:

  1. Go to: Product > Add Product.
  2. Select the Attributes tab.
  3. Select Custom item trait in the dropdown and pursue the above advances.

However this is not recommended as custom attributes are not filterable. Furthermore they are saved in the postmeta database and are not easy to manage: for example if you need to change an attribute name.

Why Attribute Images rather than Text matters:

As visuals take the front line of substance promoting techniques and search engines intensely compensate rich substance, incorporating images, illustrations and data details into the composed substance is a characteristic positive development.

Engagement rates bounce 47 percent with images, and appealing visuals increment ability to peruse by 90 percent.

Covered up underneath each in-line picture is a progression of SEO promoters. Grapple labels, portrayals, and alt. portrayals can be a characteristic spot to incorporate watchwords and article depictions that will be crept via search engines.

Would you like to peruse “BLACK” or see a picture with a Black color?Using image and color swatches in place of text attributes makes product listings easier to interact with. Image-based product attributes appear more visually distinctive. When selected by WooCommerce store customers, attribute images behave in the same way as conventional text attributes. For example showing different names of colors of a T-shirt is less interactive instead of showing actual color buttons.

How to add Attribute images using our plugin:

In the wake of setting up our WooCommerce Attribute Images plugin, you can appoint your first picture to a characteristic.So go to wp-admin > products > attributes. At that point, you can either make another property or open a current one. When opening a current one, tick on arrange terms. On the base of the characteristic settings, you will locate another Option to set a property picture. You can set colors, widths and more styling options directly in our plugin settings. When configuring swatches, WooCommerce admins may not have images which are suitable for different attribute fields. Thankfully, when no image is present, the Attribute Images WooCommerce Plugin will automatically display a regular text field. Moreover, store admins can also configure attribute images to display regular titles and tooltips.

Make WooCommerce Variation Swatches

WooCommerce Visual Attributes Swatches replaces the standard WooCommerce varieties attributes dropdowns by names, radio catches, hues, pictures and that’s just the beginning. Charm Visual Attributes Swatches enables you to modify the look and feel for any variety trait, dropdowns, names, radio catches, hues, and pictures are bolstered.Relegate an image to each variety and let Woo Visual Attributes Swatches change your item picture effectively on the item page. By utilizing Visual Attributes Swatches, you can undoubtedly change the look and feel of your item attributes without experiencing the documentation incorporated into the plugin.

Charm Visual Attributes Swatches incorporates a skin editor which enables you to redo each part of your attributes to make the ideal look and feel for your shop.

3 thoughts on “Transform WooCommerce Attributes into Images

  1. JohnT says:

    Above article only talks about variable products.
    Do you have a plugin which assigns images to attributes for non-variable products (results in non clickable images)?
    If possible those images can then be positioned anywhere on product page (even among other images in product gallery).

Leave a Reply

Your email address will not be published. Required fields are marked *

We use cookies to give you the best online experience. By agreeing you accept the use of cookies in accordance with our cookie policy.

Close Popup
Privacy Settings saved!
Privacy Settings

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here.

These cookies are necessary for the website to function and cannot be switched off in our systems.

Technical Cookies
In order to use this website we use the following technically required cookies
  • wordpress_test_cookie
  • wordpress_logged_in_
  • wordpress_sec

Decline all Services
Accept all Services