Jump to content

Display a div on the picture product depending on selected declination


Recommended Posts

I want to display a special div when the selected declination of my product is on sale.

Example : my black chair is on sale so when it is selected on the color picker, i want display the div on the product picture of the black chair. But the orange chair is not on sale, so when you select it on the color picker, my div on the product pic disappears. I hope my request is understandable. Thanks in advance !

Share this post

Link to post
Share on other sites

Well, You can try in product.js something with global var selectedCombination


When You are on product page, select your product, open up browser console (ctrl+shift+j) and paste this:


You will see information about product. There are 2 values there that might define this is this product is on sale and they are

selectCombination.specific_price.reduction_percent and selectCombination.specific_price.reduction_percent 

So if You want to use it just open up product.js or your custom js file and paste this somewhere in product.js

function showSaleLabel(){
	if (selectedCombination['specific_price']['reduction_price'] == 0 || selectedCombination['specific_price']['reduction_percent']) {
	} else {
		$('#image-block').prepend('<span class="sale-box no-print">\
			<span class="sale-label">SALE!</span>\

in product.js You also have function updateDisplay() and on the end of this function paste 


and now everything should work. Ofcourse You can add whatever You want in this prepend code.
Actually, thank You for this thread because I wanted to this a long time ago for myself. 

Edited by hakeryk2 (see edit history)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More