WooCommerce filter widget settings in the sidebar and shop header

WooCommerce filter widget settings in the sidebar and shop header #

In (General Settings) of the plugin admin dashboard, select the filter widget.

First item (filter type):

Filter type selection is currently only WooCommerce filter.

The second item (header widget):

Sobex header filter widget that you can enable or disable. Note, by activating this option, the Sobex header widget will automatically replace the default WooCommerce header filter. But for any reason, if the operation of replacing the header widget faces a problem, we will provide the solution in the next training videos.

Third item (show sidebar widget on mobile/tablet):

In this section, you can hide or show the sidebar widget on mobile and tablet. This item is very suitable for those templates that are not compatible with sidebar display. By choosing any option, it affects the display of Sobex header filter widget on mobile or tablet.

The fourth item (filter mode):

Filter mode is one of the most important and specialized Sobex items. The filter mode has its own independent protocol, by which we have fixed the common problems of WooCommerce. This item has three modes. It is the (Sobex default) mode, the (combined) mode and the (classic) mode. The important thing is that each of them has its own unique mode and characteristics. To learn more about filter modes, see the related video. Note, we always prefer to use (default Sobex) mode. Because many of our major updates and future plans are directly related to the default Sobex mode.

The fifth item (post status):

The status of posts in WordPress is grouped by (Published), (Private), (Draft) and others. WooCommerce products include some of these situations. You can specify which states include the filter results. Note, currently it is only set to (Published) and cannot be changed.

The sixth item (product color switch extension):

Sobex Tech is compatible with YITH (YITH product label and changing color) and (Show WooCommerce Super Product features) plugins. And automatically, it receives the colors by the mentioned plugins and adds colors in the sidebar and header widgets.

The seventh item (multilingual website):

If your store is multilingual by WPML plugin, just activate this item. To open a new tab under the title WPML. Inside this tab, translate the string of words into any language you want. Sobex plugin is compatible with WPML plugin and also supports (right and left alignment).

After applying the settings, please click the (Save Settings) button.

Go to the main section (Widget Settings) and click on the (Sidebar and Header Widgets) tab.

You are now on the header tab (setting sidebar). You’ll see a list of all the WooCommerce feature groups you’ve already created. Your WooCommerce feature group is automatically identified by the Sobex plugin and listed for you in the tables. Each table is related to a group of WooCommerce features. Although you have a group in WooCommerce feature, you can enable or disable it in the sidebar and header of your store. You can also drag the table up and down to arrange its priority as you wish. You can choose a different input for each of your widgets. Usable inputs are (selection box, checkbox, radio button, checkbox label, radio button label). And for widget color (color of checkbox, color of radio button) you can use. Even tag entries can be used for color widgets. But instead of color, it will bring the name of the color. For the price widget, select the entry (two-sided drop-down). In the next updates (one-sided drop-down) will be added.

Note that inputs (check boxes) allow the user to select multiple items. But the input (radio button) does not have one more item.

Now activate the required features filter widget. and select an entry for each of them. Then click the (update) button at the end of the table.

At the end of the table, in the section (widget titles), there is a text input box in front of the name of each widget you activated. Please write the name of your widget in the main language of your store, preferably short. If you do not enter a name, the default name will appear to users.

There are three important things in this section. One is the price widget, two is the tag widget, and three is the WooCommerce header filter default item widget.

– In the table (price widget):

By clicking on the edit icon, you can choose to display the minimum price with the lowest product price or set it to zero.

– In the table (tags widget):

By clicking on the edit icon, you can personalize by selecting the desired tag, or even add a special tag for some of your products and select those tags to display in this section.

– In the table (widget of the default WooCommerce header items):

You can also customize it by clicking on the edit icon. And choose the frequently used items as you like.

Click on the header tab (set header widget). Editing and management of this section is exactly like settings (sidebar widget).

Note that the customization (price widget), (tag widget) and (default WooCommerce header filter items widget) are subordinated to (sidebar widget).

But there is one thing in this section that is very important. Display some of (header filter widget) on tablets and mobile phones. By default, all widgets that are active on tablets and mobiles are displayed as a dropdown. But you may want some widgets to be displayed only on tablets and mobile phones.

there is an item at the top of the tables, it is called (tablet and mobile only). If you activate its button in each table, the widget of that table will be displayed only in (tablet and mobile). And if you don’t enable it, they will be seen on desktop and mobile by default.

Go to the main section (Style Settings) and click on the (Filter Tools) tab. The first header tab (side widget style) and the second header tab (header widget style).

This section has an advanced Sobex editor, along with widget emulation. You can personalize very easily and instantly.

At the end of the customization items (side widget style), there are two important items. Item (scroll type) and item (scroll height).

– There are two models in the scroll type item. which is currently only active on normal scrolling. Button scrolling (more and less) will be enabled in future updates.

– As for the scroll height item, you can adjust the height as you wish.

– Now click on the second tab of the Personalization tab. and enter (header widget style).

At the end of the customization items (header widget style) there are two important items. One is (header widget template in each row) and two is (mobile template media query).

– Item (header widget pattern in each row): This item determines how to display the header filter widget in each row for the desktop. The number of display groups is directly related to the format of your store. Suppose you have 6 or 5 groups of features for active filtering. You selected 3 display groups for each row. The first row will show 3 groups, and the rest will be seen in the second row after clicking on the (show more) button.

– Item (media query mobile template): every responsive template has CSS to display the template on desktop, tablet and mobile. Media Query for tablets and mobiles has a condition for the screen or browser of users who enter your store from tablets and mobiles. For example, if their browser is less than 800 pixels wide. CSS related to tablet and mobile format is activated. to apply appropriate changes to the dimensions of the user’s tablet and mobile phone. It is enough to enter the media query number of your tablet template here, so that the Sobex plugin is compatible with your template.