Our WordPress theme supports you with various pre-made Widget Sections and available Widgets to add different elements into different pages in your site. In this section, we will give you how to use Widgets in theme.

In our theme, the settings and configuration of the Widget are the same. Due to each theme, there will be extra parts as distingtive features.

In this article, we take Revo theme as an example.

 

These elements locate in Appearance > Widgets in the Admin Panel of your site.

 

Pre-made Widget Sections in theme

There are various pre-made widget sections in theme. They are:

 

  1. Sidebar Left Blog: This section is for the left sidebar in the Blog page.
  2. Sidebar Right Blog: This section is for the right sidebar in the Blog page.
  3. Header Top: This section is for the header of the page.
  4. Header Mid: This section is for the header of the page.
  5. Header Right: This section is for the header of the page.
  6. Sidebar Left Product: This section is for the left sidebar in Product Listing page.
  7. Sidebar Right Product: This section is for the left sidebar in Product Listing page.
  8. Banner Mobile: This section is for the banner of the page on mobile layout.
  9. Sidebar Left Detail Product: This section is for the left sidebar in the Product page.
  10. Sidebar Right Detail Product: This section is for the left sidebar in the Product page.
  11. Bottom Detail Product: This section is for the bottom information in the Product page.
  12. Filter Mobile: This section is for filter/search on mobile layout.
  13. Footer Copyright: This section is for the footer copyright of the page.
  14. Widget Search: This section is for the ajax search.
  15. Widget Mobile Top: This section is for the language switcher and currency switcher on the menu of mobile layout.

 

Available Widgets in theme

After installing theme, there are many widgets in this area. Now we will have an overview of the ones used in this theme:

 

  1. Categories: This widget is to display the blog category in widget sections
  2. Text: This widget is to display the text or HTML into the area you want in widget sections.
  3. Image: This widget is to display the image into the area you want in widget sections.
  4. Recent Posts: This widget is to display recent blog posts in your site.
  5. SW Top Widget: This widget is to display the Cart, Search, Login form or others in the Top section.
  6. Custom Menu: This widget is to display custom menu in widget section.
  7. WooCommerce Currency Converter: This widget is to display currency converter in widget sections.
  8. SW WooCommerce Related & Upsell Slider: This widget is to display Related Product in widget section of Product Page.
  9. WooCommerce Product Categories: This widget is to display product categories in widget section of Product Page.
  10. WooCommerce Price Filter: This widget is to display price filter in widget section of Product Page.
  11. WooCommerce Layered Nav: This widget is to display extra attribute of product as filter in widget section of Product Page.
  12. SW Ajax WooCommerce Search: This widget is to display the SW Ajax WooCommerce Search in your site.

 

How to Add a Widget into a Widget Section

To add a Widget into a Widget Section, please follow steps as below:

 

  1. Navigate to the Appearance > Widgets tab to access the list of widgets and widget sections. The left-hand side shows all the widgets you can use. The right-hand side shows all the different widget sections you can add widgets to.
  2. Click on the widget you want, choose widget section to add and click on button Add Widget. Or else, you can drag and drop it to the widget section.
  3. To rearrange widgets on a widget section, just drag and drop the widgets into the order you’d like.
  4. After that, you need to configure different options due to different types of widget.
  5. Finally, click Save to save the change.

 

Info To remove the widget, in the section you want, please choose it then click Delete.

 

Widget Settings

Now we will show you the options of different widgets used in theme.

 

1. Categories:

See Screenshot: DemoBackend

  • Title: This option allows you to add a title to this widget.
  • Display as dropdown: This option allows you to configure the item to display as dropdown.
  • Show post counts: This option lets you to show post counts for categories.
  • Show hierarchy: This option lets you to show category regarding to hierarchy.
  • Advanced Options: This will open additional settings which are proprietary of theme. Click the button and you’ll gain access to the additional options listed below.
  • Widget Style: This option allows you to style for widget among various Widget Styles. Here you can also choose the width of widget with options including Col-3, Coli-4 and others.
  • Widget Display: This option lets you to display widget on All pages, in selected pages. or execpt selected pages. For the 2 later ones, you can choose to show widget only for login users or logout users.

 

2. Text:

See Screenshot: DemoBackend

  • Title: This option allows you to add a title to this widget.
  • Textbox: This option allows you to enter the content of widget.
  • Advanced Options: This will open additional settings which are proprietary of theme. Click the button and you’ll gain access to the additional options listed below.
  • Widget Style: This option allows you to style for widget among various Widget Styles. Here you can also choose the width of widget with options including Col-3, Coli-4 and others.
  • Widget Display: This option lets you to display widget on All pages, in selected pages. or execpt selected pages. For the 2 later ones, you can choose to show widget only for login users or logout users.

 

3. SW Top Widget:

See Screenshot: DemoBackend

  • Tittle: This option allows you to add a title to this widget.
  • Template: This option allows you to choose template for this widget including Minicart, Login or Search.
  • Advanced Options: This will open additional settings which are proprietary of theme. Click the button and you’ll gain access to the additional options listed below.
  • Widget Style: This option allows you to style for widget among various Widget Styles. Here you can also choose the width of widget with options including Col-3, Coli-4 and others.
  • Widget Display: This option lets you to display widget on All pages, in selected pages. or execpt selected pages. For the 2 later ones, you can choose to show widget only for login users or logout users.

 

4. Custom Menu:

See Screenshot: DemoBackend

  • Title: This option allows you to add a title to this widget.
  • Select Menu: This option allows you to choose available menu as you want.
  • Advanced Options: This will open additional settings which are proprietary of theme. Click the button and you’ll gain access to the additional options listed below.
  • Widget Style: This option allows you to style for widget among various Widget Styles. Here you can also choose the width of widget with options including Col-3, Coli-4 and others.
  • Widget Display: This option lets you to display widget on All pages, in selected pages. or execpt selected pages. For the 2 later ones, you can choose to show widget only for login users or logout users.

 

5. WooCommerce Currentcy Converter:

See Screenshot: DemoBackend

  • Tittle: This option allows you to add a title to this widget.
  • Currency codes: This option allows you to add the currency code as you want. Please enter 01 currency code per line.
  • Show reset link: This option allows you to show reset link for currency in the widget.
  • Advanced Options: This will open additional settings which are proprietary of theme. Click the button and you’ll gain access to the additional options listed below.
  • Widget Style: This option allows you to style for widget among various Widget Styles. Here you can also choose the width of widget with options including Col-3, Coli-4 and others.
  • Widget Display: This option lets you to display widget on All pages, in selected pages. or execpt selected pages. For the 2 later ones, you can choose to show widget only for login users or logout users.
  • You can see the documentation for this widget for more detail: Documentation for Currency Converter Widget.

 

6. SW WooCommerce Related & Upsell Slider:

See Screenshot: DemoBackend

  • Title: This option allows you to add a title to this widget.
  • Description: This option allows you to add description to this widget.
  • Number of posts: This option allows you to configure the number of products appearing.
  • Excerpt length (in words): This option allows you to configure the charater number of product title.
  • Template: This option allows you to choose template for this widget.
  • Advanced Options: This will open additional settings which are proprietary of theme. Click the button and you’ll gain access to the additional options listed below.
  • Widget Style: This option allows you to style for widget among various Widget Styles. Here you can also choose the width of widget with options including Col-3, Coli-4 and others.
  • Widget Display: This option lets you to display widget on All pages, in selected pages. or execpt selected pages. For the 2 later ones, you can choose to show widget only for login users or or logout users.

 

7. WooCommerce Product Categories:

See Screenshot: DemoBackend

  • Title: This option allows you to add a title to this widget.
  • Order by: This option allows you to configure the order of product categories according to Name or Category Order.
  • Display as dropdown: This option allows you to configure the item to display as dropdown.
  • Show post counts: This option lets you to show post counts for categories.
  • Show hierarchy: This option lets you to show category regarding to hierarchy.
  • Only show children of the current category: This option allows you to show children of the current category.
  • Hide empty categories: This option allows you to hide empty categories.
  • Advanced Options: This will open additional settings which are proprietary of theme. Click the button and you’ll gain access to the additional options listed below.
  • Widget Style: This option allows you to style for widget among various Widget Styles. Here you can also choose the width of widget with options including Col-3, Coli-4 and others.
  • Widget Display: This option lets you to display widget on All pages, in selected pages. or execpt selected pages. For the 2 later ones, you can choose to show widget only for login users or logout users.

 

8. WooCommerce Price Fitler:

See Screenshot: DemoBackend

  • Title: This option allows you to add a title to this widget.
  • Advanced Options: This will open additional settings which are proprietary of theme. Click the button and you’ll gain access to the additional options listed below.
  • Widget Style: This option allows you to style for widget among various Widget Styles. Here you can also choose the width of widget with options including Col-3, Coli-4 and others.
  • Widget Display: This option lets you to display widget on All pages, in selected pages. or execpt selected pages. For the 2 later ones, you can choose to show widget only for login users or logout users.

 

9. WooCommerce Layered Nav:

See Screenshot: DemoBackend

Please note that you need to create attribute for product in Products > Attributes first.

  • Title: This option allows you to add a title to this widget.
  • Attribute: This option allows you to choose create attribute to display.
  • Display type: This option allows you to choose display type to this widget.
  • Query type: This option allows you to choose query type to this widget.
  • Advanced Options: This will open additional settings which are proprietary of theme. Click the button and you’ll gain access to the additional options listed below.
  • Widget Style: This option allows you to style for widget among various Widget Styles. Here you can also choose the width of widget with options including Col-3, Coli-4 and others.
  • Widget Display: This option lets you to display widget on All pages, in selected pages. or execpt selected pages. For the 2 later ones, you can choose to show widget only for login users or logout users.

 

10. SW Ajax WooCommerce Search:

See Screenshot: DemoBackend

 

11. Image:

See Screenshot: DemoBackend

  • Title: This option allows you to add a title to this widget.
  • Upload Image: This option allows you to upload image you want for this widget.
  • Advanced Options: This will open additional settings which are proprietary of theme. Click the button and you’ll gain access to the additional options listed below.
  • Widget Style: This option allows you to style for widget among various Widget Styles. Here you can also choose the width of the widget with options including Col-3, Coli-4 and others.
  • Widget Display: This option lets you to display widget on All pages, in selected pages. or except selected pages. For the 2 later ones, you can choose to show the widget only for login users or logout users.

 

12. Recent Posts:

See Screenshot: DemoBackend

  • Title: This option allows you to add a title to this widget.
  • Number of posts to show: This option allows you to set the number of posts to show.
  • Display post date?: Choose to display post date or not.
  • Advanced Options: This will open additional settings which are proprietary of a theme. Click the button and you’ll gain access to the additional options listed below.
  • Widget Style: This option allows you to style for widget among various Widget Styles. Here you can also choose the width of the widget with options including Col-3, Coli-4 and others.
  • Widget Display: This option lets you display widget on All pages, in selected pages. or execpt selected pages. For the 2 later ones, you can choose to show the widget only for login users or logout users.

You can check our  Best  Selling WordPress Themes with Widgets ready.

×