mardi 28 juin 2016

woocommerce variable product swatches - images are disabled/grayed out

I made this awesome image zoom feature in Woocommerce variation page. Here is the link - LINK

But in the webpage the color picker images are grayed out, and if you inspect the element it is appearing as "disabled".

Do you have any idea how to remove "disabled" from the color picker images?

I am stuck.

Changes that I made as yet - 1) I used some jquery in the head section of the HTML. Here is the code.

<script type="text/javascript">
var imgPlainArray = [
    'http://icestartup.com/testsites/ujsnkfvs22/wordpress/wp-content/uploads/2016/06/black-3.jpg',
    'http://icestartup.com/testsites/ujsnkfvs22/wordpress/wp-content/uploads/2016/06/white-1.jpg',
    'http://icestartup.com/testsites/ujsnkfvs22/wordpress/wp-content/uploads/2016/06/pink-1.jpg',
    'http://icestartup.com/testsites/ujsnkfvs22/wordpress/wp-content/uploads/2016/06/red-1.jpg',
    'http://icestartup.com/testsites/ujsnkfvs22/wordpress/wp-content/uploads/2016/06/black-current-2.jpg',
    'http://icestartup.com/testsites/ujsnkfvs22/wordpress/wp-content/uploads/2016/06/frosty-white.jpg',
    'http://icestartup.com/testsites/ujsnkfvs22/wordpress/wp-content/uploads/2016/06/parrot-green.jpg',
    'http://icestartup.com/testsites/ujsnkfvs22/wordpress/wp-content/uploads/2016/06/royal-blue.jpg',
    'http://icestartup.com/testsites/ujsnkfvs22/wordpress/wp-content/uploads/2016/06/silver.jpg',
    'http://icestartup.com/testsites/ujsnkfvs22/wordpress/wp-content/uploads/2016/06/yellow.jpg'
];
$(document).ready(function(){
    setTimeout(function(){
        $("#pick-your-laminate").on('change', function(){
            if ( this.value == "Plain Laminate" ) {
                $(".box").not(".plain").hide();
                $(".plain").show();
            } else if ( this.value == "Digital Laminate" ) {
                $(".box").not(".digital").hide();
                $(".digital").show();
            }
        });
    }, 1000);

    $("<img>").attr("src", imgPlainArray[0]).appendTo("#xxx");

    $(".swatch-control > div").click(function(){
        var laminateIndex = $(this).index() - 2;
        $( "#xxx img" ).replaceWith( 
            $("<img>").attr("src", imgPlainArray[laminateIndex])
        );      
    });     
});
</script>

2) I made some changes in the variable.php template of Woocommerce. Just simple stuff though, adds some rows to the table. That cannot make any conflict, i guess.

Aucun commentaire:

Enregistrer un commentaire