loop-start.php

<?php
/**
 * Product Loop Start
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/loop/loop-start.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see 	    https://docs.woocommerce.com/document/template-structure/
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.0.0
 */
?>
<section class="product-list">
	<?php if (is_product_category()) { ?>

	<div class="wrapper filter-panel">
		<div class="col-20">
			<div class="filter-list">Color<i class="fa fa-angle-down" aria-hidden="true"></i>
				<div class="filter-dropdown">
					<div class="col-50">
						<p>BLACK</p>
						<p>BLUE</p>
						<p>PURPLE</p>
						<p>RED</p>
						<p>PINK</p>
						<p>BLUSH</p>
						<p>NUDE</p>
						<p>IVORY</p>
						<p>WHITE</p>
					</div>
					<div class="col-50">
						<p>SILVER</p>
						<p>GOLD</p>
						<p>COPPER</p>
						<p>ORANGE</p>
						<p>YELLOW</p>
						<p>GREEN</p>
						<p>MULTI</p>
						<p>FLORAL</p>
					</div>
				</div>
			</div>
		</div>
		<div class="col-20">
			<div class="filter-list">Style<i class="fa fa-angle-down" aria-hidden="true"></i>
				<div class="filter-dropdown">

					<?php echo facetwp_display( 'facet', 'style' ); ?>

<!--
					<div class="col-50">
						<p>TWO-PIECE</p>
						<p>MERMAID </p>
						<p>FLORAL</p>
						<p>ILLUSION</p>
						<p>PRINT</p>
						<p>OPEN BACK</p>
						<p>HIGH NECK</p>
						<p>HALTER</p>
						<p>OFF THE SHOULDER</p>
						<p>STRAPLESS</p>
						<p>BALLGOWN</p>
						<p>CORSET</p>
						<p>ROMPER</p>
						<p>JUMPSUIT</p>
						<p>ONE SHOULDER</p>
					</div>
					<div class="col-50">
						<p>A-LINE</p>
						<p>BODY-CON</p>
						<p>DROP WAIST</p>
						<p>FIT &amp; FLARE</p>
						<p>PEPLUM</p>
						<p>EMPIRE WAIST</p>
						<p>SHEATH</p>
						<p>SHIFT</p>
						<p>SLIPDRESS</p>
						<p>TRAPEZE</p>
						<p>WRAP DRESS</p>
						<p>SEQUIN</p>
						<p>LACE</p>
						<p>JERSEY</p>
					</div>
-->

				</div>
			</div>
		</div>
		<div class="col-20">
			<div class="filter-list">Dress Length<i class="fa fa-angle-down" aria-hidden="true"></i>
				<div class="filter-dropdown">

					<?php echo facetwp_display( 'facet', 'dress_length' ); ?>
<!--
					<p>SHORT</p>
					<p>KNEE LENGTH</p>
					<p>MID-LENGTH / TEA LENGTH</p>
					<p>LONG</p>
					<p>HIGH LOW</p>
-->

				</div>
			</div>
		</div>
		<div class="col-20">
			<div class="filter-list">Sleeve Length<i class="fa fa-angle-down" aria-hidden="true"></i>
				<div class="filter-dropdown">

					<?php echo facetwp_display( 'facet', 'sleve_length' ); ?>

<!--
					<p>SLEEVLESS</p>
					<p>SHORT SLEEVE</p>
					<p>3/4 SLEEVE</p>
					<p>LONG SLEEVE</p>
					<p>CAP SLEEVE</p>
-->

				</div>
			</div>
		</div>
		<div class="col-20">
			<div class="filter-list">Size<i class="fa fa-angle-down" aria-hidden="true"></i>
				<div class="filter-dropdown">

					<?php echo facetwp_display( 'facet', 'sizes' ); ?>

<!--
					<div class="col-50">
						<p>0</p>
						<p>2</p>
						<p>4</p>
						<p>6</p>
						<p>8</p>
						<p>10</p>
						<p>12</p>
						<p>14</p>
						<p>16</p>
						<p>18</p>
						<p>20</p>
					</div>
					<div class="col-50">
						<p>14W</p>
						<p>16W</p>
						<p>18W</p>
						<p>20W</p>
						<p>22W</p>
						<p>24W</p>
						<p>26W</p>
						<p>28W</p>
						<p>30W</p>
					</div>
-->

				</div>
			</div>
		</div>
	</div>
	<?php } ?>

	<div class="wrapper facetwp-template">