Checkout Process indicators WordPress

Aaron Lee comments:

The checkout is on one page, so I want a section that follows them and the image changes as they get to different sections

Kyle comments:

So you want images that change during scroll on this page https://www.seasaltsoak.com/checkout/

Kyle comments:

Okay, here are some functions to get started. You'll want to update those urls, and we will have to play with the scrollTop amounts there to get the triggers working.

add_action('woocommerce_before_checkout_form','add_the_image_div');
function add_the_image_div(){

echo '<div id="check_image"></div>';

echo "jQuery(document).scroll(function() {
if( $(this).scrollTop() < 500 ) {
$('#check_image').css({background-image:'put url to image 1 here'});
}
if( $(this).scrollTop() > 500 && $(this).scrollTop() < 1000 ) {
$('#check_image').css({background-image:'put url to image 2 here'});
}
if( $(this).scrollTop() > 1000 $(this).scrollTop() < 1500) {
$('#check_image').css({background-image:'put url to image 3 here'});
}
if( $(this).scrollTop() > 1500 ) {
$('#check_image').css({background-image:'put url to image 4 here'});
}
});";

}

Style.css:

#check_image{
display: block;
height: 100px;
width: 100px;
position: fixed;
top: 33%
right: 0;
}

Basically what is happening here is before the checkout form we drop in an empty Div, give it dimensions with the Style file and pin it to the right side of the screen. Then we tie some CSS changing jQuery to that Div, specifically, we are changing the background image based on the distance to the top of the window.

Give this a shot and let me know how you do.

Kyle comments:

I might suggest hiding it on mobile devices too, on small screens it might get in the way of the form:

@media only screen and (max-width: 719px){

#check_image{
display: none !important;
}

}

Aaron Lee comments:

kyle can you email me? I will assign you money! Sweet!

[email protected]