WooCommerce

Installing Builder Addons

Note: Builder Addons require the Themify Builder. You can use it with either any Themify theme or the Builder plugin.

Installing Builder Addons is exactly the same as installing WordPress plugins.

To install the addon:

  • Firstly, download the addon zip file from the link provided in your Themify Member Area.
    • NOTE: some browsers (eg. Safari) auto extract zip files automatically. Right-click on the download link and select "Save Linked File As" and it will allow you to download as a zip file.
  • Login to your site's admin area.
  • Navigate to WP Admin > Plugins > Add New.
  • Now, click the "Upload Plugin" link.
  • Select "Browse" and navigate to the plugin zip file which you downloaded in the first step and then select the "Install Now" button.
  • This will initiate the plugin installation process, and once finished, you can then activate the plugin.

screenshot

Importing the addon demo layout

Each addon zip file contains a sample Builder data file which you can import to your site. It helps you to understand how the addon demo is created.

To import the addon demo data:

  • First, extract addon zip file to your local computer
  • You should have a folder of the addon. Inside there is a folder named "sample", and inside that folder there is a Builder data file in a zip format (eg. "addon_name_sample-builder-layout.zip").
  • To import the Builder layout, login to admin and then go to the page frontend where you want to import the Builder layout. From the top admin bar > select Themify Builder > Import / Export > Import, upload the sample zip file.

Using the WooCommerce Addon

Note: You need to have the WooCommerce Plugin installed on your site and products added in the products section. You can set the type and category for each of your products here.

Once addon is installed, you will find the WooCommerce addon module in the Themify module panel. The module is available in both backend and frontend edit mode (just like all standard modules).

  • In the backend: you can find the WooCommerce module in the Themify Custom Panel.
  • On the frontend: you can see the modules after turning on the Builder from top admin bar > Themify Builder > Turn On Builder.

screenshot

  • Drag and drop a WooCommerce module in a row
  • WooCommerce Options
      • 1) Module Title = Insert the module title that will appear at the top of the module. It will appear aligned to the left, upper-case, in H3 format.
      • 2) Type = Choose which type of product you would like to showcase.
      • 3) Category = Choose which category you would like to showcase.
      • 4) Hide Free Products = You can choose whether to hide free products offered or not. If you don't have any free products diregards this.
      • 5) Limit = Input the number of posts you would like to show.
      • 6) Offset = Input the number of post to displace or pass over. The main purpose of this is to avoid showing the same products on multiple rows.
      • 7) Order By = Choose the order of your products, either by date, price, sales, ID, title, or random. The title will arrange it based on the alphebetical order.
      • 8) Order = Choose either ascending or descending. Descending will show newer posts first.
      • 9) Display as = Choose to show your products using a slider or list view.WooCommerce
          • 10) Slider Layout = Choose 4 different layouts on how you want your products to appear
            • 11) Slider Options:
              • Visible = Input how many products you want to appear at the same time.
              • Auto Scroll = Input the amount of seconds you want the slider to auto scroll your products, or choose off if you don't want to auto scroll
              • Scroll = Choose the amount of time it will scroll at a time.
              • Speed = Choose how fast you would like slider to scroll.
              • Effect = Choose the effect you would like the slider to slide the products. Choose from continuously sliding, fade, or regular slide.
              • Pause On Hover = Choose how you want the slider to react when the cursor hovers over an image.
              • Wrap = Choose whether you want the slider to continuously loop or stop at the last product posted.
              • Show slider pagination = Choose to show the indicator of how many images are in the slider
              • Show slider arrow buttons = This will allow you to choose whether you want your users to use the slider to change to the next product using a slider arrow that will appear on the left and right corner of the image.
              • Left & Right margin space between slides = Choose the left and right margin you would like to place on each image. Note: The arrow will not follow the image but will remain in the slider container.

        WooCommerce

        • 12) List Layout = Choose from 6 different layouts on how you want your products to appear

    WooCommerce

    • 13) Product Description = Choose how you want the description of your products to appear.
    • 14) Hide Product Image = Choose to either hide or show your product image.
    • 15) Image Width & Height = Choose the px size of the height and width of your image.
    • 16) Unlink Product Image = This allows your product images, when clicked, will automatically redirect users to the product page.
    • 17) Hide Product Title = Choose to show are hide product title. By default the product title appears at the top of the rating in all caps.
      • Unlink Product Title = Choose to link or unlink the product title. This allows the product title when clicked to redirect user to product page.
    • 18) Choose what appears with your product title and image
      • Hide Price = Choose to either hide or show the prices for your products.
      • Hide Add To Cart Button = This is the button that appears at the bottom of the price. Choose to show or hide the "Add To Cart" button.
      • Hide Rating = The rating are the stars that are shown at the bottom of the title of the product. Choose to show or hide the rating of the product.
      • Hide Sales Badge = Choose to show or hide the sales badge. The sales badge only appears if you've set the product on sale at the product section on the admin panel. The sales badge placement varies and depends on the layout chosen. It will only appear either on the left or right top corner of the image.

WooCommerce

Using the Product Categories Addon

Note: You can select only one category if you have subcategories for it. If it doesn't have any subcategories, do not select one category as it won't show anything.

  • 1) Module Title = Insert the module title that will appear at the top of the module. It will appear aligned to the left, upper-case, in H3 format.
  • 2) Layout = Choose 4 layouts that your categories will appear on your site.
  • 3) Categories = Choose "All Categories". Choosing one category will only work if you have subcategories for that particular category.
  • 4) Order By = Choose the order of your products, either by date, price, sales, ID, title, or random. The title will arrange it based on the alphebetical order.
  • 5) Order = Choose either ascending or descending. Descending will show newer posts first.
  • 6) Hide Empty Category = Choose if you would like to hide the category or not.
  • 7) Show Product Count = Choose if you would like to show or hide the amount of products you have in stock.
  • 8) Latest Products = Show how many products you would like to appear at the bottom of each category display.

screenshot

Styling WooCommerce

    • 1) Click the Styling tab to start customizing the WooCommerce module. Anything customization done in the styling panel will affect the entire module.
    • 2) Effects = Choose an animation that'll show how the module will appear
    • 3) Background Color = Use the colour picker to pick a color for your background.
    • 4) Font Family = Choose a font family that will change the font of all the text for the entire module.
    • 5) Font Color = Choose font color that will change the color of all the text for the entire module.
    • 6) Font Size = Choose font size that will change the size of all the text for the entire module.
    • 7) Line Height = Choose the spacing gap for each row.
    • 8) Text Align = Choose how you want to align your text.

WooCommerce

    • 9) Color = Use the color picker to choose a link color that will appear on any text where you've applied a link too.
    • 10) Text Decoration = Choose underline, overline, line through, or none
    • 11) Padding = Choose the space within the module.
    • 12) Margin = Choose the space outside the module

WooCommerce

  • 13) Border = Choose the colour, size, and style for each side of the border
  • 14) Additional CSS Class = Add additional CSS class for custom styling

WooCommerce

 

Celebrating our LUCKY7 Anniversary with a 50% Sale + 7 Lifetime Club Giveaway! Submit entry here