Site logo

Archived topic

store icon svg, why isn't this code working?

3 replies · Started by sparkle on May 27, 2022

Viewing posts 1–4 of 4

hi there, i'm just trying to swap out the shopping cart icon with an svg. i've found articles and forum responses with pretty much all the same info, yet on my setup, this isn't working. why?

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
      if ( 'shopping-cart' === $icon ) {
          $output = '<svg width="21px" height="19px" viewBox="0 0 21 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
              <title>icn_basket</title>
              <desc>Created with Sketch.</desc>
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="Store" transform="translate(-1313.000000, -37.000000)" fill="#000000" fill-rule="nonzero">
                      <g id="Menu">
                          <path d="M1331.55766,42.1107848 L1331.55713,42.1012394 C1332.74194,42.0983632 1333.75665,42.9337799 1333.96291,44.0793804 C1334.1682,45.226038 1333.50442,46.3514562 1332.39001,46.7470893 L1331.32447,53.1164532 C1331.04594,54.7804772 1329.58052,56.0019184 1327.86294,55.9999977 L1319.104,55.9999977 C1317.38555,55.9999977 1315.92021,54.7736186 1315.64648,53.1066202 L1314.58289,46.7468435 C1313.48312,46.341746 1312.83306,45.2249564 1313.03737,44.0889676 C1313.24167,42.9529789 1314.24172,42.1213895 1315.41577,42.1108266 L1316.24669,42.1108266 L1319.88815,37.3912041 C1320.22152,36.9581292 1320.85009,36.8726725 1321.29096,37.2001134 C1321.73184,37.5285376 1321.81786,38.1450212 1321.48452,38.5780937 L1318.75724,42.1108659 L1328.46639,42.1108659 L1325.73911,38.5780937 C1325.40576,38.1431037 1325.49473,37.5246781 1325.93853,37.1981959 C1326.38136,36.8707477 1327.00995,36.958139 1327.34329,37.393129 L1330.977,42.1107848 L1331.55766,42.1107848 Z M1315.4162,44.0773966 C1315.17474,44.0773966 1314.97825,44.2694485 1314.97825,44.5075929 C1314.97825,44.7447761 1315.17474,44.9377892 1315.4162,44.9377892 L1331.55766,44.9377892 C1331.79912,44.9377892 1331.99561,44.7447761 1331.99561,44.5075929 C1331.99561,44.2694485 1331.79912,44.0773966 1331.55766,44.0773966 L1315.4162,44.0773966 Z M1327.8694,54.0333687 L1327.86948,54.0333687 C1328.60167,54.0333687 1329.22829,53.5138637 1329.35049,52.8042364 L1330.33684,46.904401 L1316.64212,46.904401 L1317.62848,52.8042364 C1317.75068,53.5138637 1318.37729,54.0333687 1319.11047,54.0333687 L1327.8694,54.0333687 Z M1325.97333,48.2592593 C1326.5408,48.2592593 1327,48.732412 1327,49.3148148 C1327,49.8982468 1326.5408,50.3703704 1325.97333,50.3703704 L1320.32667,50.3703704 C1319.7592,50.3703704 1319.3,49.8982468 1319.3,49.3148148 C1319.3,48.732412 1319.7592,48.2592593 1320.32667,48.2592593 L1325.97333,48.2592593 Z M1325.97333,51.0740741 C1326.5408,51.0740741 1327,51.5472269 1327,52.1296296 C1327,52.7130616 1326.5408,53.1851852 1325.97333,53.1851852 L1320.32667,53.1851852 C1319.7592,53.1851852 1319.3,52.7130616 1319.3,52.1296296 C1319.3,51.5472269 1319.7592,51.0740741 1320.32667,51.0740741 L1325.97333,51.0740741 Z" id="icn_basket" transform="translate(1323.500000, 46.500000) rotate(-360.000000) translate(-1323.500000, -46.500000) "></path>
                      </g>
                  </g>
              </g>
          </svg>';
      }
      return $output;
  }, 10, 2 );
  

Try this one instead, if your current icon is a shopping bag, change the shopping-cart to shopping-bag.

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'shopping-cart' === $icon ) {
        $svg = '<svg width="21px" height="19px" viewBox="0 0 21 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
              <title>icn_basket</title>
              <desc>Created with Sketch.</desc>
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="Store" transform="translate(-1313.000000, -37.000000)" fill="#000000" fill-rule="nonzero">
                      <g id="Menu">
                          <path d="M1331.55766,42.1107848 L1331.55713,42.1012394 C1332.74194,42.0983632 1333.75665,42.9337799 1333.96291,44.0793804 C1334.1682,45.226038 1333.50442,46.3514562 1332.39001,46.7470893 L1331.32447,53.1164532 C1331.04594,54.7804772 1329.58052,56.0019184 1327.86294,55.9999977 L1319.104,55.9999977 C1317.38555,55.9999977 1315.92021,54.7736186 1315.64648,53.1066202 L1314.58289,46.7468435 C1313.48312,46.341746 1312.83306,45.2249564 1313.03737,44.0889676 C1313.24167,42.9529789 1314.24172,42.1213895 1315.41577,42.1108266 L1316.24669,42.1108266 L1319.88815,37.3912041 C1320.22152,36.9581292 1320.85009,36.8726725 1321.29096,37.2001134 C1321.73184,37.5285376 1321.81786,38.1450212 1321.48452,38.5780937 L1318.75724,42.1108659 L1328.46639,42.1108659 L1325.73911,38.5780937 C1325.40576,38.1431037 1325.49473,37.5246781 1325.93853,37.1981959 C1326.38136,36.8707477 1327.00995,36.958139 1327.34329,37.393129 L1330.977,42.1107848 L1331.55766,42.1107848 Z M1315.4162,44.0773966 C1315.17474,44.0773966 1314.97825,44.2694485 1314.97825,44.5075929 C1314.97825,44.7447761 1315.17474,44.9377892 1315.4162,44.9377892 L1331.55766,44.9377892 C1331.79912,44.9377892 1331.99561,44.7447761 1331.99561,44.5075929 C1331.99561,44.2694485 1331.79912,44.0773966 1331.55766,44.0773966 L1315.4162,44.0773966 Z M1327.8694,54.0333687 L1327.86948,54.0333687 C1328.60167,54.0333687 1329.22829,53.5138637 1329.35049,52.8042364 L1330.33684,46.904401 L1316.64212,46.904401 L1317.62848,52.8042364 C1317.75068,53.5138637 1318.37729,54.0333687 1319.11047,54.0333687 L1327.8694,54.0333687 Z M1325.97333,48.2592593 C1326.5408,48.2592593 1327,48.732412 1327,49.3148148 C1327,49.8982468 1326.5408,50.3703704 1325.97333,50.3703704 L1320.32667,50.3703704 C1319.7592,50.3703704 1319.3,49.8982468 1319.3,49.3148148 C1319.3,48.732412 1319.7592,48.2592593 1320.32667,48.2592593 L1325.97333,48.2592593 Z M1325.97333,51.0740741 C1326.5408,51.0740741 1327,51.5472269 1327,52.1296296 C1327,52.7130616 1326.5408,53.1851852 1325.97333,53.1851852 L1320.32667,53.1851852 C1319.7592,53.1851852 1319.3,52.7130616 1319.3,52.1296296 C1319.3,51.5472269 1319.7592,51.0740741 1320.32667,51.0740741 L1325.97333,51.0740741 Z" id="icn_basket" transform="translate(1323.500000, 46.500000) rotate(-360.000000) translate(-1323.500000, -46.500000) "></path>
                      </g>
                  </g>
              </g>
          </svg>';

        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 );
  

awesome thank you!

No problem :)

This archived topic is closed to new replies.