visit link1

search for "check" using CTRL + F, than you can see :

enter image description here

I wanted to display like this as link2

enter image description here

we are using following code :


<?php if ($this->isFieldVisible('postcode')): ?>
        <li class="item">
        <img src ="http://totaltoys.com/media/font-100.png"> 
            <label for="search"<?php if ($this->isFieldRequired('postcode')):?> class="required" <?php endif;?>><?php if ($this->isFieldRequired('postcode')):?><em>*</em><?php endif;?><?php echo Mage::helper('webdevlopers_productpageshipping')->__('') ?></label>
            <div class="search">

                <input placeholder="Enter your PIN Code" class="input-text validate-postcode<?php if ($this->isFieldRequired('postcode')):?> required-entry<?php endif;?>" type="text" id="estimate_postcode" name="estimate[postcode]" value="<?php echo $this->htmlEscape($this->getFieldValue('postcode')) ?>" />
   <?php endif; ?>


    li.item {
  align-items: center;
  display: flex;
li.item img {
  opacity: .3;
  height: 20px;
  width: 40px;
li.item label {
  color: #aaa;
  font-family: 'ubuntu';
li.item .search {
  margin-left: 6px;
li.item .search input {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: .5rem;
li.item .search button {
  background-color: #00bfff;
  border: none;
  border-radius: 3px;
  color: #fefefe;
  padding: .5rem .5rem;

1 Answer 1


Try this

Add that image before text(Check Availabilty at). Also Try your end it's a css work only

.shipping-estimation-form {float: left;margin: 0 auto;padding: 0;width: 50%;}
.check_delivery .actions {float: left;width: 25%;}
.check_delivery .f-right {margin-left: 0 !important;}
.check_delivery .f-right, .right {float: left !important;}
.check_delivery .button > span {background: #565656 none repeat scroll 0 0; width: 100% !important;}
.check_delivery .button span {padding: 3px;text-transform: capitalize !important;}
.check_delivery .item.last.odd { padding: 0;}
.check_delivery .block-subtitle {float: left;margin-top: 10px;padding-left: 10px;  width: 21%;}
.check_delivery #estimate_postcode {margin: 0 auto !important;padding: 0 !important;width: 100% !important;}
.check_delivery .search {margin: 0 auto !important; width: 100%;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.