Display a "Free Shipping" ribbon on products with free shipping only

[lcp2000]

Hi all, I am new to PS and would like to know if anyone is able to help me with adding a "Free Shipping" ribbon, like the "SALE" ribbon, to the products on home page. Only those products that have the Free Shipping module set should have the ribbon.

 

This is what I have now in product-list.tpl (of course it doesn't work because I don't know what to use for $product.???). Any help is greatly appreciated.

...
{if isset($product.new) && $product.new == 1}
	<a class="new-box" href="{$product.link|escape:'html':'UTF-8'}">
		<span class="new-label">{l s='New'}</span>
	</a>
{/if}
{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
	<a class="sale-box" href="{$product.link|escape:'html':'UTF-8'}">
		<span class="sale-label">{l s='Sale!'}</span>
	</a>
{/if}

{* I AM TRYING THIS CODE HERE OR MAYBE EVEN IF BY CARRIER (ie; carrier==15) *}
{if $product.shipping == "FREE"} 
	<img src="http://www.mydomain.com/images/free_shipping_ribbon.png" style="position:absolute; top:0px; right:0px;" />
{/if}

 

Edited August 10, 2015 by lcp2000 (see edit history)

[gabdara]

Use this condition:

{if isset($product.additional_shipping_cost) && $product.additional_shipping_cost == 0}

[lcp2000]

Thanks gab, just what I was looking for, it worked perfectly.

 

So, for anyone that wants to do the same, here's what I did to get a Free Shipping Ribbon, and still being able to use the SALE ribbon (although will have to tweak the css to use them at the same time).

 

I edited 3 files (product.css, global.css and product-list.tpl).

 

Note: Will have to keep a backup of these files for when updates re-write them.

 

 

Edited TPL file "product-list.tpl", around line 113 (thanks gab  )

{if isset($product.additional_shipping_cost) && $product.additional_shipping_cost == 0}
<a class="free-shipping-box" href="{$product.link|escape:'html':'UTF-8'}">
<span class="free-shipping-label">{l s='Free'} <em class="icon-truck" id="icon-truck"></em> !</span>
</a>
{/if}

 

Edited CSS file "product.css", around line 80, to add "free-shipping-box" class

  .pb-left-column #image-block .new-box,
  .pb-left-column #image-block .sale-box,
  .pb-left-column #image-block .free-shipping-box {  // <<<------- Added here
    z-index: 5002; }

 

Edited CSS file "global.css", around line 6285, to add "free-shipping-box" class

.new-box,
.sale-box,
.free-shipping-box {  // <<<------- Added here
  position: absolute;
  top: -4px;
  overflow: hidden;
  height: 85px;
  width: 85px;
  text-align: center;
  z-index: 0; }

 

Added after line 6300

.free-shipping-box {
  right: -5px; }

 

Added after line 6395

.free-shipping-label {
  font: 700 14px/12px Arial, Helvetica, sans-serif;
  color: #fff;
  background: #C733F1;
  text-transform: uppercase;
  padding: 9px 0 7px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.24);
  width: 130px;
  text-align: center;
  display: block;
  position: absolute;
  right: -33px;
  top: 16px;
  z-index: 1;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }
  .free-shipping-label:before {
    position: absolute;
    bottom: -3px;
    right: 4px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 4px 4px 0px 4px;
    border-color: #ad2b34 transparent transparent transparent;
    content: ".";
    text-indent: -5000px;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg); }
  .free-shipping-label:after {
    position: absolute;
    bottom: -3px;
    left: 5px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 4px 4px 0px 4px;
    border-color: #ad2b34 transparent transparent transparent;
    content: ".";
    text-indent: -5000px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg); }

 

Added after line 6460

.ie8 .free-shipping-label {
  right: 0px;
  top: 0px;
  width: auto;
  padding: 5px 15px; }
  .ie8 .free-shipping-label:after {
    display: none; }
  .ie8 .free-shipping-label:before {
    display: none; }

 

Added after line 6475

.ie8 .free-shipping-box {
  right: -1px;
  top: -1px; }

 

 

Hope this helps someone else.

 

 

Edited August 11, 2015 by lcp2000 (see edit history)