When No Variation Image Available… (WooCommerce)

I had an interesting problem to solve today. I was working on a WooCommerce site with the Wootique theme, and we have products with lots of variations, but only some of the variations have their own image.

We wanted at way to put some kind of overlay on the product image when a variation is selected for which we have no picture. The featured product photo happens to be one of the variations, so we don’t want it just reverting back. The ideal situation involves keeping the featured product photo but doing some semi-transparent overlay with an apology message about viewing our fabrics page to get a look at the available fabrics for the item.

Overlay Design Goal

Even if that wasn’t possible, a good second would have been the ability to bulk update the variation images, but we are a little strapped for cash on this project so we weren’t going to invest in one of the bulk products plugins just for this. So that was out — instead it fell to me to program some kind of solution.

The first part of this task was the most tedius, poring over the code in an attempt to find the most appropriate JavaScript event to hook into, around the time that the user selects a new variation to view. Fortunately there was a suitably appropriate event which passed along exactly the needed information when triggered. Here’s how to capture it:

1
2
3
4
5
6
7
8
jQuery(".single_variation_wrap").on("show_variation",function(e, variation_data){
if(variation_data["image_src"]==""){
//add overlay
}
else{
//remove overlay
}
})

Another small challenge was finding the appropriate time to capture an event for the “Clear Selection” option. The overlay needed to be removed at that time as well as in the else branch above. Fortunately that one was a little easier to find, now that I knew my way around a little more of the add-to-cart-variation JavaScript file that comes with WooCommerce.

1
2
3
jQuery(".variations_form").on("reset_image",function(){
//remove the overlay
})

From there it was trivial to find the appropriate elements and modify them. My complete solution is in this zip file as a plugin. You will probably need to replace the ‘sorry.png’ file with one of your own. It’s not my most robust WP plugin ever, but it gets the job done.

Tagged with: , , , ,
Posted in Career, Code for Fun
0 comments on “When No Variation Image Available… (WooCommerce)
41 Pings/Trackbacks for "When No Variation Image Available… (WooCommerce)"
  1. … [Trackback]…

    […] Find More Informations here: abbysdoor.com/when-no-variation-image-available/ […]…

  2. Livermore CA says:

    … [Trackback]…

    […] Informations on that Topic: abbysdoor.com/when-no-variation-image-available/ […]…

  3. Manassas VA says:

    … [Trackback]…

    […] Read More Infos here: abbysdoor.com/when-no-variation-image-available/ […]…

  4. … [Trackback]…

    […] There you will find 77927 more Infos: abbysdoor.com/when-no-variation-image-available/ […]…

  5. more says:

    … [Trackback]…

    […] Read More: abbysdoor.com/when-no-variation-image-available/ […]…

  6. … [Trackback]…

    […] Read More here: abbysdoor.com/when-no-variation-image-available/ […]…

  7. … [Trackback]…

    […] Read More here: abbysdoor.com/when-no-variation-image-available/ […]…

  8. … [Trackback]…

    […] Read More Infos here: abbysdoor.com/when-no-variation-image-available/ […]…

  9. phentermine says:

    … [Trackback]…

    […] Read More here: abbysdoor.com/when-no-variation-image-available/ […]…

  10. hampton bay says:

    … [Trackback]…

    […] Read More: abbysdoor.com/when-no-variation-image-available/ […]…

  11. url opener says:

    this is really a nice post….

    I saw this really good post today….

  12. said, “if you wish to converse with…

    me, define your terms.” when trying to convey your thoughts to someone else it will be to your advantage to organize your thoughts into a coherent message before you start talking. stay on point and do not dilute your message with…

  13. strategies for success.because technical writers work primarily…

    in information technology-related industries, they need specialized capabilities and knowledge which may be beyond the skill set of the typical grant writer. however, good technical writers are also experts in less technical areas critical to those pur…

  14. wanted to write. instead of just sitting…

    down at the computer as i had always done, i went and bought “the chicago manual of style”. for those that don’t know, this book lays out the general rules and requirements that people expect to see from your work in…

  15. a blogger? a blogger is a person…

    that owns a blog and writes content for it. so what is a blog?a blog is basically a website that consists of posts about a certain topic. they are used to interact and communicate with people all over the world. everyone…

  16. other “quality” violations like spelling and grammar…

    mistakes. a catchy title that creates an impact is the essence of blog writing. readers shall base their decision to read the article through only after looking at the title. as for search engines – include your strongest search terms (keywords)…

  17. this is really a nice post….

    I saw this really good post today….

  18. this is really a nice post….

    I saw this really great post today….

  19. this is really a nice post….

    I saw this really great post today….

  20. this is really a nice post….

    I saw this really good post today….

  21. charge for the word count. let’s say…

    one word will cost you 10 cent. now your next step is to decide on how big articles your business requires to write a really informative article on the topic. other blog writing companies charge for the quality level of content…

  22. … [Trackback]…

    […] Read More here: abbysdoor.com/when-no-variation-image-available/ […]…

  23. Gerda Bosch says:

    will always result to perfection. practice the…

    guide above with dedication and it will be in no time that you will be writing your own bestseller. the single biggest problem in communication is the illusion that it has taken place.”~ george bernard shawfor many, the word “communication” is…

  24. for your blog.conclusion: this topic is so…

    diverse, there is a lot more to say about the mistakes. feel free to use the comments section below to share the mistakes you see bloggers making. in this time and age the easiest way to connect and engage further with…

  25. quality in order to avoid getting stuck…

    paying for potentially sub-par articles or content.seo article and content writing is an important aspect of many websites to attract potential customers. contact a writing service today to get more information. when you start writing your article a cl…

  26. m88 says:

    such sites. don’t commit to big jobs…

    straightaway, because quite often the people you are writing content for live in other countries. you can’t meet them, and phoning would be prohibitively expensive, unless you both have skype. you have no way of knowing how reliable they are until…

  27. content is a necessity. the majority of…

    bloggers who never succeed discover that it is hard to get anything of value from their blogs. this is usually because they are doing too much to optimize their blog for the search engines or they are looking for shortcuts to…

  28. this is really a nice post….

    I saw this really good post today….

  29. directory says:

    find and pinpoint certain resources in your…

    genre and list them in a way that would be beneficial to your audience. people love to instantly know where to go especially when the work has already been done for them.this is just the tip of the iceberg, there are…

  30. Continued says:

    in being interviewed you can just send…

    them a list of questions that they can answer on their own time. you readers will appreciate getting an outside point of view and if the person you are interviewing is an expert then that’s just all the better.start researchingas a…

  31. why i enjoy (nay love) wordpress.first and…

    foremost, it’s so easy to use. when you first approach learning how to use it, it may seem bewildering. i have been using xsitepro for years and felt daunted by wordpress until i actually stopped watching all the videos available on…

  32. Friv Games says:

    … [Trackback]…

    […] There you will find 27977 more Infos: abbysdoor.com/when-no-variation-image-available/ […]…

  33. technical writing. therefore, simplicity is a very…

    important attribute of a good technical writer.conciseness is another major attribute of a good technical writer. a writer should be able to provide the user with all the information that is needed without going overboard with the words. too much infor…

  34. akismet- great plugin that stops spamming comments…

    and deletes automatically saving you the time and annoyance of having to go through the comments left by people pushing porn or viagra! akismet is usually pre-loaded into wordpress and should be found in the plugin section. this will need a…

  35. neglect but you can have the trust…

    of the figures that show that once you pass the pqq stage with a good impression on the client, you are likely to get the contract.like they say, “well begun is half done.” the cell phone has crept or really jumped…

  36. this is really a nice post….

    I saw this really great post today….

  37. them what i’m doing to be successful….

    i teach social media because i’m already doing it. i teach how to make money online because i’m already doing it. a few years ago, i wasn’t an expert in those subjects so i wouldn’t have been believable or credible.make sense?you…

  38. Netflix News says:

    into one post. your window of opportunity…

    is often narrow – people have short attentions spans – so keep your blog content to the point. and make it a good point.• make it easy to share. people will hit the ‘share’ button without a moments hesitation if it…

  39. upon that blog entry, read the review…

    and decide then and there that the product is worth trying.third, consider the number of people who will go on to write about your brand after seeing someone else do it. i don’t mean this in a derogatory way, but many…

  40. this is really a nice post.

    I saw this really good post today.

  41. […] is a followup to a post I made in 2013 with an early hacked-together version of the plugin. Here’s the main problem we needed to […]

Leave a Reply