WC Vendors plugin already has a shortcode [wcv_vendorslist] for displaying the list of vendors, but it doesn't include the vendor pictures and it lacks box type styling. Therefore, we are going to create a new shortcode [wc_makers_list] for catalog which will also display vendor pics with the help of wp_user_avatar plugin.

README.md

Automatically generated catalog of vendors

WC Vendors plugin already has a shortcode [wcv_vendorslist] for displaying the list of vendors, but it doesn't include the vendor pictures and it lacks box type styling. Therefore, we are going to create a new shortcode [wc_makers_list] for catalog which will also display vendor pics with the help of wp_user_avatar plugin.

Installation

1. Make sure you have installed WC Vendors and wp_user_avatar plugins.
2. Copy over PHP code from functions.php into your WordPress functions.php.
3. Copy vendor-list.php from the repository to your current theme folder/wc-vendors/front/ .
4. Don't forget to update the profile pics for vendors by going to users->choosing vendor you wish to have a picture->Edit->Avatar->Image and uploading the image of the vendor you wish to appear on the vendors catalog. Keep in mind that now you can have pictures with different height and width resolutions(for example 180x240 instead of 180x180 as it was before installing wp_user_avatar). Note: Try to upload pictures of the same resolution for all your vendors for a great looking vendors catalog. If you do not upload a new picture, you would see the default WordPress square user avatar on the vendor catalog page.
5. You can customize the appearance of vendors catalog page by adding or removing classes as well as elements in vendor-list.php file. Currently, all the classes are optimized for great look on Avada theme. Be careful with removing the php commands.
6. Now you can use [wc_makers_list] shortcode on any page. The shortcode also accepts arguments: orderby='display_name' (default), order='ASC' (default), per_page='12' (default), show_products='yes' (default, yes only shows vendors with products, no shows all vendors even those with zero products).

functions.php

/**
      *     List of vendors shortcode
      *
      *     @param $atts shortcode attributs
    */
    function wc_makers_list( $atts ) {
        $html = '';

        extract( shortcode_atts( array(
                'orderby'       => 'display_name',
                'order'         => 'ASC',
                'per_page'      => '12',
                'columns'       => '4',
                'show_products' => 'yes'
            ), $atts ) );
        // Hook into the user query to modify the query to return users that have at least one product
        if ($show_products == 'yes') add_action( 'pre_user_query', array( 'WCV_Shortcodes', 'vendors_with_products') );
        // Get all vendors
        $vendor_total_args = array (
            'role'              => 'vendor',
            'meta_key'          => 'pv_shop_slug',
            'meta_value'        => '',
            'orderby'           => $orderby,
            'order'             => $order,
        );
        if ($show_products == 'yes') $vendor_total_args['query_id'] = 'vendors_with_products';
        $vendor_query = New WP_User_Query( $vendor_total_args );
        $all_vendors =$vendor_query->get_results();

        ob_start();
        // Loop through all vendors and output a simple link to their vendor pages
        $counter=1;
        foreach ($all_vendors as $vendor) {
           wc_get_template( 'vendor-list.php', array(
                                                'shop_link' => WCV_Vendors::get_vendor_shop_page($vendor->ID),
                                                        'shop_name' => $vendor->pv_shop_name,
                                                        'vendor_id' => $vendor->ID,
                                                        'shop_description' => $vendor->pv_shop_description,
                                                        'count' => $counter,
                                                        'vendor_username' => htmlspecialchars(strtolower(get_userdata($vendor->ID)->user_login))
                                                ), 'wc-vendors/front/', wcv_plugin_dir . 'templates/front/' );
           $counter++;
        } // End foreach

        $html .= ob_get_clean();

        return $html;
    }
add_shortcode('wc_makers_list', 'wc_makers_list');

wc-vendors front vendor-list.php

<?php
/*
*	Template Variables available
*   $shop_name : pv_shop_name
*   $shop_description : pv_shop_description (completely sanitized)
*   $shop_link : the vendor shop link
*   $vendor_id  : current vendor id for customization
*/
?>

<div class="fusion-one-third fusion-layout-column fusion-spacing-yes artisan-container<?php if ($count % 3 == 0) : ?> fusion-column-last<?php endif; ?>" style="margin-top:0px;margin-bottom:20px;">
    <div class="fusion-column-wrapper" style="border:1px solid #e2e2e2;">
        <div class="fusion-person person fusion-person-left fusion-person-icon-top">
            <div class="person-shortcode-image-wrapper">
                <div class="person-image-container hover-type-none glow" style="-moz-box-shadow: 0 0 3px rgba(0,0,0,.3);-webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);box-shadow: 0 0 3px rgba(0,0,0,.3);-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;">

                        <a href="<?php echo $shop_link; ?>" target="_self"><?php echo get_avatar($vendor_id, 240); ?></a>

                </div>
            </div>
            <div class="person-desc">
                <div class="person-author"></div>
                <div class="person-content fusion-clearfix">
                    <h3 style="text-align: center;" data-fontsize="16" data-lineheight="24">
                        <a href="<?php echo $shop_link; ?>"><?php echo $shop_name; ?></a>
                    </h3>
                    <h4 style="text-align: center;" data-fontsize="13" data-lineheight="20">
                        <a href="<?php echo esc_url(get_permalink( woocommerce_get_page_id( 'shop' ) ) . '?swoof=1&pa_vendor=' . preg_replace('/\s+/', '-', $vendor_username)); ?>">View Products</a>
                    </h4>
                </div>
            </div>
        </div>
        <div class="fusion-clearfix"></div>
    </div>
</div>