ÜberShop WordPress Theme

DOCUMENTATION

Thank you for purchasing ÜberShop WordPress Theme. Before you start setting up your Website, please read through documentation and if you have any questions please feel free to contact our support team.

www.pukkathemes.com

  1. 1. Getting Started - Installation
    1. 1.1 WordPress Installation
    2. 1.2 Installing the Theme
    3. 1.3 Installing Plugins
    4. 1.4 Activation and Content Importer
  2. 2. Setting Up Your Site - Theme Options
    1. 2.1 Theme Options
    2. 2.2 General Settings
    3. 2.3 Shop
    4. 2.4 Sidebars and Menus
    5. 2.5 Social
    6. 2.6 Style
    7. 2.7 Typography
    8. 2.8 Forms
    9. 2.9 Widget Areas
    10. 2.10 Content Importer
  3. 3. Building Your Site
    1. 3.1 Menu
    2. 3.2 Page Builder
    3. 3.3 Widgets
    4. 3.4 Revolution Slider
    5. 3.5 Page Builder
    6. 3.6 Pages
    7. 3.7 Posts
  4. 4. Updating
    1. 4.1 Updating
    2. 4.2 Child Theme
  5. 5. FAQ
    1. 5.1 Blurry Images
    2. 5.2 Outdated copies of WooCommerce template files
    3. 5.3 Changing cart icon
    4. 5.4 Gallery loading endlessly

1. Getting Started - Installation

1.1 WordPress Installation

Make sure you’ve got the current version of WordPress . In order to download the current version, please visit wordpress.org.

Please check http://codex.wordpress.org/Installing_WordPress for information on how to install WordPress on your server.

 

1.2 Installing the Theme

Once WordPress is successfully installed, you can install the theme in two ways: via FTP, or through WordPress.

Via FTP

Un-zip the theme main file and upload the folder via a FTP program to the /wp-content/themes/ folder on your server.

Through WordPress

Use WordPress Theme Installer. Go to Appearance > Themes > Install Themes > Upload, and select the zipped theme file.

1.3 Installing Pluggins

ÜberShop is WooCommerce theme, so you will need to install the WooCommerce Plugin to your Wordpress installation.

After Theme Installation you'll see the list of all bundled plugins: WooCommerce (mandatory) and optional but reccomended: Ninja Forms (Newsletter), Pukka Custom Posts (Testimonails), Envato Wordpress Toolkit (Update your Theme through WP), Slider Revolution Responsive WordPress Plugin (Slider).

After installation, please activate all plugins.

1.4 Activation and Content Importer

Once the theme is installed, you’ll just have to activate it in Appearance > Themes > Manage Themes.

Before you can get started with your ÜberShop theme and have it look as the demo, you first need to add content to WordPress. If you prefer to preload our demo content into your theme to start with, go to Appearance > Theme Settings > Content Importer.

2. Setting Up Your Site - Theme Options

2.1 Theme Options

The ÜberShop WordPress Theme comes with an easy Theme Settings Manager (Appearance > Theme settings) divided into nine tabs:

GENERAL SETTINGS
SHOPS
SIDEBARS AND MENUS
SOCIAL
STYLE
TYPOGRAPHY
FORMS
WIDGET AREAS
CONTENT IMPORTER

Each field is accompanied by a short help text. If you have any issues contact our support team.

2.2 General Settings

Use General Settings Tab (Appearance> Theme settings > General settings) to set up basic settings of the theme (logo, analytics code,
favicon and etc)

Logo

Upload your logo. Ideal/maximum width should be 200px.

Retina logo

Upload your double-sized logo for retina displays. Ideal/maximum width should be 400px.

Plain text logo

Insert text which will be displayed if image logo is missing. Default is Site Title.

Plain text logo color

Color of the text logo which is displayed if image logo is missing.

Logo for Mobile Menu

Logo image for Mobile Menu. Maximum/Ideal height is 36px.

Favicon

Upload your favicon image. Image pixel dimension must be in square aspect ratio (meaning height must be equal to the width). Acceptable dimensions: mimumum 32x32px, maximum 64x64px (.PNG)

Analytics code

Paste your tracking code here. (Google Analytics, AWStats, Piwick, Statcounter, ...).

Single author site

Select this feauture in order to hide author’scname from specific pages and post categories.

Number of posts per row

Number of posts per row for category, tags, search and date archives.

Sidebar width

Here you can select width of your sidebar.

Enable Secondary Menu

Select this feature in order to enable secondary menu.

Secondary Menu Text

If you want to use additional text for secondary menu you can enter it here. It will be displayed just above logo (top menu)

Enable Footer Menu

Select this option if you want to use footer menu

Footer Menu Text

If you want to use additional text for footer menu you can enter it here

Use Page Builder in posts

Select this feature in order to enable using page builder in posts.

Crop post images

Select Crop button if you want to crop post images. You can also choose default height in pixels

Default page width

Choose do you want your website to dispaly boxed images or full width

 

2.3 Shop

Use Shop Tab (Appearance> Theme settings > Shop) in order to enable/disable social media buttons for Products

2.4 Sidebars and Menus

Use This Tab in order to select Menu position (left, top) and enable/disable Left and Right Sidebar. You can also choose width for Left and Right Sidebar

2.5 Social

Use Social Tab (Appearance > Theme settings > Social) to set up social buttons and links.

Insert your facebook App ID. This means you now need to create a facebook app to perform integration. Don’t worry, creating an app is easy, you don’t need to be a developer to create an app here. Visit https://developers.facebook.com/apps/ and click create new app. If you are using some other social plugin, then you should Disable Facebook Open Graph Tags.

You can also Add Links to Your Social Media Networks. First select where do you want to show this icons (Top Menu, Footer Menu) and then simply enter your social profile Url in the link input field. for example, enter ‘http://www.facebook.com/pukkathemes’ for the Facebook fan Page link.

2.6 Style

Use This Tab in order to chose Color Scheme, Link Color, Button Color or to add Custom CSS or Custom JS.

2.7 Typography

Use This Tab to change Title Font, Text Font, H1 Font, H2 Font, H3 Font, H4 Font, H5 Font, H6 Font. You can also change sizes, weight, font effect and color for each font.

You can even enable Cyrilic Character Set or to add Custom Fonts from Typography Tab.

2.8 Forms

Use Forms Tab (Appearance > Theme settings> Forms) to set up email, thank you page and error notification. All emails from custom forms (Page Builder) will be sent to this address.

2.9 Widget Areas

Use Widget Areas Tab (Appearance > Theme settings> Widget Areas) to add your widget area.

2.10 Content Importer

This is importer for theme demo content. Please only use it on fresh WordPress installs with empty database. Otherwise, results might be somewhat unexpected.

3. Building Your Site

3.1 Menu

In order to choose Menu Location (Top or Left) you should go to Appearance> Theme settings > Sidebars and Menus.

To enable Secondary and Footer Menu go to Appearance> Theme settings > General Settings. Here you can also add custom text for Secondary and Footer Menu

After that you can easily add new items to Menu (Primary, Secondary and Footer) via Appearance> Menu.


 

3.2 Page Builder

You can easily create custom Page by using Page builder (Dynamic Meta Box). You can add Text Box, Accordion, Image, Tabs, Contact Form, Map, Divider, Call To Action, Widget Area.

There are plenty possibilites for further customization (editor, colors, HTML ...) and you can drag and drop elements to arrange them as you wish.


 

 

PAGE BUILDER - TEXT BOX - EXAMPLE



 

 

PAGE BUILDER - TABS - EXAMPLE



 

 

PAGE BUILDER - ACCORDION AND PICTURE - EXAMPLE



 

 

PAGE BUILDER - CALL TO ACTION - EXAMPLE



 

 

PAGE BUILDER - MAPS - EXAMPLE



 

 

PAGE BUILDER - CONTACT FORM - EXAMPLE



 

 

PAGE BUILDER - WIDGETS - EXAMPLE



 

 

3.3 Widgets

To rearrange Widgets within the sidebar or Widget area go to (Appearance > Widgets), drag it into place. We've developed special Widgets: Pukka Ads Widget 8x50, Pukka Facebook Widget, Pukka Banner Widget, Pukka Ad Widget, Pukka Featured Post Widget, Puka Font Awesome Widget, Pukka Image Widget, Pukka Latest posts widget, Pukka Product List and Pukka Testimonial Widget. There are also standard WooCommerce Widgets which will together with Pukka's Widget give you plenty of possibilities to customize your Website.

You also have possilibity to add new Widget area from Appearance / Theme Settings / Widgets


 

3.4 Revolution Slider

We are giving Slider Revolution Responsive Plugin with our Theme free of charge. Please use official documentation, which you can find via this link http://themepunch.com/codecanyon/revolution_wp/documentation/#!/documenter_cover

 

3.5 WooCommerce

If you have installed WooCommerce Plugin, then you'll just need to visit WooCommerce > Settings to configure your shop. Browse through the tabs below to get more information on the WooCommerce Options.

Adding a simple product is a straight forward process and not too dissimilar from authoring a standard WordPress post. In the Products menu click Add Product; you will be presented with a familiar interface, and should immediately see where to type the product title and full description.

Next is the Product Data tab set. This is where the majority of the product data is input.

For more details, please follow the official docs

 

3.6 Pages

You can customize every Page differently. You have 'Page Options' (right column), so you can set up page width (full, boxed, default), overwrite default sidebars, enable social buttons, hide page title and etc


 

3.7 Posts

You have different Post Formats to choose: Standard, Video, Audio, Link, Quotes, Gallery


 

If you choose Video or Audio Post format then you can just paste link in "Media URL". If you choose Linke Post Format, then you'll have to paste link in "Link"


 

 

 

3.8 Advanced Customization

Child Themes

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child theme allows you to modify,
or add to the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.

Learn more here
http://codex.wordpress.org/Child_Themes

Pluggable Function

Pluggable functions were introduced in WordPress 1.5.1 These functions let you override certain core functions via plugins. The most
up-to-date list of core functions that WordPress allows plugins to override is available at wp-includes/pluggable.php. WordPress loads the built-in functions only if they are undefined after all plugins have been loaded. Pluggable functions are no longer being added to WordPress core. All new functions instead use filters on their output to allow for similar overriding of their functionality. Note: A function can only be reassigned this way once, so you can’t install two plugins that plug the same function for different reasons. For safety, it is best to always wrap your functions with if ( !function_exists() ), otherwise you will produce fatal errors on plugin activation.

Check here full list of pluggable functions
http://codex.wordpress.org/Pluggable_Functions

Advanced Box and Page Builder Customization

There is an option to customize page builder (accordions, text box, forms and etc) without Child Theme and what is important you’ll still have a
possibility to upgrade your Theme without any issues.

You should use “pukka-overrides” directory for advanced customization.

For Page Builder you should use:
pukka-overrides/dynamic-meta/assets/css/dm.front.css (only CSS)

 

3.9 Shortcodes

You can use built-in WooCommerce shortcodes to display your products anywhere on website.


[recent_products per_page="12" columns="4"]

[featured_products per_page="12" columns="4"]

[products ids="1, 2, 3, 4, 5"]

[product_category category="appliances"]

[sale_products per_page="12"]

[best_selling_products per_page="12"]

[top_rated_products per_page="12"]



Read more about WooCommerce shortcodes on their website woothemes.com

4. Updating

4.1 Updating

Whenever we update our theme files, we will send an alert through your WP Admin panel (if you are using Envato Wordpress Toolkit). Please subscribe to recieve update notifications from ThemeForest.com, also.

Downloading files and copying them using FTP (overwriting current files). Note that all changes that you have made on theme files will be overwritten, and because of this we highly recommend using child theme for modifying theme files.

You can use Envato Wordpress Toolkit plugin and automatically update your theme from Themeforest. If this plugin isn't included in theme you can download it here https://github.com/envato/envato-wordpress-toolkit or try to find it using 'Add new plugin' from WordPress' admin area.
You have good written tutorial how to use it here http://premium.wpmudev.org/blog/how-to-update-themeforest-themes-with-the-envato-wordpress-toolkit/ .

*Note

We highly recommend you to backup your files first before updating in case something goes wrong. If you made changes to original files, you will lose your changes when updating update. That is why you need to use child theme.

Your theme settings are safe.

4.2 Child Theme

We reccomend using child theme if you are planning to make changes to original files.

After you installed main theme, go to files that you downloaded and find folder ubershop-child . Copy that folder in your wp-content/themes folder. Go to Apperance -> Themes and activate child theme. Now you are all set using child theme.

Any changes that you want to make to original files, just copy them into child theme folder (in the same place like in main theme folder) and you can safely change them.

Making these process you can safely change files not worrying about them get overwritten when you update theme. You can find more about child themes here http://codex.wordpress.org/Child_Themes .

5. FAQ

5.1 Blurry Images

"I have a problem with my images for my products. I upload sharp images, but when I hover the images they are very blurry."

Did you change thumbnail sizes in the woocommerce settings (woocommerce -> settings -> Products tab)? If you did you'll have to:

  1. save Theme settings after that (this is necessary new CSS to be generated and saved)
  2. regenerate thumbnails (you'll probably want to use this plugin: https://wordpress.org/plugins/regenerate-thumbnails/

5.2 Outdated copies of WooCommerce template files

"Your theme has bundled outdated copies of WooCommerce template files – if you encounter functionality issues on the frontend this could the reason. Ensure you update or remove them (in general we recommend only bundling the template files you actually need to customize). See the system report for full details."

One, or more, woocommerce template files changed in the last WooCommerce version. In most cases this won't cause any problems, but just in case it is advised not to update WooCommerce if your not sure that theme is compatible with latest version (which you can always check on Theme Forest).

WooCommerce now and the releases updates very often, sometimes 2-3 times in a week. We're trying to keep and test everything, but it's a little bit hard to keep up with that pace. If you experience any problems don't hesitate to open up a ticket with our support system.

5.3 Changing cart icon

I would like to change the shopping cart icon to shopping bag, font awesome does not have a shopping bag, how can I as a custom icon image to replace the cart.

You can add following CSS to "Custom CSS" textarea (Theme settings -> Style):

#menu-basket {
  background-image: url("http://www.example.com/wp-content/themes/ubershop/images/shoppingbag.png");
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

Just replace image URL

WooCommerce now and the releases updates very often, sometimes 2-3 times in a week. We're trying to keep and test everything, but it's a little bit hard to keep up with that pace. If you experience any problems don't hesitate to open up a ticket with our support system.

5.4 Gallery loading endlessly

My gallery is loading endlessly with black screen? If your gallery post looks like this http://prntscr.com/6fszug your probably selected images link from attachment page. To display your gallery properly you need to select images link from media file like here http://prntscr.com/6ft1wz .

Thank you for purchasing ÜberShop WordPress Theme

If you have any questions please feel free to contact our support team.

www.pukkathemes.com