Shipping Icons and Descriptions for WooCommerce plugin lets you add icons (i.e. images) and/or descriptions (simple text or HTML) to WooCommerce shipping methods on frontend.
Main Features
- Icons and descriptions can be added to both default and custom WooCommerce shipping methods.
- Set descriptions and icons positions on frontend (before or after label).
- For shipping icons you can also set icon HTML style and class etc.
- Plugin is WPML compatible (i.e. you can set different descriptions and/or icons for different languages).
- Option to use shipping methods instances instead of shipping methods.
- Set descriptions and/or icons site visibility.
Plugin settings are located in “WooCommerce > Settings > Shipping Icons and Descriptions”.
Shipping Icons
Here you can add icons for shipping methods on cart and checkout pages.
- Shipping icons
- Enables/disables “WooCommerce shipping icons” section.
- Default:
no
- Default:
- Icon position
- Possible values: After label; Before label.
- Default:
After label
- Default:
- Icon visibility
- Possible values: On both cart and checkout pages; Only on cart page; Only on checkout page.
- Default:
On both cart and checkout pages
- Default:
- Icon HTML style
- For the img tag. You can also style icons with CSS by ID:
alg_wc_shipping_icon_{shipping_method}_{instance_id}.- Default:
display:inline;
- Default:
- Icon HTML class
- For styling the img tag with CSS.
- Default:
alg_wc_shipping_icon
- Default:
- Separator
- Inserted between the text label and icon. Space symbol by default.
- Default:
- Default:
- Apply shortcodes
- Check this if you want shortcodes to be enabled in icons. E.g. for
[alg_wc_sid_translate]shortcode.- Default:
no
- Default:
- Use shipping instances
- Enable this if you want to use shipping methods instances instead of shipping methods. For example if you need to set different icons for different instances of Flat rate (or any other) shipping method (either in different or in same shipping zone). Save changes after enabling this option.
- Default:
no
- Default:
- Shipping Method X
- Image URL.
- Default: None
Shipping Descriptions
Here you can add any text (i.e. description) for shipping methods on cart and checkout pages.
- Shipping descriptions
- Enable/disable the “WooCommerce shipping descriptions” section.
- Default:
no
- Default:
- Description position
- Possible values: After label; Before label.
- Default:
After label
- Default:
- Description visibility
- Possible values: On both cart and checkout pages; Only on cart page; Only on checkout page.
- Default:
On both cart and checkout pages
- Default:
- Order details
- Enable this if you want shipping descriptions to be added to order details (“Order received” page, emails etc.).
- Default:
no
- Default:
- Apply shortcodes
- Check this if you want shortcodes to be enabled in icons. E.g. for
[alg_wc_sid_translate]shortcode.- Default:
no
- Default:
- Use shipping instances
- Enable this if you want to use shipping methods instances instead of shipping methods. For example if you need to set different descriptions for different instances of Flat rate (or any other) shipping method (either in different or in same shipping zone). Save changes after enabling this option.
- Default:
no
- Default:
- Shipping Method X
- Shipping method description.
- Default: None
You can add HTML tags in shipping method descriptions, e.g.:
<br><small>Your shipping description.</small>
<p style="color:gray;font-style:italic;">Your shipping description.</p>
<span class="alg_wc_shipping_description">Your shipping description.</span>
Using Shipping Instances
Enable Use shipping instances option if you want to use shipping methods instances instead of shipping methods. For example if you need to set different descriptions for different instances of Flat rate (or any other) shipping method (either in different or in same shipping zone). Save changes after enabling this option.
If you disable the Use shipping instances checkbox, you will be able to set icons and/or descriptions for all instances of the shipping method at once:
WPML
To output different descriptions and/or icons for different languages, use [alg_wc_sid_translate] shortcode. I.e. set description and/or icon option directly to:
Simpler form
[alg_wc_sid_translate lang="EN,DE" lang_text="Description for EN & DE" not_lang_text="Description for other languages"]
Complex form
[alg_wc_sid_translate lang="EN,DE"]URL for EN & DE[/alg_wc_sid_translate][alg_wc_sid_translate lang="FR"]URL for FR[/alg_wc_sid_translate][alg_wc_sid_translate not_lang="EN,DE,FR"]URL for other languages[/alg_wc_sid_translate]
Elan K –
Dear Tom Anbinder,
Good to hear about the descriptions for each shipping method’s instance.
It will be great if you would add a screenshot of the demo or sample implementation of the same.
Awesome –
Awesome!!!
Tobias –
I have the same use case like “steve” mentioned. Do you have a soultion for this?
Tom Anbinder –
Hi Tobias,
Sorry for a late reply. If I understood it correctly, what you need is options to set icons and descriptions for each shipping instance separately, correct? I’m already working on this – will release new plugin version in next couple of days.
Best regards,
Tom
Tom Anbinder –
Hi again Tobias,
As promised – we’ve released new plugin version 2.0.0 today. Now there is new option “Use shipping instances” in plugin settings. After you enable this checkbox and save the settings, you will be able to set different icons and/or descriptions for each shipping method’s instance. Unfortunately this option is available in Pro version only.
Please let me know if something is not working as expected.
steve –
Very good plugin only the problem is I have post office and courier delivery listed on flat rate (2 separate delivery methods with different icons) so one icon shows for both post office and courier. Need options to include separate icons for flat rate not one icon only. If you can do that 5 stars.
Tom Anbinder –
Hi,
If anyone else has similar question – this option was added in plugin version 2.0.0.