Widgets

Widgets

Accessing Widgets

You can access the Widgets page by going to "Appearance" -> "Widgets" on the left-hand menu.


The Widget page

The left side of the page is a list of all available widgets that can be added to widget areas. There is also a list of any inactive widgets, which can be moved back into a widget area to make them active again.
The right side of the page has all the widget areas that are defined in the theme. These widget areas can have widgets places inside them, which will then be displayed on the front-end of the website in the position the widget area is called.
For example, you may have a Product Page widget area, which contains a KCW Product Review widget. In the Product Page template, there will be the code to load this widget area, so the KCE Product Review widget will be displayed on the Product Page.
There should also be an extra widget area called "Widgets for Shortcodes", this is added in by one of the plugins that we often use. This widget area is not loaded directly on the front-end, and instead is a holding area for widgets that will be loaded via shortcode. This means that you can put the shortcode for a widget inside the content of a piece of Static Content, and the widget will be loaded on that Static Content's page.

Adding a Widget to a Widget Area

To add a widget to a widget area, simple click and drag the widget into the widget areas' box. This will create an instance of the widget, and allow you to alter the options for this widget.
As all widgets are instanced, it is possible to have multiple versions of the same widget loading on a page, and even inside a single widget area.


Removing a Widget from a Widget Area

If you want to remove a widget from a widget area, there are a few ways you can do it:

1. You can drag it out of the widget area and let it go over nothing, which will permenantly delete this instance of the widget.


2. You can drag it down to the "Inactive Widgets" section, which will keep this instance of the widget for use later, and will keep any settings changes.


3. You can click on the down arrow next to the widget title, then click "delete" to permenantly delete this instance of the widget.


Whichever method you use to remove a widget, you can easily add another instance of the widget again later, if you need to, by dragging the available widget into the widget area again, and altering the widget settings.

Altering Widget Settings

To see and change the options on a widget, just click the down arrow next to the widget title, and the widget box should expand down to show all the available options.


You can then change the options, and click the "Save" button to save this instance of the widget.

Available Widget Options

KCW Best Selling Products

Title: The title of the widget, to be displayed on the front-end.

Show Count: Set the number of products to show.

Category: Select a Category to use as the basis for the products displayed.

Based on Current Category: Set if the products should be drawn from the current category.

Template URL: The URL of the template file to load for displaying the widget on the front-end of the website. This URL should be relative to the base URL of the site, for example "/wp-content/themes/my-theme/best-selling-products.php".

KCW Category List

Title: The title of the widget, to be displayed on the front-end.

Categories: Select the Categories to include in the widget. To select multiple Categories, hold down the Ctrl or Shift keys, and click the other Categories. To unselect a Category, hold the Ctrl key and click on the Category.

Template URL: The URL of the template file to load for displaying the widget on the front-end of the website. This URL should be relative to the base URL of the site, for example "/wp-content/themes/my-theme/category-list.php".

KCW Category Products

Title: The title of the widget, to be displayed on the front-end.

Show Count: Set the number of products to show.

Category: Select a Category to use as the basis for the products displayed.

List View: Set whether to display the Products as a more basic list rather than the standard grid format.

Template URL: The URL of the template file to load for displaying the widget on the front-end of the website. This URL should be relative to the base URL of the site, for example "/wp-content/themes/my-theme/category-products.php".

KCW Collection Products

Title: The title of the widget, to be displayed on the front-end.

Show Count: Set the number of products to show.

Template URL: The URL of the template file to load for displaying the widget on the front-end of the website. This URL should be relative to the base URL of the site, for example "/wp-content/themes/my-theme/collection-products.php".

KCW Customers Also Viewed

Title: The title of the widget, to be displayed on the front-end.

Show Count: Set the number of products to show.

Template URL: The URL of the template file to load for displaying the widget on the front-end of the website. This URL should be relative to the base URL of the site, for example "/wp-content/themes/my-theme/also-viewed.php".

Title: The title of the widget, to be displayed on the front-end.

Show Count: Set the number of posts to show.

Template URL: The URL of the template file to load for displaying the widget on the front-end of the website. This URL should be relative to the base URL of the site, for example "/wp-content/themes/my-theme/features-posts.php".

Title: The title of the widget, to be displayed on the front-end.

Products: Select the Products to display within the widget. To select multiple Products, hold the Ctrl or Shift key and click on the other Products. To unselect a Product, hold the Ctrl key and click on the Product.

Template URL: The URL of the template file to load for displaying the widget on the front-end of the website. This URL should be relative to the base URL of the site, for example "/wp-content/themes/my-theme/features-products.php".

KCW FeeFo Product Review

Title: The title of the widget, to be displayed on the front-end.

Show Summary: Set if the FeeFo review summary should be displayed. This includes an average score for the product.

Summary Template URL: Set the template file to use when displaying the summary. This should be a path relative to the site's base URL, for example "/themes/my-theme/Views/Shared/review-summary.php".

Show X Reviews: Set is a specified number of reviews for the product should be displayed. This will list the reviews and their rating.

Reviews Template URL: Set the template file to use when displaying the reviews. This should be a path relative to the site's base URL, for example "/themes/my-theme/Views/Shared/review-output.php".

KCW FeeFo Review

Title: The title of the widget, to be displayed on the front-end.

Show Summary: Set if the FeeFo review summary should be displayed. This includes an average score for the website.

Summary Template URL: Set the template file to use when displaying the summary. This should be a path relative to the site's base URL, for example "/themes/my-theme/Views/Shared/review-summary.php".

Show X Reviews: Set is a specified number of reviews for the website should be displayed. This will list the reviews and their rating.

Reviews Template URL: Set the template file to use when displaying the reviews. This should be a path relative to the site's base URL, for example "/themes/my-theme/Views/Shared/review-output.php".

KCW Last Viewed Products

Title: The title of the widget, to be displayed on the front-end.

Show Count: Set the number of products to show.

Template URL: The URL of the template file to load for displaying the widget on the front-end of the website. This URL should be relative to the base URL of the site, for example "/wp-content/themes/my-theme/last-viewed.php".

KCW Latest Products

Title: The title of the widget, to be displayed on the front-end.

Show Count: Set the number of products to show.

Days After Launch: Set the number of days Products will be considered "new", based off the Product's launch date.

Category: Select a Category to use as the basis for the products displayed.

Based on Current Category: Set whether the plugin should use the current category.

Template URL: The URL of the template file to load for displaying the widget on the front-end of the website. This URL should be relative to the base URL of the site, for example "/wp-content/themes/my-theme/latest-products.php".

KCW Linked Products

Title: The title of the widget, to be displayed on the front-end.

Show Count: Set the number of products to show.

Template URL: The URL of the template file to load for displaying the widget on the front-end of the website. This URL should be relative to the base URL of the site, for example "/wp-content/themes/my-theme/linked-products.php".

KCW Product Review

Title: The title of the widget, to be displayed on the front-end.

Show in Popup: Set if the form should be shown in a popup, rather than directly on the page.

Submit via AJAX: Set if the form should be submitting using AJAX, which would mean the page wouldn't be refreshed.

Hide Form: Set if the form should be hidden. This should only be used if the widget is being used to display several reviews, and the form is displayed elsewhere.

Form Template URL: Set the template file to use when displaying the form. This should be a path relative to the site's base URL, for example "/themes/my-theme/Views/Shared/review_form.php".

Show Summary: Set if the review summary should be displayed. This includes an average score for the product.

Summary Template URL: Set the template file to use when displaying the summary. This should be a path relative to the site's base URL, for example "/themes/my-theme/Views/Shared/review_summary.php".

Show X Reviews: Set is a specified number of reviews for the product should be displayed. This will list the reviews, their rating, and allow visitors to vote on if the review is helpful.

Reviews Template URL: Set the template file to use when displaying the reviews. This should be a path relative to the site's base URL, for example "/themes/my-theme/Views/Shared/review_output.php".

KCW Questions

Title: The title of the widget, to be displayed on the front-end.

Show in Popup: Set if the form should be shown in a popup, rather than directly on the page.

Submit via AJAX: Set if the form should be submitting using AJAX, which would mean the page wouldn't be refreshed.

Hide Form: Set if the form should be hidden. This should only be used if the widget is being used to display several questions, and the form is displayed elsewhere.

Form Template URL: Set the template file to use when displaying the form. This should be a path relative to the site's base URL, for example "/themes/my-theme/Views/Shared/question-form.php".

Show X Questions: Set is a specified number of questions for the product should be displayed. This will list the questions, their rating, and allow visitors to vote on if the review is helpful.

Questions Template URL: Set the template file to use when displaying the questions. This should be a path relative to the site's base URL, for example "/themes/my-theme/Views/Shared/question-output.php".

Title: The title of the widget, to be displayed on the front-end.

Relation Type: Set the relation type to use when looking up related products. This will either be up-sell or cross-sell, and these relate to the products setup in Khaos Control against these types of relation.

Show Count: Set the number of products to show.

Template URL: The URL of the template file to load for displaying the widget on the front-end of the website. This URL should be relative to the base URL of the site, for example "/wp-content/themes/my-theme/related-products.php".

KCW Special Offer Products

Title: The title of the widget, to be displayed on the front-end.

Show Count: Set the number of products to show.

Template URL: The URL of the template file to load for displaying the widget on the front-end of the website. This URL should be relative to the base URL of the site, for example "/wp-content/themes/my-theme/special-offer-products.php".

KCW Static Content

Title: The title of the widget, to be displayed on the front-end.

Static Content: Select the piece of Static Content to display.

Content Group: Select the Content Group to display all of the Static Content for.

Widget Shortcodes

If the "Shortcode any Widget" plugin is installed on your website, you should be able to add widgets to the "Widgets for Shortcodes" widget area.
Once you've added a widget and saved it, the shortcode will be generated for it, and shown at the bottom of the expanded widget box.


To load this widget in a piece of Static Content, all you would need to do is add the shortcode text to the content of the Static Content, for example: [do_widget id=kcw_product_review_widget-2] would load KCW Product Review widget.

    • Related Articles

    • Shortcode Any Widget

      Accessing the Shortcode Any Widget Settings You can access the Shortcode Any Widget Settings by going to "Settings" -> "Shortcode any widget" on the left-hand menu. The Shortcode Any Widget Page This page provides more information on how to use the ...

    • Add a Widget to a Page or Static Content

      1. Log into the administration panel for your website. 2. On the left-hand menu, go to "Appearance" -> "Widgets". 3. Expand the "Widgets for Shortcodes" area by clicking on it. 4. Click and drag the widget you wish to add from the left-hand area into ...

    • Customise

      Accessing Customise You can access the Theme Customise by going to "Appearance" -> "Customise" on the left-hand menu. Available Options Site Identity: This allows you to change the site title, and add/change the tag line for the site, if it is being ...

    • The User Interface

      1. My Sites: This is a menu of all the sites within the Wordpress instance that you have access to, with links to some of the main pages. 2. Website Name: The name of this menu is based on the website you are accessing the admin panel for. This links ...

    • Main Settings

      Accessing the Main KC:Web Settings You can access the main KC:Web Settings by going to "KC:Web Settings" -> "Available Options" on the left-hand menu. Available Options General Category Root ID: Enter the root node ID from Khaos Control's Web screen ...