Installing your Theme ↑ Back to top
To learn how to install your theme please reference our documentation here: Installing a Theme
Checking your theme version ↑ Back to top
You can confirm your theme and WooFramework version by going to: Hub > Framework
Activate your Theme Key ↑ Back to top
After you install your theme, be sure to activate your theme key by downloading and installing the WooCommerce Helper plugin. This verifies your site when contacting support and enables 2-click updates for quick theme upgrades down the road.
Updating your theme
It is important to ensure you have the latest version of your theme at all times. This is the best way to proactively troubleshoot issues on your site.
Adding your Logo ↑ Back to top
You have two options when adding a logo to your site. You can either use a text based Site Title and optional Tagline or you can use an image based logo.
To enable the text based Site Title and Tagline:
- Go to: Settings > General to enter your site title and tagline.
- Go to: Hub > Settings > General Settings > Quick Start and check the box to enable the text based site title and tagline.
- Optionally Enable the site description and adjust the typography settings.
- Save All Changes.
To upload your own image based logo:
- Go to: Hub > Settings > General Settings > Quick Start > Custom Logo.
- Upload your logo image – we recommend using either a .jpg or .png for this.
- Save All Changes.
Configure the homepage ↑ Back to top
Homepage setup ↑ Back to top
As of Hub version 1.2.0+ in order to customize the display order of the homepage components, you must first download and install the Homepage Control plugin.
With the Homepage Control plugin you can enable / disable the different content components:
- Introductory Message
- Popular Posts
- Testimonials (requires Testimonials plugin)
- Recent Posts
- Our Team (requires Our Team plugin)
Each of these components can then be configured further:
Intro section ↑ Back to top
To configure the introductory message on the homepage go to: Hub > Settings > Homepage > Introductory Message. Here you can add the heading, the message, the button label and the button destination.
Popular Posts ↑ Back to top
Popular posts are defined by the number of comments a post has.
Go to: Hub > Settings > Homepage > Popular Posts to configure the section title, byline, period of time and number of posts.
The period of time specifies how far to look into the past for popular posts.
Testimonials ↑ Back to top
To learn how to setup Testimonials please see the documentation here: Testimonials Documentation
To configure the Homepage Testimonials settings go to: Hub > Settings > Homepage > Testimonials. Here you can specify a title, byline, optional background image and number of testimonials to display. The number you set to display will display the ‘x’ most recently published testimonials.
Recent Posts ↑ Back to top
To configure the Homepage Recent Posts settings go to: Hub > Settings > Homepage > Recent Posts. Here you can specify a title, byline and the number of posts to display. Posts will display ‘x’ most recently published posts.
Our Team ↑ Back to top
To learn how to setup Our Team plugin please see the documentation here: Our Team Documentation
To configure the Homepage Our Team settings go to: Hub > Settings > Homepage > Our Team. Here you can specify a title, byline and the number of team members to display.
WooCommerce Theme Options ↑ Back to top
After installing, to configure the WooCommerce Theme Options go to: Hub > Settings > WooCommerce to configure the following options:
- Upload a Custom Placeholder to be displayed when there is no product image.
- Header Cart Link to be displayed in the main navigation.
- Shop Archive Full Width – Specify whether to display product archives full width
- Product Details Full Width – Specify whether to display all product details pages full width, removing the sidebar.
Business Page Template ↑ Back to top
Hub comes with a useful Business Page Template to help display additional content on your site, including support for the WooSlider Features and Testimonials plugins. You must purchase the WooSlider plugin separately in order to use it on the Business Page Template.
Go to: Hub > Settings > Layout > Business Template to select the business page modules you would like to display.
To set the business page template:
- Go to: Pages > Add New.
- Add a title and the page content.
- Go to: Page Attributes > Template just below the publish module to select the Business page template.
- Publish the page.
Setting the Business Page Template as the Homepage ↑ Back to top
To set the Business Page Template as your Homepage go to: Settings > Reading > Front Page Displays and select the Static Page > Front Page as your newly created Business Page (instead of the recent posts setting).
To learn more about how Templates please see our video tutorial here: Page Templates
Including WooSlider in the Business Page Template ↑ Back to top
The Business Page Template slider uses the WooSlider – Attached Images slideshow type. After you have purchased, downloaded, installed and activated the WooSlider to include the slider on your business page template:
- Go to: Hub > Settings > Layout > Business Template to select Display WooSlider.
- Next, go to: Pages > Edit to add images to your newly created business page.
- Select Add Media.
- Upload as many images as you’d like. Each image will create 1 new slide.
- Close (X) the Media Uploader pop-up window.
- Finally, save changes by selecting Update.
Image Dimensions ↑ Back to top
Here are the ideal image dimension to use for Hub. Larger images will be dynamically resized to fit, while smaller images will be stretched larger to fit. Product images will scale width and height and will not be cropped into a square (unless you use the ‘Hard Crop’ setting found in WooCommerce > Settings > Product > Product Image Options). For greatest control of your image sizes, it is best to save out your images to the exact size before uploading.
Recommended Image Sizes ↑ Back to top
- Featured blog image suggested minimum width: 825px
- Testimonials Homepage Background image suggested minimum width: 1600px
- Our Team featured image suggested minimum width: 355px
- WooSlider Business Slider suggested minimum width: 1200px – height will scale to fit
Featured Blog Images ↑ Back to top
To set the Featured Blog Image size for Thumbnails and the Single Post image go to: Hub > Settings > Dynamic Images > Thumbnail Settings.
If you would like to have your featured blog images the same as the Hub demo go to: Hub > Settings > Dynamic Images > Thumbnail Settings to enter the following Thumbnail Settings:
- Thumbnail Image Dimensions: 825px x 350px
- Single Post – Thumbnail Dimensions: 825px x 350px
To learn more about Featured Images please see our tutorial here: Featured Images
WooCommerce Product Images ↑ Back to top
To adjust the Shop Image settings go to WooCommerce > Settings > Product > Product Image Options; scroll to the bottom of the page to find image size settings. If you change these settings after you’ve uploaded images, you must Regenerate Thumbnails for the changes to take effect.
Here are the WooCommerce image size settings from the demo:
- Catalog Images: 388px x 388px
- Single Product Images: 365px x 365px
- Product Thumbnails: 112px x 112px
Subscribe & Connect
The Subscribe & Connect functionality for the Hub theme can be used on single post pages, with the Subscribe & Connect widget, as well as a special Subscribe & Connect area above the footer region.
To add social media icons to your single posts page go to: Hub > Settings > Subscribe & Connect > Setup and select Enable Subscribe & Connect – Single Post.
To setup Subscribe & Connect go to:
- Subscribe & Connect > Connect Settings to link the icons to each social media page.
- Subscribe & Connect > Setup to enable the related posts in the Subscribe & Connect box (example below).
- Subscribe & Connect > Subscribe Settings to setup the email subscription form.
- Hub > Theme Options > General Settings > Subscription Settings to enter your preferred RSS feed URL.
Contact Page ↑ Back to top
To setup a Contact Page:
- Go to: Pages > Add New
- Title your Contact Page
- Go to: Page Attributes > Template just below the publish module to select the Contact page template.
- Publish your page.
- Go to: Hub > Settings > Contact Page to enter the Contact Form Email address.
- From here you can also enable the information panel (see below), and enable the Subscribe & Connect panel to display your social icons.
- Be sure to Save All Changes when finished.
To learn more about how Page Templates work please see our video tutorial here: Page Templates
Contact Page Maps ↑ Back to top
To setup Google Maps:
- Enter your Google Maps coordinates. Example: -33.924868,18.424055 – To find the Google Cordinates, search for your location on a Google Map, right click the pin and select “What’s Here”. This will input the Google Coordinates in the search box.
- Optionally disable mousescroll for all the Google Maps on the site. This could improve usability on your site.
- Set the map height.
- Set the Default Zoom Level.
- Select the Map Type: Normal, Satellite, Hybrid or Terrain.
- Enter Map Callout text to be shown when you click on the map marker for your location.
Custom Hub Widgets ↑ Back to top
Hub includes 5 custom widgets in addition to the Woo – Component widget mentioned above. Here are the other 5 custom widgets:
- Woo – Adspace
- Woo – Blog Author Info
- Woo – Embed/Video
- Woo – Flickr
- Woo – Subscribe/Connect
To learn more about how to add Widgets please see our tutorial here: How to Add Widgets