title: Woocommerce how to concatenate Before and After shop loop hooks on the same line
body: <p>I am working on an e-commerce website using woocommerce.</p>
  <p>I am styling the product card (The second container which includes the product name,price,etc..) in shop categories and all locations using hooks and <code>content-product.php</code> file.</p>
  <p>My code for <code>product.php</code> file is</p>
  <pre><code>&lt;div class=&quot;second-container&quot;&gt;
  
              &lt;div class=&quot;product_info&quot;&gt;
                  &lt;?php do_action( 'woocommerce_before_shop_loop_item_title'); ?&gt;
                  &lt;a href=&quot;&lt;?php echo get_the_permalink() ?&gt;&quot; class=&quot;title&quot;&gt;&lt;?php do_action( 'woocommerce_shop_loop_item_title' ); ?&gt;&lt;/a&gt;
                                  &lt;?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?&gt;
  </code></pre>
  <p>This one to show the name.</p>
  <p>For my first entry which is a custom attribute named &quot;Brand&quot; I use the following function in my <code>functions.php</code> file.</p>
  <pre><code>add_action('woocommerce_shop_loop_item_title', 'display_custom_product_attributes_on_loop', 5 );
  function display_custom_product_attributes_on_loop() {
      global $product;
  
      
      $value2 = $product-&gt;get_attribute('Brand');
      
  
      if ( !  empty($value2)  ) {
  
          echo '&lt;div class=&quot;items&quot; style=&quot;;&quot;&gt;&lt;p&gt;';
  
          $attributes = array(); // Initializing
  
          
          if ( ! empty($value2) ) {
              $attributes[] = __(&quot;&quot;) . ' ' . $value2;
          }
  
          
  
          echo implode( '', $attributes ) . '&lt;/p&gt;&lt;/div&gt;';
      }
  }
  </code></pre>
  <p>It was very hard for me to get to this point anyway as I know nothing about php, it works fine but there is a problem, which is there is some spacing between the two hooks See image:</p>
  <p><a href="https://i.stack.imgur.com/saFAh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/saFAh.png" alt="enter image description here" /></a></p>
  <p>where brand= loft
  title = Men’s Black Turtleneck Sweater 2600</p>
  <p>I tried to manipulate the padding in css using all containers available top/bottom padding but no luck to remove the spacing.</p>
  <p>I am seeking help to do one of the following</p>
  <p>1- Concatenate both brand and title in the same line giving the brand click a permalink to the global filter of the attribute and the name a permalink of the product itself ( 100% recommended)</p>
  <p>OR</p>
  <p>2- Concatenate both brand and title in the same line giving both of them the permalink for the product only (80% recommended)</p>
  <p>OR</p>
  <p>3- Reduce the spacing between the first and second line.</p>
  <p><a href="http://www.kajweloo.com/shop/" rel="nofollow noreferrer">My shop page for refrence</a></p>
  <p>I use Swoof plugin for filtering</p>
  <p>Much thanks and appreciation in advance for any help.</p>