Woocommerce how to concatenate Before and After shop loop hooks on the same line

Question

I am working on an e-commerce website using woocommerce.

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 content-product.php file.

My code for product.php file is

<div class="second-container">

            <div class="product_info">
                <?php do_action( 'woocommerce_before_shop_loop_item_title'); ?>
                <a href="<?php echo get_the_permalink() ?>" class="title"><?php do_action( 'woocommerce_shop_loop_item_title' ); ?></a>
                                <?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?>

This one to show the name.

For my first entry which is a custom attribute named "Brand" I use the following function in my functions.php file.

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->get_attribute('Brand');
    

    if ( !  empty($value2)  ) {

        echo '<div class="items" style=";"><p>';

        $attributes = array(); // Initializing

        
        if ( ! empty($value2) ) {
            $attributes[] = __("") . ' ' . $value2;
        }

        

        echo implode( '', $attributes ) . '</p></div>';
    }
}

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:

where brand= loft title = Men’s Black Turtleneck Sweater 2600

I tried to manipulate the padding in css using all containers available top/bottom padding but no luck to remove the spacing.

I am seeking help to do one of the following

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)

OR

2- Concatenate both brand and title in the same line giving both of them the permalink for the product only (80% recommended)

OR

3- Reduce the spacing between the first and second line.

My shop page for refrence

I use Swoof plugin for filtering

Much thanks and appreciation in advance for any help.

Answer 1

You could use the_title filter hook to manipulate the title. Also use some conditional check to manipulate only the products name on the shop page. So i'd do something like this:

add_filter('the_title', 'display_custom_product_attributes_on_loop', 20, 2);

function display_custom_product_attributes_on_loop($the_title, $id)
{
  global $product;

  if (is_shop() && get_post_type($id) == 'product') :

    $value2 = $product->get_attribute('Brand');
    
    if ( !  empty($value2)  ):

      $the_title =  $value2 . ' ' . '<a href="' . get_the_permalink() . '">' . $the_title . '</a>';

    endif;

  endif;

  return $the_title;
}

This will output attribute value + your product title which is a link to the single product page.

OR

add_filter('the_title', 'display_custom_product_attributes_on_loop', 20, 2);

function display_custom_product_attributes_on_loop($the_title, $id)
{
  global $product;

  if (is_shop() && get_post_type($id) == 'product') :

    $value2 = $product->get_attribute('Brand');
    
    if ( !  empty($value2)  ):

      $the_title =  $the_title . ' ' . '<a href="' . get_the_permalink() . '">' . $value2 . '</a>';

    endif;

  endif;

  return $the_title;
}

This will output the product title + your attribute value which is a link to the single product page.