I recently had a client who wanted a selection of frames to be able to be seen around a print in woocommerce.

See for example the result here

Appletreewick 2

I suppose one way would be to create variable products for each one and then an image including the frame for each but that would have taken ages. They will need to specify what frame they want somewhere else (like on Additional info on checkout page)

I added a bit of CSS and javascript.

The CSS (just gives Frame 1 as the default background image, and padding so it can show. Also removing a border around the image.)

.woocommerce-product-gallery__wrapper {
padding: 30px 30px 10px 30px !important;
background-image:url(‘https://anitahallartist.co.uk/wp-content/uploads/2020/03/frame1.jpg’);
}
.woocommerce-product-gallery__wrapper a {
border: 0px !important;
padding: 0px !important;
}

The Javascript. Added this in a widget that appears on every single product page. Modified by something I found here
Only very slight modifications from that code. I hope to tidy it up soon. Just very excited as a non-programmer at getting this to work!

I had to modify this as there is no ID for the image or wrapper for product image. So instead of targeting an ID I changed the code to target a CSS element so changed

var idCardBg = document.getElementById(“idhere”);

to

var idCardBg = document.getElementsByClassName(‘woocommerce-product-gallery__wrapper’)[0];

The Javascript
Placed in widget for all single product images.

<b>Select Frame</b>
<select onchange=”changeBgColor();” id=”select-idcard”>
<option id=”idcard-option1″ value=”blue”>Frame 1</option>
<option id=”idcard-option2″ value=”red”>Frame 2</option>
<option id=”idcard-option3″ value=”purple”>Frame 3</option>
<option id=”idcard-option4″ value=”green”>Frame 4</option>
</select>

<script>
var changeBgColor = function(){
var idCardBg = document.getElementsByClassName(‘woocommerce-product-gallery__wrapper’)[0];
idCardBg.style.backgroundImage = “url(‘https://anitahallartist.co.uk/wp-content/uploads/2020/03/frame1.jpg’)”;
if(document.getElementById(“select-idcard”).value === “blue”){
idCardBg.style.backgroundImage = “url(‘https://anitahallartist.co.uk/wp-content/uploads/2020/03/frame1.jpg’)”;
}else if(document.getElementById(“select-idcard”).value === “red”){
idCardBg.style.backgroundImage = “url(‘https://anitahallartist.co.uk/wp-content/uploads/2020/03/frame2jpg’)”;
}else if(document.getElementById(“select-idcard”).value === “purple”){
idCardBg.style.backgroundImage = “url(‘https://anitahallartist.co.uk/wp-content/uploads/2020/03/frame3.jpg’)”;
}else if(document.getElementById(“select-idcard”).value === “green”){
idCardBg.style.backgroundImage = “url(‘https://anitahallartist.co.uk/wp-content/uploads/2020/03/frame4.jpg’)”;
}else{
idCardBg.style.backgroundImage = “url(‘https://anitahallartist.co.uk/wp-content/uploads/2020/03/frame1.jpg’)”;
}
idCardBg.style.backgroundColor = document.getElementById(“select-idcard”).value;
};
</script>

 

 

Table of contents
Recent Posts