Often times we can move elements around on a page with CSS, but sometimes that’s just not a good solution when elements need to taken across an entire screen.
Here’s an example so you can see what I mean. A user wants to move the Amazon Pay section from down at the bottom of the checkout page to the top.
Using CSS positioning we could do that, but it would be tricky to have it look right across screen sizes.
What you need to do is find out the class or ID of the item that you want to move and then the class/ID of an element right after where you want it to go. In our example, the Amazon Pay has a class
wc-amazon-payments-advanced-info we can use to grab it. Now to move it to the top of the page, we can use these classes
jQuery comes with a function called
When I apply that to the page, the Amazon Pay button is moved from the area where the other payment methods are to the very top of the checkout form.
Also, as far as the browser is concerned, the element is really in that position. So the other items on the page will react as if it’s always been there.
So now you have a new way to rearrange elements on a page. Enjoy!
Leave a Reply