--- title: How to Import Bricks Woocommerce Layouts Pack With Plugin Base (Easy Way) description: "###### Read below documentations [How to Download Our Product?](https://brickslibraryplus.com/docs/how-to-download-our-product/) [Downloaded Product Folder Structure](https://brickslibraryplus.com/docs/downloaded-product-folder-structure/) ###### See Plugin Base Layout Product Folder Structure **Go to \"Bricks Woocommerce Layouts Pack\" Folder and once you click on that folder see below** ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Bricks-woo-plugins-base-pack-folder.png) **Go…" url: "https://brickslibraryplus.com/docs/how-to-import-bricks-woocommerce-layouts-pack-with-plugin-base-easy-way/" updated: "2025-03-05" category: Bricks Woocommerce Templates --- # How to Import Bricks Woocommerce Layouts Pack With Plugin Base (Easy Way) ###### Read below documentations [How to Download Our Product?](https://brickslibraryplus.com/docs/how-to-download-our-product/) [Downloaded Product Folder Structure](https://brickslibraryplus.com/docs/downloaded-product-folder-structure/) ###### See Plugin Base Layout Product Folder Structure **Go to "Bricks Woocommerce Layouts Pack" Folder and once you click on that folder see below** ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Bricks-woo-plugins-base-pack-folder.png) **Go to "Woo-Settings" Folder and once you click on that folder see below** ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Bricks-woo-plugins-folder.png) ###### For example ### I want to import "Bricks Fashion Shop Template Pack" Import Regular and Woo Plugin Base Layouts Pack within 15 min ## **Step 1** ###### Go to Plugins and add below plugins > [Classic Widgets](https://wordpress.org/plugins/classic-widgets/) [“Classic Widgets” — Plugin Directory](https://wordpress.org/plugins/classic-widgets/embed/#?secret=UWvKZR0URD#?secret=I3CJjVQyJu) > [Widget Importer & Exporter](https://wordpress.org/plugins/widget-importer-exporter/) [“Widget Importer & Exporter” — Plugin Directory](https://wordpress.org/plugins/widget-importer-exporter/embed/#?secret=qA1XUcQJll#?secret=2yduXc5KHt) > [WordPress Importer](https://wordpress.org/plugins/wordpress-importer/) [“WordPress Importer” — Plugin Directory](https://wordpress.org/plugins/wordpress-importer/embed/#?secret=DmHLcjtILt#?secret=AtH3Kv4nj0) ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Bricks-Templates-Bricks-Templates-Pack-2-1024x443-1.webp) ## **Step 2** ###### Installing Woocommerce plugins and setup . ###### Go to Dashboard > 1. Plugins > 2. Add New Plugin > 3. Search Plugins > 4. Woocommerce > 5. Click on Active ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/bricks-Woo-Plugin-1.webp) ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/bricks-Woo-Plugin-2.webp) ###### Step 2.1 : After Install Woocommerce Plugin Set below permalink ###### Go to Dashboard > 1. Settings > 2. Permalink > 3. Click on Post Name > 4. Save Changes ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Flower-Shop-Woocommerce-Layouts-Pack-2.webp) ###### Step 2.2 : Remove All Woocommerce Pages to avoid duplication ? ###### Go to Dashboard > 1. Pages > 2. Remove All Woocommerce Pages [Shop,Cart,Checkout,My Account] ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Woo-Plugin-8.webp) ###### Step 2.3 : Make Shop Live ###### Go to 1. Dashboard > 2. WooCommerce > 3. Settings > 4. Site Visibility > 5. Click on Live > 6. Save Changes ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Woo-Plugin-10.webp) ## **Step 3** ###### Most Important Step - Installing other plugins ? ###### You must first install and activate "WooCommerce" Plugin in order to work other plugins. if you are forget to install "WooCommerce" Plugin then go through Step 2 The plugins that we used for Bricks Builder are optional and will give you some extra features for your shop. These are the plugins that we have used: 1. [FiboSearch – AJAX Search for WooCommerce](https://wordpress.org/plugins/ajax-search-for-woocommerce/) 2. [Advanced AJAX Product Filters for WooCommerce](https://wordpress.org/plugins/woocommerce-ajax-filters/) 3. [MC Woocommerce Wishlist](https://wordpress.org/plugins/smart-wishlist-for-more-convert/) 4. [Variation Swatches for WooCommerce](https://wordpress.org/plugins/woo-variation-swatches/) 5. [WPC Fly Cart for WooCommerce](https://wordpress.org/plugins/woo-fly-cart/) 6. [YITH WooCommerce Quick View](https://wordpress.org/plugins/yith-woocommerce-quick-view/) ###### Step 3.1 --> Install "FiboSearch - AJAX Search for WooCommerce" Plugin and activate Plugin Link : [https://wordpress.org/plugins/ajax-search-for-woocommerce/](https://wordpress.org/plugins/ajax-search-for-woocommerce/) ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Woo-Plugin-3.webp) ###### Step 3.2 --> Install "Advanced AJAX Product Filters" Plugin and activate Plugin Link : [https://wordpress.org/plugins/woocommerce-ajax-filters/](https://wordpress.org/plugins/woocommerce-ajax-filters/) ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Woo-Plugin-2.webp) ###### Step 3.3 --> Install "MC Woocommerce Wishlist" Plugin and activate Plugin Link : [https://wordpress.org/plugins/smart-wishlist-for-more-convert/](https://wordpress.org/plugins/smart-wishlist-for-more-convert/) ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Woo-Plugin-4.webp) ###### Step 3.4 --> Install "Variation Swatches for WooCommerce" Plugin and activate Plugin Link : [https://wordpress.org/plugins/woo-variation-swatches/](https://wordpress.org/plugins/woo-variation-swatches/) ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Woo-Plugin-5.webp) ###### Step 3.5 --> Install "YITH WooCommerce Quick View" Plugin and activate Plugin Link : [https://wordpress.org/plugins/yith-woocommerce-quick-view/](https://wordpress.org/plugins/yith-woocommerce-quick-view/) ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Woo-Plugin-6.webp) ###### Step 3.6 --> Kindly check whether all above plugins activated or not if any missing then go through above step to fix it. ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Woo-Plugin-7.webp) ## **Step 4** ###### How to Install XML File ? ###### Step 4.1 -> Go to Dashboard > Tools >Import -> WordPress -> Install Now ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Flooring-Services-Import-1.webp) ###### Step 4.2 -> After Install Click on "Run Importer" ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Flooring-Services-Import-2.webp) ###### Step 4.3 -> Set XML file to imports data ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Flooring-Services-Import-3.webp) ###### Step 4.4 -> Go to "Bricks Fashion Shop Template Pack" Folder and see "XML Files" Folder ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Bricks-woo-xml-folder.png) Once you open XML Files Folder you can see **"bricks-fashion-shop-template-pack.xml "** file for upload to wordpress tools options. folder and you can see below files ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Bricks-woo-xml-file.png) ###### Step 4.5 -> Now Select file "bricks-fashion-shop-template-pack.xml" [ Folder Path- Bricks Woo Layouts Pack - Bricks Fashion Shop Template Pack - XML Files ] and Click on Upload Button ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Woo-Plugin-16.webp) ###### Step 4.6 -> Click On "Submit" Button ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Woo-Plugin-17.webp) ###### Now XML Data is Imported. ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Woo-Plugin-18.webp) ###### You can see all pages ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/Woo-Plugin-19.webp) ###### Go to Settings -> Reading and set Home Page ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-7-1024x451.png) ###### Now import blog detail page sidebar widget data ## **Step 5** ###### Open "Bricks-Fashion-Shop-Template-Pack" Folder and see "Widget" Folder and open "Bricks-Fashion-Shop-Template-Pack-widgets.wie" file [ See Downloaded Product Folder Structure ] ###### Step 5.1 -> Go to Dashboard > Bricks > Sidebar > Add Sidebar Name -> Add Sidebar Description -> Click on Create New Sidebar Button ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/03/brick-Widget-Settings-1.png) ###### You Can See New Sidebar Here ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/03/brick-Widget-Settings-3.png) ###### Step 5.2 -> Go to Dashboard > Tools > Wordpress Importer & Expoter > Import -> Imports Widget -> Select Widget File or Copy code as mentions below image ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-8-1024x448.png) ###### Step 5.3 -> After Copy code or upload widget file Click on "Import Widgets" ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-9-1024x451.png) ###### Step 5.4-> If widget data install successfully then you will get below screen ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-10-1024x435.png) ## **Step 6** ###### Go to Bricks -> Settings and see Import Settings button ###### Step 6.1 -> Open "Bricks-Fashion-Shop-Template-Pack" Folder and see "Bricks-Settings" Folder and open "bricks-settings.json" file [ See Downloaded Product Folder Structure ] ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-11-1024x435.png) ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-12-1024x432.png) ###### Step 6.2 -> Go to Pages and Open Home Page with bricks ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-13-1024x452.png) ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-14-1024x474.png) ###### Step 6.3 -> Go to Theme Styles and click on ‘+’ Icon ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-15-1024x474.png) ###### Step 6.4 -> Now Click on Import Icon ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-15-1024x474.png) ###### Step 6.5 -> Open “Bricks-Fashion-Shop-Template-Pack” Folder and see “Theme Global” Folder and Select “bricks-theme-style-px_fs__theme__style.json” file [ See Downloaded Product Folder Structure ] ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-17-1024x474.png) ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-18-1024x474.png) ###### Step 6.6 -> Once file is imported then select that global style and save ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-19-1024x474.png) Now in theme style go to color tab ## **Step 7** ###### Step 7.1 ->Now in theme style go to color tab.Open primary color and see ‘+’ Icon see Number 4 ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-20-1024x474.png) ###### Step 7.2 -> Click on Import Icon ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-21-1024x474.png) ###### Step 7.3 -> Open “Bricks-Fashion-Shop-Template-Pack” Folder to see “Color Palette” Folder and Select “bricks-color-palette-px_fs__color__set.json” file [ See Downloaded Product Folder Structure ] ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2024/07/Bricks-Templates-Bricks-Templates-Pack-22-1024x474.png) ###### Now Save and close your website is ready. Add css class default & variable file from Css Class Folder ## **Step 8** ###### Step 8.1 ->Click on classes/variable button as mention below image ![](https://brickslibraryplus.com/wp-content/uploads/2025/02/brick-css-class-import-1.png) ###### Step 8.2 -> -> Now click on Classes tab and Click on Import Icon ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/brick-css-class-import-2.png) ###### Step 8.3 -> Open “Bricks-Fashion-Shop-Template-Pack” Folder and see “Css Class” Folder and Select “bricks-css-classes.json” file [ See Downloaded Product Folder Structure ] ![](https://brickslibraryplus.com/wp-content/uploads/2025/02/brick-css-class-import-3.png) ###### Now Save. ###### Step 8.4 ->Now click on variable tab and Click on Import Icon ![](https://brickslibraryplus.com/wp-content/uploads/2025/02/brick-css-class-import-4.png) ###### Step 8.5 -> Open “Bricks-Fashion-Shop-Template-Pack” Folder to see “Css Class” Folder and Select “bricks-css-variables.json” file [ See Downloaded Product Folder Structure ] ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/brick-css-class-import-5.png) ###### Now click on Save to imports variables classes . Now you need to setup all plugin settings. ## **Step 9** ###### Step 9.1 -> Go to MC Wishlist -> Global -> Functions -> Import & Export ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-25.png) ###### Step 9.2 -> Select and Upload "MC Wishlist.json" File [ Folder Path- Plugin Base Woo Layouts Pack - Breakdance Minimal Shop Layouts Pack ] ![Bricks Template](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-27.png) ###### Step 9.3 -> Open “Bricks-Fashion-Shop-Template-Pack” Folder and see “Css Class” Folder and Select “bricks-css-classes.json” file [ See Downloaded Product Folder Structure ] ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-26.png) ###### After select file click on "import" button.once data is imported please click on "Save Settings Button ###### Purpose of used "MC Woocommerce Wishlist" Plugin ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-52.png) ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-53.png) ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-54.png) Now Need to set Product Sidebar Filter for this you need to fix "Advanced AJAX Product Filters" Plugin settings . ## **Step 10** ###### Step 10.1 -> Go to BeRocket -> Filters Here Filters is already imported but that widget data is missing so we need to edit and do some settings. ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-31.png) ###### Step 10.2 -> See "Clear Filters" and click on "Edit" Link ![Bricks Template](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-32.png) ###### Step 10.3 -> After click on edit please do settings as per below image ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-33.png) ###### Step 10.4 -> See "Product Tags" and click on "Edit" Link.After click on edit please do settings as per below image ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-34.png) ###### Step 10.5 -> See "Filter By Size" and click on "Edit" Link.After click on edit please do settings as per below image ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-35.png) ###### Step 10.6 -> See "Filter By Color" and click on "Edit" Link.After click on edit please do settings as per below image ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-36.png) ###### Step 10.7 -> See "Filter By Brands" and click on "Edit" Link.After click on edit please do settings as per below image ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-37.png) ###### Step 10.8 -> See "Filter By Rating" and click on "Edit" Link.After click on edit please do settings as per below image ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-38.png) ###### Step 10.9 -> See "Filter By Price" and click on "Edit" Link.After click on edit please do settings as per below image ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-39.png) ###### Step 10.10 -> See "Filter By Category" and click on "Edit" Link.After click on edit please do settings as per below image ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-40.png) Go to BeRocket -> Groups ###### Step 10.11 -> Click on Edit Link ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-41.png) ###### Step 10.12 -> Now check dropdown and add all filters which we created ![Bricks Template](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-42.png) ###### Step 10.13 -> You can see we have added all filters ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-43.png) ###### Step 10.14 -> Now on shop page filter is displayed ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-44.png) Now you need to setup Fibo Search plugin settings. ## **Step 11** ###### Step 11.1 -> After installing and activating the plugin you should get redirected to this. Just click on skip ![](https://brickslibraryplus.com/wp-content/uploads/2025/02/woocommerce-fibo-search-image-6.jpg) ###### Step 11.2 -> Go to WooCommerce >> FiboSearch and set your preferences. ![Bricks Template](https://brickslibraryplus.com/wp-content/uploads/2025/02/fibo-ajax-search.png) ###### Step 11.3 -> Purpose of used "FiboSearch - AJAX Search for WooCommerce" Plugin ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-45.png) ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-46.png) ###### After Select settings please click on "Save changes" Settings Button Now you need to setup Variation Swatches for WooCommerce plugin settings. ## **Step 12** With this plugin, your users create Beautiful Color, Image and Buttons Variation Swatches For WooCommerce Product Attributes. ###### Step 12.1 -> Configure General Settings ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-47.png) ###### You can see attributes on your product page. ![Bricks Template](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-48.png) ###### Step 12.3 -> You can edit attributes here ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-49.png) Now you need to setup Variation Swatches for WooCommerce plugin settings. ## **Step 13** With this plugin, your users can see small details of products without redirect to other page ###### Step 13.1 -> Configure General Settings ![](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-50.png) ###### That’s It… ![Bricks Template](https://pixelslibraryplus.com/wp-content/uploads/2024/10/Woo-Plugin-51.png)