Ask your WordPress questions! Pay money and get answers fast! (more info)

Checkout Process indicators WordPress

  • SOLVED

Hello!

I need checkout process indicators added to my woocommerce checkout process!

I have images, I just need them implemented above the pages correctly!

Thank you!

Answers (3)

2014-05-20

Kyle answers:

Hey, are you trying to show images on each page of the checkout process? I think I can help there. We will need to edit 3 or 4 templates.


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]

2014-05-20

Duncan O'Neill answers:

Do you have a url please?


Aaron Lee comments:

seasaltsoak.com

2014-05-21

Jihan Ahmed answers:

wondering how u have managed multistep checkout on woocommerce ... it will be a bit difficult to add the indicators but I should be able to workout this.