I would like to expand this answer for 2022.
You will have to change 3 files if you want to keep web root in another directory. Let's say that you have installed XAMPP regularly, but your httpd directory is on another volume. Let's say in work/xampp/
Open /Applications/XAMPP/xamppfiles/apache2/conf/httpd.conf and change it to the following
Alias /bitnami/ "/Applications/XAMPP/xamppfiles/apache2/htdocs/"
Alias /bitnami "/Applications/XAMPP/xamppfiles/apache2/htdocs"
DocumentRoot "/Applications/XAMPP/xamppfiles/apache2/htdocs" 
<Directory "/Applications/XAMPP/xamppfiles/apache2/htdocs">
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>
DocumentRoot "/Volumes/work/xampp"
<Directory "/Volumes/work/xampp">
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>
We have added
DocumentRoot "/Applications/XAMPP/xamppfiles/apache2/htdocs"
and the block
DocumentRoot "/Volumes/work/xampp"
<Directory "/Volumes/work/xampp">
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>
Open file /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf and change it to the following
<VirtualHost *:80>
    DocumentRoot "/Volumes/work/xampp"
</VirtualHost>
<VirtualHost yoursite.mac:80>
    ServerName yoursite.mac
    ServerAlias www.yoursite.mac
    ServerAdmin webmaster@yoursite.mac
    DocumentRoot "/Volumes/work/xampp/yoursite.mac/webroot"
    ErrorLog "/Volumes/work/xampp/yoursite.mac/logs/oll.mac-error_log"
    CustomLog "/Volumes/work/xampp/yoursite.mac/logs/oll.mac-access_log" common
    <Directory "/Volumes/work/xampp">
        Require all granted
    </Directory>
</VirtualHost>
Open /etc/hosts as a sudo and add your new site to it
127.0.0.1 yoursite.mac