title: Switch statement and custom shortcode issue in Woocommerce
body: <p>I am working on a Woocommerce shop, on the product page I want to be able to display multiple images by placing a shortcode in the text editor. the images are conditional and are only to be shown if the attribute called contains a specific value. I was able to create such a function, with using the switch statement to look for the value and display the image, if the value exsists. </p>
  
  <p>Here is the code - it is placed in functions.php in my child theme. </p>
  
  <pre><code>   function display_colors_pic_sp() {
          $product = wc_get_product();
          $terms = get_terms("pa_color");
          foreach($terms as $term)
              switch ($term-&gt;name) {
                  case "Blue RAL 5003":
                      echo '&lt;img src="https://example.dk/wp-content/uploads/2019/04/RAL_5003_1024x1024-1.jpg"&gt;';
                  break;
  
                  case "Blue RAL 5010":
                      echo '&lt;img src="example.dk/wp-content/uploads/2019/04/RAL_5003_1024x1024-1.jpg"&gt;';
                  break;
  
                  case "Blue RAL 5013":
                      echo '&lt;img src="https:example.dk/wp-content/uploads/2019/04/RAL_5013_e5005376-6410-479a-b526-f23ca5f13cb3_1024x1024.jpg"&gt;';
                  break;
  
                  case "Green RAL 6007":
                      echo '&lt;img src="https://example.dk/wp-content/uploads/2019/04/RAL_6007_1024x1024.jpg"&gt;';
                  break;
  
                  case "Grey RAL 7021":
                      echo '&lt;img src="https://example.dk/wp-content/uploads/2019/04/RAL_7032_1024x1024.jpg"&gt;';
                  break;
  
                  case "Grey RAL 7035":
                      echo '&lt;img src="https://example.dk/wp-content/uploads/2019/04/RAL_7035_f0d32a8d-7aac-45a8-97ec-cd46c8e35daf_1024x1024.jpg"&gt;';
                  break;
  
                  case "Black RAL 9005":
                      echo '&lt;img src="https://example.dk/wp-content/uploads/2019/04/RAL_9005_61462eeb-8b3d-4792-909b-fdb549d47e80_1024x1024.jpg"&gt;';
                  break;
  
                  case "White RAL 9010":
                      echo '&lt;img src="https://example.dk/wp-content/uploads/2019/04/RAL_9010_f80b4432-ba58-4377-821a-8ee8832a8610_1024x1024.jpg"&gt;';
                  break;
  
              }
  
  
          }
  
      add_shortcode('colorpic', 'display_colors_pic_sp');
  </code></pre>
  
  <p>It works pretty much the way is it supposed to, and displays all the images based on the value, but for some reason no matter where I place the short-code. it appears in the top of the page, just right after the title regardless where I place the shortcode. I have another short-code which does something else and this one I can choose the position, by where I put the shortcode. </p>
  
  <p>NOTE: 
  If I change echo to return, the short-code appears where I want it to appear.
  but then it only displays the first case for some reason, and not the other ones also that also contain a value. I have also tried removing "break;" after every case.   </p>
  
  <p>I would be very happy If somebody has the time and will to help me out and find out why the short-code gets positioned at the top of the page, and not where the short-code is placed.</p>