1. Meet Frontend Builder Woo Commerce extension

This documentation will help you install and use the extension together with detailed info on shortcodes included. Please read the whole document so you can avoid problems using the plugin.

1.1 Features

This is an extension for Frontend Builder plugin that provides woo commerce shortcodes along with awesome new product grid and slider shortcodes. These awesome features will give your shop page a new, refreshed look and all that using simple drag and drop items.

1.2 Plugin Extension Authors

This extension was developed by Urban Graphic development team.

1.3 Plugin Requirements

This is NOT a stand alone version of the plugin. It requires Frontend Builder and Woo Commerce in order to work.

2. Extension Installation

This section will instruct you on how to install the extension.

2.1 Installation

Once you have met all the requirements you can proceed with the installation. We assume that you have Wordpress installed on your server.

2.1.1 Wordpress Template Activation - (if you have a template installed or running, you can skip this step).

Go to Appearance > Themes and Activate the template you want to use.


2.1.2 Woo Commerce Installation

Go to Plugins > Add New and click Upload on the top of the page.


Select Browse and find the installation file for Woo Commerce that you have downloaded from their website and click Install Now


2.1.3 Frontend Builder Installation

Go to Plugins > Add New and click Upload on the top of the page.


Select Browse and find the installation file for Frontend Page Builder that you have purchased form Codecanyon and click Install Now


2.1.4 WooCommerce Extensions for Frontend Page Builder

Repeat the steps as in previouss plugin installations and choose the istallation for WooCommerce Extension.

2.2 Installing via FTP


If you had problems installing via Wordpress interface please follow the steps below to install via FTP

  • Unzip frontend builder woo commerce extension zip file to a desired location on your HDD. These extracted files will be uploaded later via FTP
  • Connect to your server via FTP
  • Navigate to /wp-content/plugins/ on your server
  • Navigate to location of unzipped frontend builder woo commerce extension on your HDD.
  • Upload local folder /frontend_builder_commerce/ to remote /wp-content/plugins/

3. User Interface Guide

This section will instruct you on how to use the extension.

3.1 Activating the plugins

Once you have all the neccesary plugins installed, you need to activate them.

Go to Plugins > Installed plugins and click Activate under all of the plugins that you have installed in the previous section.



3.2 Creating a page using Frontend Page Builder and WooCommerce Extension

Once everything is installed and activated you can start with te actual content building usin the plugins and add-ons that you have installed..

  • Go to Pages and select Add New
  • Enter some Page Title
  • Click to Publish the page
  • Click Frontend Builder tab to activate the Frontend Page Builder for that page.
  • Click Edit Page to start editing the page ih the frontend.



When you have created the page and selected Edit Page you will be taken to the Frontend Part for that page and you can start adding the content.
In this tutorial we are goting to explain how to create the same page as in the demo of the WooCommerce Extension.

  • Click Add New Row to add a new row on your page
  • Click the Two Halves button to add a specific row
  • Click the Edit Row button and you will see the right sidebar appear with options for that row
  • Set the Top Padding to 300px and Bottom Padding to 200px to create some space from the top menu.
  • Select the Add an Image to the background(recommended size of the background is 1920X1080)
    Demo Image: http://fbuilder-woo.mycity-web.com/wp-content/uploads/2014/06/011.jpg



Lets start adding the content to the page. We will start widht the headline text as seen in the demo website.

  • Drag & Drop the Heading element form the left sidebar to the Column on the page.
  • The Right Sidebar will appear with the options for that element.
  • Change the text for the heading element by typing your own.
  • Set the < h > tag foth the element, we have selected < h2 >, and change the color to #ffffff



We will add the text under the main title next.

  • Drag & Dropthe Text/HTML element from the left sidebar to the Column on the page.
  • The Right Sidebar will appear with the options for that element.
  • Change the text for the Text/HTML element by typing your own.
  • Select Use Custom Font Size and type in 20px for the Size and 30px for the Line Height



Now we will add the image to the right column as in the demo.



Creating the parallax magic

  • Click Edit Button for the row and the Right Sidebar will appear with the options for that row.
  • Click the Type dropdown to select the type of background and selectParallax
  • Try scrolling the page and see the magic :)



Lets start adding WooCommerce elements to the page

  • Add a New Row and check Full Width Row from the Right Sidebar
  • Click top left icon to Change the Shortcode Group to WooCommerce Extension group



We will add the grid layout first

  • Once you swithced to WooCommerce Extension shortcode group select the Product Grid element from the left sidebar and drag it to the Full width row
  • The Right Sidebar will appear with the options for that element.
  • Select your Product Category, change the Number of Items that you want to display or change the Order of the items.
  • Voila, you have the product grid on your page.



Now we will insert product slider

  • Select the Product Slider element form the left sidebar and drag it ot the New Row
  • The Right Sidebar will appear with options for that element.
  • Select the Number of Visible Items, Total Number of Items, select where you want to get your products from: Category, Sales, Featured, select the Order of the items, choose the image format of the items: Squared, Portrait, Landscape, choose the minimum Responsive Width of the item, set the item Alignment, set the Space Between the Items, chose category, price and title color, you can choose if you want to Display the Category of the items.
  • Done! Now drag your slider left or right, select quick view or add to cart.



Adding the products in a standard grid

  • Select the Products element form the left sidebar and drag it to the New Row.
  • The Right Sidebar will appear with options for that element.
  • Select the number of Items, number of columns, select where you want to get your products from: Category, Sales, Featured, select the Order, of the items, choose the image format of the items: Squared, Portrait, Landscape, set the item Alignment, price and title color
  • Done! Now check your products.

Note : The styling options of this element are taken directly from the template that you have installed. If the template does not have the design form products, then the default is taken.

4. Extension Update

Provided information in this section covers the Frontend Builder Woo Commerce Extension update.

4.1 Updating Extension

Updating Frontend Builder Woo Commerce Extension

  • Navigate Plugins>Installed Plugins
  • Deactivate Frontend Builder Woo Commerce Ext
  • Delete Frontend Builder Woo Commerce Ext
  • Click Add New and choose Upload
  • Upload the latest frontend_builder_woo_commerce_ext.zip
  • Activate the updated Frontend Builder Woo Commerce Ext

5. New Shortcodes

This section will guide you through the shortcodes offered by this package.

5.1 Products Shortcode

Products shortcode is a simple solution to insert products on your web page. This shortcode can filter items by category, sales, featured and many more, while providing multiple controls to adjust the design to your needs. It offers landscape, square and portrait variants for image formats, multiple columns and other features.

All these elements of the design and functionality provide endless possibilities that will make your shop-building a breeze, while providing a great, modern design to your website.


Note : As with other Frontend Builder shortcodes, you can adjust the fonts from the backend panel or leave them default, in which case the theme fonts are taken.

5.2 Product Slider Shortcode

Product Slider Shortcode gives a modern solution to present products on shop pages. It can display featured products, products on sale or products from any category. You can choose how many items you want to be displayed at a time and how many items from a chosen filter you want to display.

The slider is fully responsive and degradates number of slides visible with resolution change. All you have to do is specify the minimum item width (in pixels) and the slider will do the rest for you. It will reduce number of slides if needed and ensure your products display perfectly on all screens.


Note : As with other Frontend Builder shortcodes, you can adjust the fonts from the backend panel or leave them default, in which case the theme fonts are taken.

5.3 Product Grid Shortcode

Product Grid shortcode gives an awesome masonry design for your products display. You can select products by featured tag, sales or category.

This shortcode is also fully responsive and recalculates positions for the products to provide the best possible page cover on all screens.

5.4 Product Categories Shortcode

Product Categories shortcode provides an easy and efficient way to insert your product categories to the web page. Its options allow you to present as many categories as you like, order them or pick specific categories.


Note : As with other Frontend Builder shortcodes, you can adjust the fonts from the backend panel or leave them default, in which case the theme fonts are taken.

6. Additional Information and Support

This section covers plugin help, support contact, credits and copyrights.

6.1 Plugin Support

6.2 Frontend Builder Woo Commerce Extension Support

For support on the Frontend Builder Woo Commerce Extension please email us at urbangraphicsdev@gmail.com.

6.3 Credits and Copyrights

Frontend Builder Woo Commerce Extension - Urban Graphic Dev (c) 2014.
Frontend Builder - Shindiristudio(Br0) (c) 2014.
Woo Commerce - WooThemes (c) 2014.