{"id":274384,"date":"2026-03-13T10:00:52","date_gmt":"2026-03-13T09:00:52","guid":{"rendered":"https:\/\/octolize.com\/?p=274384&#038;cf-nocache=1"},"modified":"2026-03-13T11:49:23","modified_gmt":"2026-03-13T10:49:23","slug":"how-to-add-icons-for-woocommerce-shipping-methods","status":"publish","type":"post","link":"https:\/\/octolize.com\/es\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/","title":{"rendered":"How to Add Icons for WooCommerce Shipping Methods?"},"content":{"rendered":"<p><strong>Adding icons to shipping options in WooCommerce may significantly enhance user experience and speed up the shopping process. This article will guide you through adding icons for WooCommerce shipping methods, helping you improve your online store&#8217;s visual appeal and professionalism.<\/strong><\/p>\n<p>Visual components are important in e-commerce to grab clients&#8217; attention and improve their experience. Icons have become an essential component of user interfaces because they give consumers visual clues and make navigating easier. Moreover, many customers pay attention to the available shipping methods. Therefore, icons next to shipping methods help them identify available courier companies faster, making it easier to choose and speeding up your purchasing decision.<\/p>\n<h2>Benefits of Adding Icons to Shipping Methods<\/h2>\n<p><strong>Enhancing Visual Appeal and Professionalism<\/strong><\/p>\n<p>Icons add a touch of professionalism and sophistication to your online store. They make the shipping methods visually appealing and help your store stand out.<\/p>\n<p><strong>Improving User Experience and Ease of Navigation<\/strong><\/p>\n<p>Icons act as visual cues, making it easier for customers to quickly identify and select the desired shipping method. This streamlines the purchasing process, reducing friction and enhancing the user experience.<\/p>\n<p><strong>Increasing Customer Trust and Confidence<\/strong><\/p>\n<p>Well-designed icons instil a sense of trust and confidence in customers. When they see clear and visually appealing shipping method options, they are more likely to trust your store and proceed with their purchase.<\/p>\n<h2>Step-by-Step Guide: Adding Icons to WooCommerce Shipping Methods<\/h2>\n<h3>Step 1: Preparing the icon image or code<\/h3>\n<p>Before you proceed to add icons to your shipping method in WooCommerce, you need icons that can be displayed. How to find your shipping company&#8217;s logo? Many shipping companies provide their logos, but a good way would be to look for a suitable file through Google or aggregators of such files as <a href=\"https:\/\/worldvectorlogo.com\/\">WorldVectorLogo<\/a>.<\/p>\n<p>The file format itself is also important. The most optimal solution for a WooCommerce store is a file in SVG format. It&#8217;s better for responsive and retina-ready web <a href=\"https:\/\/www.brandcrowd.com\/logo-maker\">logo design<\/a> due to its scalability and lack of quality degradation. In addition, this provides the greatest assurance that the icon will display correctly regardless of the site format.<\/p>\n<p>To add the icon to the shipping method, you can place the file on your server by adding it as Media in WordPress, the most secure solution. You can also use the file URL.<\/p>\n<h3>Step 2: Install the Flexible Shipping plugin<\/h3>\n<p>Adding icons to shipping methods is not a default functionality in WooCommerce. To achieve this, you need an additional solution. In this case, the free version of the Flexible Shipping plugin will work great. This WooCommerce shipping plugin supports the HTML tags in the Method Description field. You can use them freely, e.g., by putting the carrier company logo next to the shipping method with <code>&lt;img \/&gt; <\/code> tag.<\/p>\n\n    <div class=\"plugin-card\">\n        <div class=\"plugin-card-top\">\n            <div class=\"plugin-text\">\n            \t<img decoding=\"async\" class=\"plugin-card-thumbnail\" src=\"https:\/\/octolize.com\/app\/uploads\/2022\/03\/flexible-shipping-pro-avatar-icon.svg\" \/>\n\t\t\t\t\t\t\t\t\t<div class=\"title\">Flexible Shipping WooCommerce<\/div>\n\t\t\t\t\n\t\t\t\t<p>The best Table Rate Shipping for WooCommerce. Period. Create shipping rules based on weight, order totals, or item count.<\/p>\n\n\t\t\t\t<a class=\"button primary btn-cta\"\n\t\t\t\t\t\t\t\t\t\thref=\"https:\/\/wordpress.org\/plugins\/flexible-shipping\/\" title=\"Flexible Shipping PRO WooCommerce\">Go to WordPress.org<\/a>\n\t\t\t\t<span class=\"sep\">or<\/span>\n\t\t\t\t<a href=\"https:\/\/downloads.wordpress.org\/plugin\/flexible-shipping.6.7.3.zip\">Download for free <i class=\"fa fa-download\"><\/i><\/a>\n\t\t\t<\/div>\n\n            <span class=\"logo\">Octolize<\/span>\n        <\/div>\n\n        <div class=\"plugin-card-bottom\">\n            <div class=\"rating-installs\">\n                <div class=\"rating\">\n                                            <span class=\"rating-star\"><\/span>\n                                            <span class=\"rating-star\"><\/span>\n                                            <span class=\"rating-star\"><\/span>\n                                            <span class=\"rating-star\"><\/span>\n                                            <span class=\"rating-star\"><\/span>\n                                    <\/div>\n\n                <div class=\"installs\">\n                    \t\t\t\t\t\t<strong>100,000+ Active Installations<\/strong><br\/>\n\t\t\t\t\t\t\t\t\t\t<strong>30-day money back guarantee<\/strong>\n                <\/div>\n            <\/div>\n\n            <div class=\"updated-tested\">\n                <div class=\"updated\">\n\t\t\t\t\tLast Updated: 2026-05-21                <\/div>\n\n                <div class=\"tested\">\n\t\t\t\t\tWorks with WooCommerce 10.4 - 10.8.x                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    \n<p>In addition to the option to support HTML tags, it\u2019s a table rate shipping plugin that allows you to add shipping rules based on weight and cart total. With over 100,000 active installs, it\u2019s the most popular WooCommerce shipping plugin in the WordPress repository.<\/p>\n<h3>Step 3: Add Flexible Shipping method<\/h3>\n<p>After you install and activate the Flexible Shipping plugin, it&#8217;s time to create a new shipping method. All you have to do is click on your shipping zone under <strong>WooCommerce \u2192 Settings \u2192 Shipping<\/strong>. Afterwards, choose the Add shipping method option.<\/p>\n<p><a href=\"https:\/\/octolize.com\/es\/cdn-cgi\/image\/format=auto\/app\/uploads\/2023\/04\/add-flexible-shipping-method.png\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-272288\" src=\"https:\/\/octolize.com\/cdn-cgi\/image\/format=auto\/app\/uploads\/2023\/04\/add-flexible-shipping-method.png\" alt=\"Add Flexible Shipping method\" width=\"1527\" height=\"662\" srcset=\"https:\/\/octolize.com\/app\/uploads\/2023\/04\/add-flexible-shipping-method.png 1527w, https:\/\/octolize.com\/app\/uploads\/2023\/04\/add-flexible-shipping-method-260x113.png 260w, https:\/\/octolize.com\/app\/uploads\/2023\/04\/add-flexible-shipping-method-712x309.png 712w\" sizes=\"auto, (max-width: 1527px) 100vw, 1527px\" \/><\/a><\/p>\n<p>Select Flexible Shipping as your next shipment option, and then click the Add shipping method button again. It&#8217;s now time to handle the WooCommerce shipping method after adding the Flexible Shipping method.<\/p>\n<p><a href=\"https:\/\/octolize.com\/es\/cdn-cgi\/image\/format=auto\/app\/uploads\/2021\/07\/add-flexible-shipping-method.png\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-257205\" src=\"https:\/\/octolize.com\/cdn-cgi\/image\/format=auto\/app\/uploads\/2021\/07\/add-flexible-shipping-method.png\" alt=\"add flexible shipping method\" width=\"651\" height=\"277\" srcset=\"https:\/\/octolize.com\/app\/uploads\/2021\/07\/add-flexible-shipping-method.png 651w, https:\/\/octolize.com\/app\/uploads\/2021\/07\/add-flexible-shipping-method-260x111.png 260w\" sizes=\"auto, (max-width: 651px) 100vw, 651px\" \/><\/a><\/p>\n<p>On the shipping method configuration page, you can set your shipping costs using the table rate, add free shipping or use the cost calculation method.<\/p>\n<p><a href=\"https:\/\/octolize.com\/es\/cdn-cgi\/image\/format=auto\/app\/uploads\/2020\/09\/free-shipping-settings-flexible-shipping-plugin.png\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-270869\" src=\"https:\/\/octolize.com\/cdn-cgi\/image\/format=auto\/app\/uploads\/2020\/09\/free-shipping-settings-flexible-shipping-plugin.png\" alt=\"free shipping settings flexible shipping plugin\" width=\"758\" height=\"566\" srcset=\"https:\/\/octolize.com\/app\/uploads\/2020\/09\/free-shipping-settings-flexible-shipping-plugin.png 758w, https:\/\/octolize.com\/app\/uploads\/2020\/09\/free-shipping-settings-flexible-shipping-plugin-260x194.png 260w, https:\/\/octolize.com\/app\/uploads\/2020\/09\/free-shipping-settings-flexible-shipping-plugin-712x532.png 712w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><\/p>\n<h3>Step 4: Add an icon to the shipping method\u2019s description<\/h3>\n<p>The most important part of configuring the shipping method when adding icons is the <strong>Method Title and Description in the General Settings section<\/strong>. As mentioned, the Flexible Shipping plugin supports the HTML tags in the Method Description field. And that&#8217;s where you&#8217;ll be able to add your icon.<\/p>\n<p><a href=\"https:\/\/octolize.com\/es\/cdn-cgi\/image\/format=auto\/app\/uploads\/2023\/05\/method-title-and-description-in-the-general-settings-section.png\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-274385\" src=\"https:\/\/octolize.com\/cdn-cgi\/image\/format=auto\/app\/uploads\/2023\/05\/method-title-and-description-in-the-general-settings-section.png\" alt=\"Method Title and Description in the General Settings section\" width=\"1235\" height=\"433\" srcset=\"https:\/\/octolize.com\/app\/uploads\/2023\/05\/method-title-and-description-in-the-general-settings-section.png 1235w, https:\/\/octolize.com\/app\/uploads\/2023\/05\/method-title-and-description-in-the-general-settings-section-260x91.png 260w, https:\/\/octolize.com\/app\/uploads\/2023\/05\/method-title-and-description-in-the-general-settings-section-712x250.png 712w\" sizes=\"auto, (max-width: 1235px) 100vw, 1235px\" \/><\/a><\/p>\n<p>First, add <strong>Method Title<\/strong>, and then go to <strong>Method Description<\/strong>. In my case, I will specify UPS shipping as the name of the service and add the icon of this particular courier company in the description.<\/p>\n<p>To add an icon, enter the HTML tag in the Method Description field: <code> &lt;img src= &quot;icon-url.svg&quot;&gt;<\/code>. Instead of the icon-url.svg, put the URL of your icon file. It may be a file from your WordPress Media or a link to an external solution, just like in my example:<\/p>\n<p><a href=\"https:\/\/octolize.com\/es\/cdn-cgi\/image\/format=auto\/app\/uploads\/2023\/05\/ups-shipping-method-with-icon.png\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-274388\" src=\"https:\/\/octolize.com\/cdn-cgi\/image\/format=auto\/app\/uploads\/2023\/05\/ups-shipping-method-with-icon.png\" alt=\"UPS Shipping method with Icon\" width=\"1724\" height=\"660\" srcset=\"https:\/\/octolize.com\/app\/uploads\/2023\/05\/ups-shipping-method-with-icon.png 1724w, https:\/\/octolize.com\/app\/uploads\/2023\/05\/ups-shipping-method-with-icon-260x100.png 260w, https:\/\/octolize.com\/app\/uploads\/2023\/05\/ups-shipping-method-with-icon-712x273.png 712w\" sizes=\"auto, (max-width: 1724px) 100vw, 1724px\" \/><\/a><\/p>\n<p>Ensure that the file is in the SVG format, and <strong>Save changes<\/strong> after the configuration.<\/p>\n<h3>Step 5: Testing the icon display<\/h3>\n<p>After saving the changes, it&#8217;s time to test how the icon displays in your WooCommerce store. Note that the way it displays may vary depending on your theme. The icon next to the shipping method displays like this for the standard Storefront theme.<\/p>\n<p><a href=\"https:\/\/octolize.com\/es\/cdn-cgi\/image\/format=auto\/app\/uploads\/2023\/05\/ups-shipping-method-with-icon-in-the-storefront-theme.png\/\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-274389\" src=\"https:\/\/octolize.com\/cdn-cgi\/image\/format=auto\/app\/uploads\/2023\/05\/ups-shipping-method-with-icon-in-the-storefront-theme.png\" alt=\"UPS Shipping method with Icon in the Storefront theme\" width=\"2348\" height=\"1250\" srcset=\"https:\/\/octolize.com\/app\/uploads\/2023\/05\/ups-shipping-method-with-icon-in-the-storefront-theme.png 2348w, https:\/\/octolize.com\/app\/uploads\/2023\/05\/ups-shipping-method-with-icon-in-the-storefront-theme-260x138.png 260w, https:\/\/octolize.com\/app\/uploads\/2023\/05\/ups-shipping-method-with-icon-in-the-storefront-theme-712x379.png 712w\" sizes=\"auto, (max-width: 2348px) 100vw, 2348px\" \/><\/a><\/p>\n<h2><span style=\"font-weight: 400;\">Conclusion<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Adding icons to your WooCommerce shipping methods is a simple yet effective way to enhance your online store&#8217;s visual appeal, user experience, and professionalism. Following the step-by-step guide in this article, you can successfully incorporate icons into your shipping methods. Remember to choose icons that align with your branding, test their display, and troubleshoot any issues. <\/span><\/p>\n<h2>FAQ<\/h2>\n<h3>Can I add icons to WooCommerce shipping methods by default?<\/h3>\n<ul>\n<li>No. The article explains that this is not a built-in WooCommerce feature, so you need an additional solution to do it.<\/li>\n<\/ul>\n<h3>Which plugin is used in the guide?<\/h3>\n<ul>\n<li>The guide uses the free Flexible Shipping plugin, because it supports HTML tags in the Method Description field.<\/li>\n<\/ul>\n<h3>What icon format is recommended?<\/h3>\n<ul>\n<li>The article recommends using SVG files because they scale well and display properly on different screen sizes and layouts.<\/li>\n<\/ul>\n<h3>Where can I store the icon file?<\/h3>\n<ul>\n<li>According to the article, you can upload it to the WordPress Media Library, which is presented as the more secure option, or use an external file URL.<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Learn how to add icons for WooCommerce shipping methods using free plugin &#8211; Flexible Shipping.<\/p>","protected":false},"author":5611,"featured_media":274407,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1831,1903,1910],"tags":[],"class_list":["post-274384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-woocommerce","category-shipping-methods"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Add Icons for WooCommerce Shipping Methods? - Octolize<\/title>\n<meta name=\"description\" content=\"Learn how to add icons for WooCommerce shipping methods using the free plugin, Flexible Shipping, to improve the user experience of your store.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/octolize.com\/es\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Icons for WooCommerce Shipping Methods?\" \/>\n<meta property=\"og:description\" content=\"Learn how to add icons for WooCommerce shipping methods using free plugin - Flexible Shipping.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/octolize.com\/es\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/\" \/>\n<meta property=\"og:site_name\" content=\"Octolize\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-13T09:00:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-13T10:49:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/octolize.com\/app\/uploads\/2023\/05\/how-to-add-icons-for-woocommerce-shipping-methods.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Bartosz Gajewski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bartosz Gajewski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/octolize.com\\\/blog\\\/how-to-add-icons-for-woocommerce-shipping-methods\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/octolize.com\\\/blog\\\/how-to-add-icons-for-woocommerce-shipping-methods\\\/\"},\"author\":{\"name\":\"Bartosz Gajewski\",\"@id\":\"https:\\\/\\\/octolize.com\\\/#\\\/schema\\\/person\\\/1fffc6f40d4bd269e2e1c3538a39d8e0\"},\"headline\":\"How to Add Icons for WooCommerce Shipping Methods?\",\"datePublished\":\"2026-03-13T09:00:52+00:00\",\"dateModified\":\"2026-03-13T10:49:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/octolize.com\\\/blog\\\/how-to-add-icons-for-woocommerce-shipping-methods\\\/\"},\"wordCount\":995,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/octolize.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/octolize.com\\\/blog\\\/how-to-add-icons-for-woocommerce-shipping-methods\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/octolize.com\\\/app\\\/uploads\\\/2023\\\/05\\\/how-to-add-icons-for-woocommerce-shipping-methods.jpg\",\"articleSection\":[\"Blog\",\"WooCommerce\",\"Shipping methods\"],\"inLanguage\":\"es-ES\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/octolize.com\\\/blog\\\/how-to-add-icons-for-woocommerce-shipping-methods\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/octolize.com\\\/blog\\\/how-to-add-icons-for-woocommerce-shipping-methods\\\/\",\"url\":\"https:\\\/\\\/octolize.com\\\/blog\\\/how-to-add-icons-for-woocommerce-shipping-methods\\\/\",\"name\":\"How to Add Icons for WooCommerce Shipping Methods? - Octolize\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/octolize.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/octolize.com\\\/blog\\\/how-to-add-icons-for-woocommerce-shipping-methods\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/octolize.com\\\/blog\\\/how-to-add-icons-for-woocommerce-shipping-methods\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/octolize.com\\\/app\\\/uploads\\\/2023\\\/05\\\/how-to-add-icons-for-woocommerce-shipping-methods.jpg\",\"datePublished\":\"2026-03-13T09:00:52+00:00\",\"dateModified\":\"2026-03-13T10:49:23+00:00\",\"description\":\"Learn how to add icons for WooCommerce shipping methods using the free plugin, Flexible Shipping, to improve the user experience of your store.\",\"inLanguage\":\"es-ES\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/octolize.com\\\/blog\\\/how-to-add-icons-for-woocommerce-shipping-methods\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es-ES\",\"@id\":\"https:\\\/\\\/octolize.com\\\/blog\\\/how-to-add-icons-for-woocommerce-shipping-methods\\\/#primaryimage\",\"url\":\"https:\\\/\\\/octolize.com\\\/app\\\/uploads\\\/2023\\\/05\\\/how-to-add-icons-for-woocommerce-shipping-methods.jpg\",\"contentUrl\":\"https:\\\/\\\/octolize.com\\\/app\\\/uploads\\\/2023\\\/05\\\/how-to-add-icons-for-woocommerce-shipping-methods.jpg\",\"width\":1920,\"height\":1280,\"caption\":\"How to Add Icons for WooCommerce Shipping Methods\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/octolize.com\\\/blog\\\/how-to-add-icons-for-woocommerce-shipping-methods\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/octolize.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Icons for WooCommerce Shipping Methods?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/octolize.com\\\/#website\",\"url\":\"https:\\\/\\\/octolize.com\\\/\",\"name\":\"Octolize\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/octolize.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/octolize.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-ES\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/octolize.com\\\/#organization\",\"name\":\"Octolize\",\"url\":\"https:\\\/\\\/octolize.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-ES\",\"@id\":\"https:\\\/\\\/octolize.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/octolize.com\\\/app\\\/uploads\\\/2022\\\/03\\\/octolize-logo-rgb-pion-green-e1649128780788.png\",\"contentUrl\":\"https:\\\/\\\/octolize.com\\\/app\\\/uploads\\\/2022\\\/03\\\/octolize-logo-rgb-pion-green-e1649128780788.png\",\"width\":656,\"height\":628,\"caption\":\"Octolize\"},\"image\":{\"@id\":\"https:\\\/\\\/octolize.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/octolize.com\\\/#\\\/schema\\\/person\\\/1fffc6f40d4bd269e2e1c3538a39d8e0\",\"name\":\"Bartosz Gajewski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-ES\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f4a355a17050796980acd833dc9cbac4ce04daf3cf261c078e27f0dc68a1a20c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f4a355a17050796980acd833dc9cbac4ce04daf3cf261c078e27f0dc68a1a20c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f4a355a17050796980acd833dc9cbac4ce04daf3cf261c078e27f0dc68a1a20c?s=96&d=mm&r=g\",\"caption\":\"Bartosz Gajewski\"},\"description\":\"Content Specialist in WP Desk. He tries to increase the number of plugin users with useful content. Privately an enthusiast of mountains and European cinema.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/bartoszgajewski\\\/\"],\"jobTitle\":\"Content Writer\",\"url\":\"https:\\\/\\\/octolize.com\\\/es\\\/blog\\\/author\\\/bartosz\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Add Icons for WooCommerce Shipping Methods? - Octolize","description":"Learn how to add icons for WooCommerce shipping methods using the free plugin, Flexible Shipping, to improve the user experience of your store.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/octolize.com\/es\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/","og_locale":"es_ES","og_type":"article","og_title":"How to Add Icons for WooCommerce Shipping Methods?","og_description":"Learn how to add icons for WooCommerce shipping methods using free plugin - Flexible Shipping.","og_url":"https:\/\/octolize.com\/es\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/","og_site_name":"Octolize","article_published_time":"2026-03-13T09:00:52+00:00","article_modified_time":"2026-03-13T10:49:23+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/octolize.com\/app\/uploads\/2023\/05\/how-to-add-icons-for-woocommerce-shipping-methods.jpg","type":"image\/jpeg"}],"author":"Bartosz Gajewski","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Bartosz Gajewski","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/octolize.com\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/#article","isPartOf":{"@id":"https:\/\/octolize.com\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/"},"author":{"name":"Bartosz Gajewski","@id":"https:\/\/octolize.com\/#\/schema\/person\/1fffc6f40d4bd269e2e1c3538a39d8e0"},"headline":"How to Add Icons for WooCommerce Shipping Methods?","datePublished":"2026-03-13T09:00:52+00:00","dateModified":"2026-03-13T10:49:23+00:00","mainEntityOfPage":{"@id":"https:\/\/octolize.com\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/"},"wordCount":995,"commentCount":2,"publisher":{"@id":"https:\/\/octolize.com\/#organization"},"image":{"@id":"https:\/\/octolize.com\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/#primaryimage"},"thumbnailUrl":"https:\/\/octolize.com\/app\/uploads\/2023\/05\/how-to-add-icons-for-woocommerce-shipping-methods.jpg","articleSection":["Blog","WooCommerce","Shipping methods"],"inLanguage":"es-ES","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/octolize.com\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/octolize.com\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/","url":"https:\/\/octolize.com\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/","name":"How to Add Icons for WooCommerce Shipping Methods? - Octolize","isPartOf":{"@id":"https:\/\/octolize.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/octolize.com\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/#primaryimage"},"image":{"@id":"https:\/\/octolize.com\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/#primaryimage"},"thumbnailUrl":"https:\/\/octolize.com\/app\/uploads\/2023\/05\/how-to-add-icons-for-woocommerce-shipping-methods.jpg","datePublished":"2026-03-13T09:00:52+00:00","dateModified":"2026-03-13T10:49:23+00:00","description":"Learn how to add icons for WooCommerce shipping methods using the free plugin, Flexible Shipping, to improve the user experience of your store.","inLanguage":"es-ES","potentialAction":[{"@type":"ReadAction","target":["https:\/\/octolize.com\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/"]}]},{"@type":"ImageObject","inLanguage":"es-ES","@id":"https:\/\/octolize.com\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/#primaryimage","url":"https:\/\/octolize.com\/app\/uploads\/2023\/05\/how-to-add-icons-for-woocommerce-shipping-methods.jpg","contentUrl":"https:\/\/octolize.com\/app\/uploads\/2023\/05\/how-to-add-icons-for-woocommerce-shipping-methods.jpg","width":1920,"height":1280,"caption":"How to Add Icons for WooCommerce Shipping Methods"},{"@type":"BreadcrumbList","@id":"https:\/\/octolize.com\/blog\/how-to-add-icons-for-woocommerce-shipping-methods\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/octolize.com\/"},{"@type":"ListItem","position":2,"name":"How to Add Icons for WooCommerce Shipping Methods?"}]},{"@type":"WebSite","@id":"https:\/\/octolize.com\/#website","url":"https:\/\/octolize.com\/","name":"Octolize","description":"","publisher":{"@id":"https:\/\/octolize.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/octolize.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-ES"},{"@type":"Organization","@id":"https:\/\/octolize.com\/#organization","name":"Octolize","url":"https:\/\/octolize.com\/","logo":{"@type":"ImageObject","inLanguage":"es-ES","@id":"https:\/\/octolize.com\/#\/schema\/logo\/image\/","url":"https:\/\/octolize.com\/app\/uploads\/2022\/03\/octolize-logo-rgb-pion-green-e1649128780788.png","contentUrl":"https:\/\/octolize.com\/app\/uploads\/2022\/03\/octolize-logo-rgb-pion-green-e1649128780788.png","width":656,"height":628,"caption":"Octolize"},"image":{"@id":"https:\/\/octolize.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/octolize.com\/#\/schema\/person\/1fffc6f40d4bd269e2e1c3538a39d8e0","name":"Bartosz Gajewski","image":{"@type":"ImageObject","inLanguage":"es-ES","@id":"https:\/\/secure.gravatar.com\/avatar\/f4a355a17050796980acd833dc9cbac4ce04daf3cf261c078e27f0dc68a1a20c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f4a355a17050796980acd833dc9cbac4ce04daf3cf261c078e27f0dc68a1a20c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f4a355a17050796980acd833dc9cbac4ce04daf3cf261c078e27f0dc68a1a20c?s=96&d=mm&r=g","caption":"Bartosz Gajewski"},"description":"Content Specialist in WP Desk. He tries to increase the number of plugin users with useful content. Privately an enthusiast of mountains and European cinema.","sameAs":["https:\/\/www.linkedin.com\/in\/bartoszgajewski\/"],"jobTitle":"Content Writer","url":"https:\/\/octolize.com\/es\/blog\/author\/bartosz\/"}]}},"_links":{"self":[{"href":"https:\/\/octolize.com\/es\/wp-json\/wp\/v2\/posts\/274384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/octolize.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/octolize.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/octolize.com\/es\/wp-json\/wp\/v2\/users\/5611"}],"replies":[{"embeddable":true,"href":"https:\/\/octolize.com\/es\/wp-json\/wp\/v2\/comments?post=274384"}],"version-history":[{"count":9,"href":"https:\/\/octolize.com\/es\/wp-json\/wp\/v2\/posts\/274384\/revisions"}],"predecessor-version":[{"id":350312,"href":"https:\/\/octolize.com\/es\/wp-json\/wp\/v2\/posts\/274384\/revisions\/350312"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/octolize.com\/es\/wp-json\/wp\/v2\/media\/274407"}],"wp:attachment":[{"href":"https:\/\/octolize.com\/es\/wp-json\/wp\/v2\/media?parent=274384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/octolize.com\/es\/wp-json\/wp\/v2\/categories?post=274384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/octolize.com\/es\/wp-json\/wp\/v2\/tags?post=274384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}