How to add carrier icons to AliShipping add-on

the_lyall

Active Member
I installed AliShipping plugin on one of my sites today and decided to add the shipper/carrier icons to it like on AliExpress. I also changed a couple of other bits so I'm sharing here in case anyone wants to copy.

First of all, I wanted to completely remove the shipping calculation from the cart page. As well as the WooCommerce settings to disable it, I removed it completely with this function:

PHP:
function disable_shipping_calc_on_cart( $show_shipping ) {
    if( is_cart() ) {
        return false;
    }
    return $show_shipping;
}
add_filter( 'woocommerce_cart_ready_to_calc_shipping', 'disable_shipping_calc_on_cart', 99 );

So now it only shows shipping on the checkout page after a country is entered.

I noticed that when you have a single product in the cart it shows the shipping method name and delivery time in a single line (WooCommerce default) but where there is more than one product in the cart (per product shipping kicks in) then it shows the delivery time on a new line underneath the shipping method name.

The below functions:

1) removes the colon at the end of the shipping method line
2) splits the standard shipping options onto two lines at the first '(' symbol (and removes the open bracket)
3) wraps the delivery time in a span and gives it a CSS class of .timing so you can style/position it (and removes the close bracket)

You can leave the open/close brackets in but I removed them to match the per-product shipping from the AliShipping plugin.

They're three separate functions just because I added them at different times and I'm disorganised

PHP:
add_filter( 'woocommerce_cart_shipping_method_full_label', 'remove_shipping_label', 9999, 2 );

function remove_shipping_label( $label, $method ) {
    $new_label = preg_replace( '/:+/', '', $label );
    return $new_label;
}

add_filter( 'woocommerce_cart_shipping_method_full_label', 'add_shipping_label_line', 9999, 2 );

function add_shipping_label_line( $label, $method ) {
    $new_label = preg_replace( '/\(/', '<br/><span class="timing">', $label );
    return $new_label;
}

add_filter( 'woocommerce_cart_shipping_method_full_label', 'add_shipping_label_end', 9999, 2 );

function add_shipping_label_end( $label, $method ) {
    $new_label = preg_replace( '/\)/', '</span>', $label );
    return $new_label;
}

Also you can use this to change the 'Shipping' title to say whatever you want (for when there's one product on the order):

PHP:
add_filter( 'woocommerce_shipping_package_name', 'custom_shipping_package_name' );
function custom_shipping_package_name( $name ) {
  return 'Shipping Options:';
}

Then the fun part was adding the carrier images with CSS. Again, this needs to be done separately for when there's a single product in the order and for when there are multiple products on the order, as the shipping methods display in different ways for each one.

For the images I used data URIs like AliExpress does, and I made my own for 'registered post' but you can use any image you want by using a free 'image to data URI' converter - there are loads on Google and I just used the first one that came up. Using data rather than images is better for site speed and reduces the number of calls.

This is what the end result is regardless of whether it's per order shipping or per product shipping:

1597419409874.png

Here's the CSS, which will need adjusting based on your theme. It works the same on mobile, as my websites are all mobile responsive.

For the single product orders:

First the three EMS logo examples:

CSS:
label[for=shipping_method_0_ems_zx_zx_us], label[for=shipping_method_0_e_ems], label[for=shipping_method_0_ems]{
    padding-left:40px;
    line-height:20px;
}
label[for=shipping_method_0_ems_zx_zx_us]:before, label[for=shipping_method_0_e_ems]:before, label[for=shipping_method_0_ems]:before{
    content:"";
background-image:url(data:image/png;base64,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);
    background-size:40px 28px;
    background-repeat:no-repeat;
    width:40px;
    height:28px;
    position:absolute;
    margin-left:-40px;
    margin-top:6px;
 
}

I can't post enough characters so I'll just include the Data URIs for the other images later.

For multi-product orders

Adding them for per-product shipping was a bit more complicated:

CSS:
tr.shipping ul li{
    margin-top:15px;
}
span.timing{
      display: contents;
    font-size: 14px;
}
.shipping-each dl.variation dd .shipping-time{
    margin-left:0px;
}
.shipping-each dl.variation dd label{
    padding-left:60px !important;
}
.shipping-each dl.variation dd input[name^=shipping]{
    margin-left:-60px;
    margin-bottom:-20px;
    display:block
}
.shipping-each dl.variation dd label  input[name^=shipping]:after{
    width:40px;
    min-width:40px;
    display:inline-block;
    position:absolute;
    margin-top:-8px;
    margin-left:17px;
}

Then add the following for each of the carriers to add the images in, and tweak the positioning with the margins as necessary. You can also change the size of the images by changing the background size, width and height values and then adjusting the padding and margin values to compensate:

CSS:
.shipping-each dl.variation dd input[value^="EMS"]:after, .shipping-each dl.variation dd input[value="E_EMS"]:after{
    content:"";
background-image:url(add the EMS data URI here);
    background-size:40px 28px;
    background-repeat:no-repeat;
    width:40px;
    height:28px;
}

.shipping-each dl.variation dd input[value="DHL"]:after{
    content:"";
background-image:url(add the DHL data URI here);
    background-size:37px 30px;
    background-repeat:no-repeat;
    width:37px;
    height:30px;
    margin-left:19px !important
}

As per the DHL example above, use the !important tag if you need to change the margins and it will then override the ones you set earlier.

I'll add the Data URIs for each of the images in comments as they're too long to add here, just change which labels/inputs your targeting and update the background-image URL with the image URIs.

Also, this function will change the free shipping options from showing no price to showing 0.00 (for single product orders, I'm still working on for per-product shipping):

PHP:
add_filter( 'woocommerce_cart_shipping_method_full_label', 'add_0_to_shipping_label', 10, 2 );

function add_0_to_shipping_label( $label, $method ) {

// if shipping rate is 0, concatenate ": $0.00" to the label
if ( ! ( $method->cost > 0 ) ) {
$label .= ': ' . wc_price(0);
}
// return original or edited shipping label
return $label;
}

It'll take some fiddling for your theme but if you want to add the images like I did hopefully this will help, and might save you the time of figuring it out that it took me.
 
Last edited:

the_lyall

Active Member
EMS:

data:image/png;base64,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
 

the_lyall

Active Member
DHL:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAA8CAYAAAC3kZ4mAAAABGdBTUEAALGPC/xhBQAABO9JREFUeAHtWF2IVkUYVlPzX9SScsVfvEhpKerCoExFTVHUIBHZi5UuBL0wqGipiLywqIUKKVQoXRXtUhAFUVT8wSBcDEWMjdCy2o11sb9VLM18nt2ZHA7nnHnP+fZCP58XnjNzZp73nTPPnDM/p1cvmRSQAlJACkgBKSAFpIAUkAJSQApIASkgBaSAFJACUkAKSAEpIAWkgBSQAlJACkgBKSAFpIAUkAJS4I4Cve9kK8rVwnt4RRG6na8jaQXagFvdRZlXS5uM830QYTLyY4L7tOwfKDzrKp5COiiNFJT9hPwPwf09n30EPbgG/NeD4KB+AAwG0oyDwsGPtbkocO6L/AWDT4PzeQzpvwb+M45fNclHhk7HhM+qb0Hs0SlKfWJo83TCb6XBpwOcIc5vp4F/0HGrJnkYPblq6HjWgFnK9ybU4gBbZoSlgd8DyH8HxNp72/lMQXrTwH/W8asm+dDQ6ZiIsXqupZMCxRoNbZ4BJ9wf1Bl8fgNnGEBrAmLPdaSLWUWXUejLX4aOx4Sx1L/odLO2+VKgcx/kzxuec53zmYj0hoE/0/GrJnnP0GnLYFk4i51q6w1tngMn/DqXGXy4sx0B0D4HYs90vIt5F17Cjhd9PE5P3DmGxrd7RliQyP+N+2MAjxM07mI3AQt5k2EUdwLwJ/Aj4KdFZFONbXCN9cZjx4P+JiN9H+VcP8cBPOb0A/JsLioP5RGqpY4bmNjbzeOIt97IcL3L8znsyO9GeHkx8uq4bHAqp20E8ris+4rE+8GeRCdjYnBtCjc4Sww+s8EZClwxcGPtp9Vzk0WrASxn2/ld7Pvgsht9TBMsLGtK6NAc8Tnp+G9GeGEbRfI8co12bWwwtPG141Z98jh6yONFnpj86zIlUOKJCJ+xXgC4zl42cPPazqr7GHFp1r9d4Z+nbs+77MpNDQ/dZc0P4jsIwPUwz3jOawd8exeRrweyNiCc/g4A44G3gDzzz+E5fBYeV/KMg7zHEUYgfSWPjDouF/sB//wRetdvQ8tzJOPwxa/I2LGyqIfvVIAPUTZGlh+/Bu5Q+RJkcXz5GnBCO4UbX5eVfuYcHkLaaeBnxUkr/xnxuLPmFJ1Wn1cGl/LGL5TntjLWAaddwA4g9jUUjX8UDvuA1wD+XsyzX1C5JSAsQP7p4D4t+w8K/W77ZeQ5rfek8Q8aX3S+kGX1LfU8yXNkkSCNIE8ClhdxMnB5jFgFDABeN/ApHs+e3jj9x2wrCPyKaPO6kx67/opIXwBf9ljEgoHyPv+suotog2vfdiCLU6b8d8SbC9DWArEYreBw4L3NQSbmw69znHdAesbgE4sZ1r+KeHxJwrIiebiWN36hnDKL2qdwoCh1RR1z+BdQx3XzW4DrzxtAzDhLcPPkzfJ1bgP5kndAyj8+tcF9JVnuxjcDfI4yulbS9v++Rd4ecilGf4DrVlHfJJ87x8PACiD8PbfaEJtT20DA2/PIJOMn79neRO/gUvaF4vPFSPKL3jcgxqwK48C9vHFb/VxB9zbw+b9zOsBpt4zxQM/psh24lRJgGspGppSHRfRtCQo4UGOD+7RsJwq/SatAGQeW7Q7JqLcUN4P0KFBjIWdwTmSUq1gKSAEpIAWkgBSQAlJACkgBKSAFpIAUkAJSQApIASkgBaSAFJACUkAKSAEpIAWkgBSQAlJACkgBKVBYgdt2bFaHL65fVwAAAABJRU5ErkJggg==
 

the_lyall

Active Member
UPS:

data:image/png;base64,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
 

the_lyall

Active Member
MAIL:

data:image/png;base64,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
 

the_lyall

Active Member
By the way - if you use regular WooCommerce shipping methods without this plugin, you can easily add the shipping icons with a free plugin called Shipping Icons and Descriptions for WooCommerce but sadly that isn't compatible with AliShipping. If you don't use AliShipping I recommend it as I've used it before. To use that you'll need to find small logos for each of the carriers, as you can only use images.
 

Mar

Moderator
I installed AliShipping plugin on one of my sites today and decided to add the shipper/carrier icons to it like on AliExpress. I also changed a couple of other bits so I'm sharing here in case anyone wants to copy.
Good work. However I am not successful in adding icons to some shipping methods like Store Standard Shipping. Downloaded an icon for it and converted the image to data URI and added it to the CSS codes. Exactly did the same with UPS, DHL and EMS but in this shipping method it did not work. So I removed the other icons I successfully added. Don't know whats wrong.
 

chris37

Well-Known Member
I installed AliShipping plugin on one of my sites today and decided to add the shipper/carrier icons to it like on AliExpress. I also changed a couple of other bits so I'm sharing here in case anyone wants to copy.

First of all, I wanted to completely remove the shipping calculation from the cart page. As well as the WooCommerce settings to disable it, I removed it completely with this function:

PHP:
function disable_shipping_calc_on_cart( $show_shipping ) {
    if( is_cart() ) {
        return false;
    }
    return $show_shipping;
}
add_filter( 'woocommerce_cart_ready_to_calc_shipping', 'disable_shipping_calc_on_cart', 99 );

So now it only shows shipping on the checkout page after a country is entered.

I noticed that when you have a single product in the cart it shows the shipping method name and delivery time in a single line (WooCommerce default) but where there is more than one product in the cart (per product shipping kicks in) then it shows the delivery time on a new line underneath the shipping method name.

The below functions:

1) removes the colon at the end of the shipping method line
2) splits the standard shipping options onto two lines at the first '(' symbol (and removes the open bracket)
3) wraps the delivery time in a span and gives it a CSS class of .timing so you can style/position it (and removes the close bracket)

You can leave the open/close brackets in but I removed them to match the per-product shipping from the AliShipping plugin.

They're three separate functions just because I added them at different times and I'm disorganised

PHP:
add_filter( 'woocommerce_cart_shipping_method_full_label', 'remove_shipping_label', 9999, 2 );

function remove_shipping_label( $label, $method ) {
    $new_label = preg_replace( '/:+/', '', $label );
    return $new_label;
}

add_filter( 'woocommerce_cart_shipping_method_full_label', 'add_shipping_label_line', 9999, 2 );

function add_shipping_label_line( $label, $method ) {
    $new_label = preg_replace( '/\(/', '<br/><span class="timing">', $label );
    return $new_label;
}

add_filter( 'woocommerce_cart_shipping_method_full_label', 'add_shipping_label_end', 9999, 2 );

function add_shipping_label_end( $label, $method ) {
    $new_label = preg_replace( '/\)/', '</span>', $label );
    return $new_label;
}

Also you can use this to change the 'Shipping' title to say whatever you want (for when there's one product on the order):

PHP:
add_filter( 'woocommerce_shipping_package_name', 'custom_shipping_package_name' );
function custom_shipping_package_name( $name ) {
  return 'Shipping Options:';
}

Then the fun part was adding the carrier images with CSS. Again, this needs to be done separately for when there's a single product in the order and for when there are multiple products on the order, as the shipping methods display in different ways for each one.

For the images I used data URIs like AliExpress does, and I made my own for 'registered post' but you can use any image you want by using a free 'image to data URI' converter - there are loads on Google and I just used the first one that came up. Using data rather than images is better for site speed and reduces the number of calls.

This is what the end result is regardless of whether it's per order shipping or per product shipping:

View attachment 12559

Here's the CSS, which will need adjusting based on your theme. It works the same on mobile, as my websites are all mobile responsive.

For the single product orders:

First the three EMS logo examples:

CSS:
label[for=shipping_method_0_ems_zx_zx_us], label[for=shipping_method_0_e_ems], label[for=shipping_method_0_ems]{
    padding-left:40px;
    line-height:20px;
}
label[for=shipping_method_0_ems_zx_zx_us]:before, label[for=shipping_method_0_e_ems]:before, label[for=shipping_method_0_ems]:before{
    content:"";
background-image:url(data:image/png;base64,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);
    background-size:40px 28px;
    background-repeat:no-repeat;
    width:40px;
    height:28px;
    position:absolute;
    margin-left:-40px;
    margin-top:6px;

}

I can't post enough characters so I'll just include the Data URIs for the other images later.

For multi-product orders

Adding them for per-product shipping was a bit more complicated:

CSS:
tr.shipping ul li{
    margin-top:15px;
}
span.timing{
      display: contents;
    font-size: 14px;
}
.shipping-each dl.variation dd .shipping-time{
    margin-left:0px;
}
.shipping-each dl.variation dd label{
    padding-left:60px !important;
}
.shipping-each dl.variation dd input[name^=shipping]{
    margin-left:-60px;
    margin-bottom:-20px;
    display:block
}
.shipping-each dl.variation dd label  input[name^=shipping]:after{
    width:40px;
    min-width:40px;
    display:inline-block;
    position:absolute;
    margin-top:-8px;
    margin-left:17px;
}

Then add the following for each of the carriers to add the images in, and tweak the positioning with the margins as necessary. You can also change the size of the images by changing the background size, width and height values and then adjusting the padding and margin values to compensate:

CSS:
.shipping-each dl.variation dd input[value^="EMS"]:after, .shipping-each dl.variation dd input[value="E_EMS"]:after{
    content:"";
background-image:url(add the EMS data URI here);
    background-size:40px 28px;
    background-repeat:no-repeat;
    width:40px;
    height:28px;
}

.shipping-each dl.variation dd input[value="DHL"]:after{
    content:"";
background-image:url(add the DHL data URI here);
    background-size:37px 30px;
    background-repeat:no-repeat;
    width:37px;
    height:30px;
    margin-left:19px !important
}

As per the DHL example above, use the !important tag if you need to change the margins and it will then override the ones you set earlier.

I'll add the Data URIs for each of the images in comments as they're too long to add here, just change which labels/inputs your targeting and update the background-image URL with the image URIs.

Also, this function will change the free shipping options from showing no price to showing 0.00 (for single product orders, I'm still working on for per-product shipping):

PHP:
add_filter( 'woocommerce_cart_shipping_method_full_label', 'add_0_to_shipping_label', 10, 2 );

function add_0_to_shipping_label( $label, $method ) {

// if shipping rate is 0, concatenate ": $0.00" to the label
if ( ! ( $method->cost > 0 ) ) {
$label .= ': ' . wc_price(0);
}
// return original or edited shipping label
return $label;
}

It'll take some fiddling for your theme but if you want to add the images like I did hopefully this will help, and might save you the time of figuring it out that it took me.

Wow @the_lyall you are one of your kind.

Thanks you mate!
 

chris37

Well-Known Member
Good work. However I am not successful in adding icons to some shipping methods like Store Standard Shipping. Downloaded an icon for it and converted the image to data URI and added it to the CSS codes. Exactly did the same with UPS, DHL and EMS but in this shipping method it did not work. So I removed the other icons I successfully added. Don't know whats wrong.

@Mar you mention in some previous post of your, that in your menu you have icon without add more request using css sprite, can you share an example how you did that please?
 

Mar

Moderator
@Mar you mention in some previous post of your, that in your menu you have icon without add more request using css sprite, can you share an example how you did that please?
My vertical menus have icons. Yes it is implemented with CSS Sprites. It is not a straight forward process especially with menus. It is very hard to tell step by step, even examples. I'd rather do it hands on. Actually it is a project and every site is different. There are many tutorials in the web but all are the basics of CSS Sprites. Also, there are free online sprite generators and sites where you can download icons. Although everything is in the web, you will go through a lot of trial and error. There are many plugins that are capable of adding icons, but every icon will have to load and add to http request that will slow down the site. See this two important links for the online sprite generator and the site to download the icons, https://www.toptal.com/developers/css/sprite-generator, https://thenounproject.com/. What I am trying to tell is find the tutorials in the web and start from there. You will learn it.

1597486944332.png
 
Last edited:

chris37

Well-Known Member
My vertical menus have icons. Yes it is implemented with CSS Sprites. It is not a straight forward process especially with menus. It is very hard to tell step by step, I'd rather do it hands on. Actually it is a project and every site is different. There are many tutorials in the web but all are the basics of CSS Sprites. Also, there are free online sprite generators and sites where you can download icons. Although everything is in the web, you will go through a lot of trial and error. There are many plugins that are capable of adding icons, but every icon will have to load and add to http request that will slow down the site. See this two important links for the online sprite generator and the site to download the icons.

View attachment 12566
Thank mar...
Where are the link you referent about?
 

the_lyall

Active Member
Good work. However I am not successful in adding icons to some shipping methods like Store Standard Shipping. Downloaded an icon for it and converted the image to data URI and added it to the CSS codes. Exactly did the same with UPS, DHL and EMS but in this shipping method it did not work. So I removed the other icons I successfully added. Don't know whats wrong.
That's weird, please can you message me a link to the product with that shipping method and a delivery country it applies to so I can take a look for you? If you would like me to of course, it's your site :)
 
Last edited:

Mar

Moderator
That's weird, please can you message me a link to the product with that shipping method and a delivery country it applies to so I can take a look for you? If you would like me to of course, it's your site :)
I'll have to add the icons again for you to see. No problem adding the icons of the three carriers, but cannot add the icon to the 'Store Standard Shipping', look at screenshots below. The icon I want to add is also below. I converted the image to data URI with https://ezgif.com/image-to-datauri/ezgif-2-93019eef7d7f.png. The image URI are very much similar to yours. Look at below: (the text is not complete since it exceeded the 1000 characters allowed)

data:image/png;base64,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

I added it to the CSS code, I did exactly the same with the icons of the other carriers but it don't work. I don't really know what I miss.


1597496666467.png

1597496910939.png
 

the_lyall

Active Member
I'll have to add the icons again for you to see. No problem adding the icons of the three carriers, but cannot add the icon to the 'Store Standard Shipping', look at screenshots below. The icon I want to add is also below. I converted the image to data URI with https://ezgif.com/image-to-datauri/ezgif-2-93019eef7d7f.png. The image URI are very much similar to yours. Look at below: (the text is not complete since it exceeded the 1000 characters allowed)

data:image/png;base64,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

I added it to the CSS code, I did exactly the same with the icons of the other carriers but it don't work. I don't really know what I miss.


View attachment 12568

View attachment 12569
Can you message me a link to the page so I can check the IDs for the shipping method to add the CSS to?
 

Mar

Moderator
Can you message me a link to the page so I can check the IDs for the shipping method to add the CSS to?
I am not sure if I understand what you mean by 'link to the page'. If you mean the URL of the product in the cart, this is not the only product with this shipping method when added to cart. Please clarify.
 

the_lyall

Active Member
I am not sure if I understand what you mean by 'link to the page'. If you mean the URL of the product in the cart, this is not the only product with this shipping method when added to cart. Please clarify.
Yes the URL of that product, or any other with that shipping method, so I can add it to the cart and see the checkout/cart page with that shipping method showing (I don't need the other icons to be there). I can then use browser developer tools to work out the right CSS to add to that icon in and send it to you to add, and it will apply for any product with the shipping method :)
 
Top