WOO Commerce shop page customization when built form scratch

The default WOO Commerce page cannot be edited using Avial Layout builder.

“This page is set as the default WooCommerce Shop Overview and therefore does not support the Enfold advanced layout editor.” So following the instructions in this link, I opt to build a page from scratch due to the fact that the other option is in beta – http://kriesi.at/documentation/enfold/custom-woocommerce-shop-overview/

I created a page called shop and I also created a WOO commerce Sidebar widget where I placed all the WOO commerce widgets that I want to display
At this point, Shopb is NOT the WOO commerce > Settings > Shop page
First thing is that the WOO Commerce price filter does not shop but appears empty some tore widgets appear empty too.

So I proceed to make this page the WOO Commerce shopping page and at this point it gets completely distorted and worse.

First thing, how do I add the price filter to shop

Secondly how do i fix the distortion when I make shop the WOO commerce shopping page ?

Third, if I proceed with using the shop page and when this is assigned as the WOO Commerce shopping page, how do I customize its right side bar ?