How to add an image to the Order Bump?

First of all, you need to upload your image for the Order Bump and the red arrow to your Media Library.

Then you should place the following snippet into the “Order Bump Description” box.

It will add the picture for the Order Bump and also the red arrow.

Finally, you will have to replace the src links with those from your Media Library and adjust the width for images.

<div style="text-align:center;">
 <img width="100" src="https://example.org/image.png" />
</div>
<script>
 jQuery(document).ready(function($){
  $('.wc-hcc-order-bump-checkbox label').prepend('<image width="20" src="https://example.org/red-arrow.png" />');
 });
</script>

</div>

jQuery(document).ready(function($){

$('.wc-hcc-order-bump-checkbox label').prepend('<image width="20" src="https://example.org/red-arrow.png" />');

});

</script>

Also, add the following CSS to the “Custom CSS” section to ensure the image is vertically aligned with other elements.

.wc-hcc-order-bump-checkbox img,
.wc-hcc-order-bump-checkbox input,
.wc-hcc-order-bump-checkbox span {
  vertical-align: middle;
}

.wc-hcc-order-bump-checkbox img,

.wc-hcc-order-bump-checkbox input,

.wc-hcc-order-bump-checkbox span {

vertical-align: middle;

}