WoonderShop Documentation

Introduction & Installation

Introduction

WoonderShop - Your Ultimate WooCommerce Theme to Grow Any e-Commerce Business. This is the last WooCommerce theme you will ever need. It will make your WordPress site look awesome and feature rich, with functionality which your customers will love!

Installation

I assume you already have a fresh copy of WordPress installed on your server.

Download the theme zip file
The first thing you will need to do is to download the theme installation zip file.

If you bought the theme on our ProteusThemes Shop, you should have received an email with the list of themes you have access to. You can click on the theme link with file name ending: -installable.zip or you can login to your account and download the installable zip file from there.

If you bought the theme on ThemeForest, then you have to download the installable WordPress files only zip file from the ThemeForest download section.

Install the theme
You can install the WoonderShop WP Theme in two different ways:

1. Upload a zip file - preferred method
   When you are logged in your WordPress dashboard go to Appearance → Themes → Add New → Upload Theme and select the theme installation zip file you downloaded from our Shop or from the ThemeForest and click Install Now button.
2. FTP upload
   Unzip the contents of the theme installation zip file and upload the extracted folder to your server to wp-content/themes/ folder using a FTP client.

Once your theme is on the server, activate it by clicking the Activate button below the preview image in Appearance → Themes

Congratulations! Now the WoonderShop WP Theme is installed.

Theme onboarding wizard

After you activate the theme, an onboarding wizard will run, which will guide you through the theme setup. The wizard is made out of these steps:

• welcome step,
• child theme installation and activation,
• theme registration,
• plugin installation and activation,
• demo content import

After you complete this wizard, your WordPress website will be ready to go and you'll be on your way creating something amazing! :)

Registration and Updates

Open Appearance > Theme Registration after activating the theme. Use the license key from your ProteusThemes account, or the purchase code from your ThemeForest download, according to the instructions on the registration page.

Register before using One Click Demo Import. In the ProteusThemes shop version, registration also unlocks the theme's Customizer options. The ThemeForest version does not apply that Customizer restriction, but still requires registration for demo import.

Automatic updates: After registration, the theme can notify you when updates are available. For a ThemeForest purchase, also generate and verify the Envato token requested on the registration page to enable automatic updates. This is separate from your purchase code.

If an available update is not showing, open Dashboard > Updates and click Check Again.

Manual updates: Follow our manual theme update guide to install a newer version yourself.

Customize the Appearance

You can fully customize the appearance of the WoonderShop WP Theme. Go to Appearance → Themes and click on the Customize button:

The new window appears and you can now customize the appearance of your theme — upload your custom logo, change the base colors, enable/disable theme features, add custom CSS or JavaScript, etc.

Demo Content

Before importing, activate the required plugins and the plugins used by your chosen demo, then complete theme registration.

One Click Demo Install

Choose the demo matching your intended skin: Default, Jungle, Fab, or Haven. See WoonderShop Skins for changing the design without importing content.

If for some reason, you skipped the demo content import in the theme onboarding wizard, when you first activated the theme, then you can import the demo content with the One Click Demo Import plugin.

You can import demo content from our demo site (with blurred licensed images) with a single click of a button. First install and activate the One Click Demo Import plugin, then go to Appearance → Import Demo Data and click on the import button.

Import XML File

If you want to import the demo content the old-fashioned way, you can get a fresh copy of the XML files on our server at these URLs:

• WoonderShop Default: https://artifacts.proteusthemes.com/xml-exports/woondershop-latest.xml
• WoonderShop Jungle: https://artifacts.proteusthemes.com/xml-exports/woondershop-jungle-latest.xml
• WoonderShop Fab: Fab content XML
• WoonderShop Haven: Haven content XML

Don't forget to activate all required plugins before importing demo data. To import the demo data go to Tools → Import, click on WordPress (install the WordPress Importer plugin if not already installed) and upload/import the previously saved xml file (don't forget to enable the Download and import file attachments checkbox to also import the images).

Demo Widgets
After you import the demo content, you can also import widgets the old-fashioned way. The files for widget import are also located on our server:

• WoonderShop Default: https://artifacts.proteusthemes.com/json-widgets/woondershop.json
• WoonderShop Jungle: https://artifacts.proteusthemes.com/json-widgets/woondershop-jungle.json
• WoonderShop Fab: Fab widgets JSON
• WoonderShop Haven: Haven widgets JSON

Customizer settings
The last thing you have to import are the customizer settings. The files for that can also be found on our server:

• WoonderShop Jungle: https://artifacts.proteusthemes.com/customizer-exports/woondershop-jungle.dat
• WoonderShop Fab: Fab Customizer settings
• WoonderShop Haven: Haven Customizer settings

After import setup
After you have imported the demo data and widgets, you should also setup these things:

• In Settings > Reading, choose A static page and select the homepage and posts page.
• In Appearance > Menus, assign your menus to the theme's available menu locations.
• In Appearance > Widgets, select the appropriate menu in each imported Navigation Menu widget.
• Use Appearance > Customize to set your logo, colors and other appearance options.

These steps are especially useful after a manual XML and widget import. If the demo importer has already assigned pages or menus, check those selections rather than repeating the import.

Header

Top bar

The available areas depend on your skin. Default and Jungle have Top Left and Top Right. Fab has Top Bar. Haven has Top Left, Top Right, and Top Bar, plus Middle Left and Middle Right.

Add widgets to these areas in Appearance → Widgets.

Adjust top bar visibility and colors in Appearance → Customize → Header → Top Bar Area. Haven also has a Middle Bar Area section. Controls vary by skin.

Logo

Set your logo in Appearance → Customize → Header → Logo. Check its appearance in the desktop and mobile previews before publishing.

Favicon

Set your Site Icon in Appearance → Customize → General → Site Identity.

Main Menu

Main Menu can be set in wp-admin → Appearance → Menus. Theme locations for Main Menu is called Main Menu.

Mega menu

Please read this help article, for instructions on how to add a mega menu item to the main menu.

Featured menu item

You can mark a main menu item as Featured, by adding a CSS class to the menu item. It looks like this:

• a shadow appears over all other page elements, except for the main menu,
• the featured menu item has a different color and has bigger paddings

1. go to wp-admin → Appearance → Menus,
2. in the top right corner of the page click on the Screen Options and make sure, that the CSS Classes checkbox is enabled,
3. open the menu item you want to mark as featured and add the featured-dropdown text to the CSS Classes setting. (if you do not have an icon set for this menu item, then add this text to the CSS classes setting: featured-dropdown featured-dropdown--without-icon )
4. save the menu

Menu item labels

A menu item label can be added in wp-admin → Appearance → Menus, by opening the main menu item, to which you want to add a label and set the text you would like to display in the Label setting:

It will look like this in the main menu:

Widget area: Benefit Bar

The Default skin has a Benefit Bar widget area below the main menu. Use it for important information, for example with Icon Box widgets:

You can add widgets to this area in wp-admin → Appearance → Widgets in the Benefit Bar widget area.

Set its visibility in Appearance → Customize → Header → Benefit Bar Area, including whether it appears on mobile or only on the front page. This header widget area is not available in Jungle, Fab, or Haven.

Mobile Products Filter

In order for the mobile product filter button to appear underneath the header area on WooCommerce products pages, you will need to wrap the products filter shortcode in a div with a specific class: mobile-filter. Go to wp-admin → Appearance → Widgets, open the Shop Sidebar and place a Text widget into the sidebar. In the text widget, click on the Text tab and paste this code in it:

<div class="mobile-filter">[searchandfilter id="shop_sidebar"]</div>

Don't forget to change the products filter shortcode to the one you are using.

The code should look like this:

The mobile filter button looks like this:

The mobile filter will look like this:

Widget area: Header

Add widgets to Appearance → Widgets → Header to display a cart, search, social icons, or an Icon Box in the header. Adjust its appearance under Appearance → Customize → Header → Header Widgets Area. The placement depends on the active skin.

Pages

wp-admin → Pages is the area where you will spend most of your time when building a site. We added a few tools in that process so you can create your pages easier and faster.

Page Templates

You can choose between 3 different Templates - Default Template, Front Page with Slider and Empty Template.

Default Template: Just a default template for simple layouts and Page Builder. First you must choose the Page Builder option under the title and you are ready to go. You can add our widgets here, choose different visual styles and much more. More about that in the next chapter.

Front Page with Slider: Adds the theme's native image and video slider above the page content. It can be used with Page Builder, including on pages other than your homepage. See Slider for setup.

Empty Template (no header and footer): This is an empty page template and it can be used in many different cases. For example a sales page, which should not show any distraction elements (logo, menu, footer,...). When you select this page template, the options for it will display under the content editor, which allow you to enable certain elements, if you need them (logo, menu, footer). The content can be layout out and created with the awesome Page Builder by SiteOrigin editor.

Blog and single post sidebars

Open Appearance → Customize → Blog. Use Layout for the blog archive and Single Post for individual posts. Add their widgets to Appearance → Widgets → Blog Sidebar.

Regular page sidebar

For pages using Default Template, add widgets to Appearance → Widgets → Regular Page Sidebar. Use the page's sidebar setting to choose left, right, or no sidebar.

WordPress block editor

WoonderShop supports wide alignment and a theme color palette in the WordPress block editor. The demo layouts use SiteOrigin Page Builder; edit those layouts with SiteOrigin. The theme does not provide custom blocks or Site Editor templates.

Page Builder

Page Builder is a very powerful tool for making pages. Here is one example of how it looks:

You can make any kind of grid with adding new rows and inside them you put widgets. When you are finished with adding widgets you can also move whole rows up and down.

For more information on how to use Page Builder please visit Page Builder by SiteOrigin documentation page.

For a step-by-step guide to adding rows and widgets, read SiteOrigin's Building a Page tutorial.

Page Builder Row Style

Let's take a look at how we can style Page Builder rows.

To start off we have to click on "Edit Row" for the row that we want to style as shown on the image above. An "Edit Row" window will open, and on the right, there are three setting tabs: Attributes, Layout and Design. Here you can customize different things for this particular row.

In the Layout tab you can set the Bottom Margin, Padding and change the Row Layout to Full Width. In the Design tab you can set the Background Color, Background Image and other things.

Page Builder Widgets

You can use almost any widget in the Page Builder. You can view the showcase of our widgets on our All elements page.

WoonderShop widget reference

In SiteOrigin Page Builder, select Add Widget and search for the widget name. These widgets can also be added to suitable areas under Appearance → Widgets. Save the widget, update the page, and check the result on desktop and mobile.

• Call to Action: enter a title and subtitle, then add a button shortcode to Button Area.
• Opening Time: add rows with a day and time. Mark lunch breaks or secondary notices as less important.
• Image Banner: upload an image, enter title and subtitle, and set the link. Choose text position, color, size, and container width. Add button text to show a button; with that field empty the whole banner is clickable.
• Cart: set the title for the WooCommerce cart with its items dropdown. Add it to the Header area for access while shopping.
• Featured Product: enter a product ID. Find it by hovering over a product in the admin Products list. WooCommerce must be active.
• Countdown: enter a future end date and time using the format shown in the widget, and choose whether to hide the time-unit labels.
• Woonder Products: choose recently added, best-selling, top-rated, featured, or sale products, then select categories and the product count. Enable the slider and set products per slide when needed. Requires WooCommerce.
• Title with Button: enter the title, choose its heading level, and set the button text, link, and new-tab option.
• Image with Ornament (Fab only): upload an image and choose the left or right ornament position.

Shared widgets include Brochure Box (download link), Icon Box (icon, title, text, and link), Social Icons (icon links and new-tab option), Accordion (expandable items and read-more link), and Latest News (recent posts). Facebook accepts a page URL, dimensions, and display options. Testimonials, available in Jungle and Haven, accepts quotes, authors, avatars, and a rotation interval.

SiteOrigin Editor Widget

SiteOrigin Editor will create for you the same editor environment as a normal WordPress editor does. You can use this widget if you want normal text editing options. The SiteOrigin Editor Widget is part of Site Origin Widgets Bundle.

Slider

Building a Theme slider has never been easier.
You can create a Theme slider on any page you want. The only thing you must do is choose the page template Front Page With Slider (you can use this template even if it's not for the front page). After you select this page template there will be a new meta box at the top of the page which is called Front page slider. Now you can add images or videos to your slider.

When you add a video, you also have to upload a video "thumbnail", which will serve as a clickable area (also a play button overlay will be added to this image). When a user clicks on this image, the video will open in a pop-up modal window.

Choose Slider with captions for titles and text over the images, or Slider with links for clickable slides. Enable Bigger mobile slider to use taller cropped images on small screens, then choose the crop position for each slide. Preview each crop on mobile so the subject stays visible.

Use the Slider settings tab to adjust the slider's behavior.

This is how the slider backend looks like:

Please take a look at this slider dimensions article for the recommended size of the slider images for this theme.

ProteusThemes Options

Open Appearance → Customize to preview changes, then click Publish to save them. WoonderShop settings are organized into these top-level panels and sections:

• General: global colors, layout, homepage settings, site identity, and skin selection.
• Header: logo, widget areas, navigation, page title and breadcrumbs, and background color. Use Sticky Header to control desktop and mobile sticky behavior, and Mobile Header to show or hide mobile search and cart.
• Shop (WooCommerce): with WooCommerce active, use Product Catalog for shop layout, Product Page for product sidebars and metadata, and Product Images for image settings. Checkout Page includes the theme's floating-label option; preview your checkout after changing it.
• Footer: widget layout, bottom bar text, colors, and skin-specific controls. See Footer.
• Blog: archive layout and single-post settings.
• Additional JavaScript and Additional CSS: separate sections for custom code.
• Other: Google Fonts loading and character set. Disable Load theme's Google Fonts? if you provide replacement fonts, then check your site's typography.

WoonderShop Skins

Choose Default, Jungle, Fab, or Haven under General → WoonderShop Skins. Switching skins changes the layout and available widget areas. The confirmation prompt offers to reset color controls to the selected skin's defaults; accepting replaces your current colors. Review the preview, widget placement, and colors before publishing.

Skin selection changes the design; to add matching demo pages and widgets, use the corresponding demo import.

Shortcodes

Buttons

Add a button with [button]Your Text[/button]. Customize it with style, href, target, fa, corners, class.

Text: Change the text between the opening and closing shortcode.
Example: [button]New Text[/button]

Style: Choose primary, secondary, danger, success, info.
Example: [button style="primary"]Your Text[/button]

Href: Set the button's destination URL.
Example: [button href="https://www.proteusthemes.com"]Your Text[/button]

Target: Use _self for the same tab or _blank for a new tab.
Example: [button href="https://www.proteusthemes.com" target="_blank"]Your Text[/button]

Font Awesome icon: Add an icon before the text.
Example: [button fa="fas fa-phone"]Your Text[/button]

Corners: Give the button rounded corners.
Example: [button corners="rounded"]Your Text[/button]

Full width: Stretch the button to fill its container.
Example: [button class="btn-block"]Your Text[/button]

Class: Add extra CSS classes to the button.
Example: [button class="btn-lg"]Your Text[/button]

Icons - Font Awesome

Shortcode for Font Awesome is very similar to the buttons shortcode. It looks like this: [fa]
There are 4 options with different attributes - icon, href, target and color.

Our theme uses the Font Awesome version 5, which has a bit different icons names and prefixes, so you should check the icons and what prefix they require on the official FontAwesome website.

Icon: You can use any FontAwesome icon. To set the selected icon, just get the prefix and the title of the icon, for example "fas fa-phone".
Example: [fa icon="fas fa-phone"]

Href: You can add URL to the icon.
Example: [fa href="https://www.proteusthemes.com"]

Target: You can choose if you want to open the link in the same - "_self" or new - "_blank" window.
Example: [fa target="_blank"]

Color: You can set a custom color to your icon.
Example: [fa color="#ff00ff"]

So a Font Awesome icon shortcode with a home icon, linking to a page and opening in a new window/tab would look like this: [fa icon="fas fa-home" href="https://www.proteusthemes.com" target="_blank"]

WoonderShop Custom Icons

WoonderShop theme also has a set of custom icons. To learn more about these custom icons, read this help article.

Single Product Shortcode

With WooCommerce active, use [woonder_product id="123"] to display one product's image, name, price, and cart button. Replace 123 with an existing product ID from your store: open Products and hover over the product to see its ID. Add the shortcode to a Shortcode block or a SiteOrigin Editor widget. A missing or invalid product ID produces no product output.

Urgency Countdown Shortcode

This theme also has a urgency countdown shortcode and you can learn more about it in this help article.

Time Left Shortcode

The time_left shortcode will count down for the specified time duration. Read more about it in this help article.

Plugins

We also use and support some of the best plugins for WordPress.

Required and Recommended Plugins

You can install and activate these plugins by going to wp-admin → Appearance → Install Plugins.

The list of required and recommended plugins used in this theme:

These groups match the required and recommended labels in the theme's plugin installer. Install recommended plugins when you need their features.

Required plugins

• Advanced Custom Fields PRO (bundled with the theme)
• ProteusThemes Shortcodes (installed from the developer's download)
• Variation Swatches for WooCommerce
• Page Builder by SiteOrigin
• SiteOrigin Widgets Bundle
• WooCommerce - excelling eCommerce
• Kirki Customizer Framework
• Classic Widgets
• Smash Balloon Social Photo Feed

Recommended plugins

• Contact Form 7
• Smart WooCommerce Search
• Themify - WooCommerce Product Filter
• Breadcrumb NavXT
• MailChimp widget by ProteusThemes
• ClevrBot (installed from the developer's download)

Contact Form 7

We use Contact Form 7 for our Contact Us page. This is the code from our demo:

<div class="row">
  <div class="col-12">
    [text* your-name class:form-control placeholder "First Name*"]
  </div>
  <div class="col-12">
    [tel your-number class:form-control placeholder "Phone Number"]
  </div>
  <div class="col-12">
    [email* your-email class:form-control placeholder "E-mail*"]
  </div>
  <div class="col-12" style="text-align: center;">
    [textarea your-message class:form-control placeholder "Message"][submit class:btn class:pull-right class:btn-primary "Send Message"]
  </div>
</div>

After that just place the plugin's shortcode into your Contact Us page.

WooCommerce

WooCommerce is required for WoonderShop. Activate it before importing a store demo. Follow its onboarding steps, then use WooCommerce > Settings to configure your store, shipping, taxes and payments.

If your chosen theme demo includes products, activate WooCommerce before you import that demo so its product data can be imported.

Optional sample products

For a test store, WooCommerce supplies a sample_products.csv file in the plugin's sample-data folder. Download the WooCommerce plugin ZIP and extract that file, then open Products > All Products and use the product import button. Select the CSV, review the column mapping, and run the importer.

Alternatively, use Tools > Import > WordPress to import sample-data/sample_products.xml from the same plugin ZIP. Select Download and import file attachments if you also want the sample images. See the WooCommerce sample-data guide for both methods.

Shop sidebar

Open Appearance > Widgets to add the available product widgets to Shop Sidebar. WooCommerce must be active for this sidebar to appear. For the mobile filter button, follow the Mobile Products Filter instructions.

For product management and store configuration, see the WooCommerce documentation.

Breadcrumb NavXT

The breadcrumbs in this theme are powered by the Breadcrumb NavXT plugin.

All the settings for breadcrumbs can be found in Settings → Breadcrumb NavXT. Here you can define a separator (which should be empty by default for our themes), breadcrumb hierarchies for different pages (pages, custom post types, taxonomy, ...) and set other breadcrumbs related things.

Autosuggest for WordPress Search widgets

For instructions on how to add the autosuggest feature to the WP Search widget or to the WooCommerce search widget, visit this support article.

WooCommerce product filters

For instructions on how to add the WooCommerce product filters to your shop page, visit this support article.

Footer

Footer Widgets

Choose the number and widths of footer columns in Appearance → Customize → Footer → Layout, using Footer widgets layout. Add the corresponding widgets to Appearance → Widgets → Footer. A layout with zero columns disables this widget area. Set its colors under Footer → Colors.

Bottom Footer

Set the left and right footer text in Appearance → Customize → Footer → Bottom Bar Content. Jungle also provides a credits text field.

Footer skin options

Jungle and Haven have a Footer → Footer Benefit Bar visibility control. Jungle also has a Footer → Back to Top control for the button above the footer.

Translations

Manual translation

We have an article with a video on how to translate our themes.

WPML for Multilingual sites

This theme officially supports WPML. Head over to the WPML website, buy the subscription, then install the main plugin — likely the OTGS Installer Plugin. When prompted to download, install, and activate specific WPML plugins, make sure to install and activate these:

• WPML Multilingual CMS
• String Translation
• Media Translation

WPML’s setup wizard will also prompt you to install other plugins if it thinks you need them. For example, if this theme includes a WooCommerce-based site, WPML will prompt you to install WooCommerce Multilingual & Multicurrency. Install whatever WPML suggests installing.

Extras

Demo Images

All images used in WoonderShop WP can be found on Shutterstock.

Customizations

If you need advanced customizations for this theme, we can do that. See our Theme Customization page for details.

Changelog

View the WoonderShop WP changelog.

Support

If you need more help after all, you can write to us.