How to make directory, classified, review website with woocommerce
What is the reason to use woocommerce for directory site? Well, even in fact that woocommerce is mostly for e-commerce, it can be easily converted for directory functions as it has many great functions and can be easily extended via different plugins. You can use woocommerce also for review site, specification comparison, app reviews, service reviews, hosting reviews, etc.
How to make products without cart?
The main difference between directory and shop site, that directory site doesn’t have cart and users can’t purchase any products. They can just see products, read information, compare products, visit site of product/app/service. How to delete “add to cart button”? It’s very easy. Woocommerce has option to make product as External. In this case “add to cart” button will be converted to custom button. You can place there link to site of reviewed product or just simply don’t add any link and button will be hidden.
But with our theme you can go even further. You can disable also cart scripts in theme option – shop settings and disable also all buttons from Theme option – Loop customization – Disable button in ALL product loops?
Inner Product button can be disabled in Theme option – shop settings – Disable button inside Product page
All specifications for woocommerce are based on woocommerce attributes Very important to understand that there are two types of attributes: global and local. Global attributes must be created in Products – Attributes. They can be used for advanced product filtering, in product comparison, in creating advanced snippets, etc. Local attributes can be added inside each product. They are just like text blocks or additional content and can’t be used in any advanced functions. Use local attributes only if you want to add some information in product.
You must understand which attributes you want to have as global and which as local. Also, think about global attributes as like categories. For example, your products can be red, yellow, white colors and you want to have such search filters on site – make them as global attributes.
Also, global attributes must have archives if you want to make them as links in specifications. Better to give short names for global attributes.
What if standard attributes are not enough?
Woocommerce attributes have some limitations. For example, they are not comfortable when you want to add custom numeric value and each product has own value. So, it will be too hard to add each value as global attribute. So, you can use Custom fields.
To add custom fields to Product, you can use default wordpress Custom field panel or you can use free plugin for meta panels ACF (or any other). Using plugins are more easy as you will have custom panel in Product. But also you can add fields without any plugins
Check right corner of admin panel of product and enable there Custom fields.
Now, you have custom field panel where you can add custom data. So, add custom field, for example, demo_link and add value. It can be numeric or text.
Next time when you add custom field, you dont need to click on “Add new”, you can select field key in select
How to add additional information, featured attributes, videos, custom tabs
Let’s make our products more interesting and give them more information.
Additional thumbnails and videos can be easily added in right panel of product
Also, with our theme you can add good looking blocks, banners, featured areas. We added many examples of codes and how to use them in our custom product areas
And you can also show some most important attributes from specifications in featured area of product and in product grid/list, like next
For this, read our previous article how to enable featured specifications and attributes
How to add custom tabs
Woocommerce has tab system. In some of our product layouts, tabs are converted to sections. If you want to make custom tab, add there any shortcode or content, use next docs
Our theme has many unique Product layouts for inner pages and for archives/home pages. We added some special layouts for directory/review sites based on woocommerce. They are really awesome and we investigated all top review sites to make these layouts. You can read about product layouts for inner pages. And see some examples
We also added several good layouts for archives. You can choose them in Theme option – shop settings – Design for archives. We think that the best for directory/review sites are List and Directory Grid.
You can also choose them on Homepage with Page builder.
Editor’s Review and user’s reviews
In our theme we added special review panel where you can add Editor’s review and criterias. Use it if you want to add review to product. If you want to enable also user’s reviews, go to Woocommerce – settings – products and enable there user’s ratings. You can also enable Helpful or not system for ratings in theme option – shop settings.
Question and Answer tab
In some cases you may want to add also separate tab for users where they can add questions and get answers about product. There are many plugins for this. For example, YITH question and answer plugin
Wishlist and comparison
By default, wishlist is enabled. But you must create wishlist page and add there shortcode. Please, read how to do this
Comparison setup is really easy for woocommerce. Again, you must just create page and place shortcode there. Read how to do this
Configuring Headers, colors and basic woocommerce settings
We added some special header layouts which are pretty good for directory websites. Go to your site as admin and open Customizer
Here is also more detailed information about basic settings of Woocommerce
We added also Additional code area near icons. What does it mean? It means that you can assign some additional custom elements. You can combine them with our special conditional shortcodes
For example, you can show different links there for logged users and guests. This is code for this
[wpsm_is_user] <a href="http://site.com/registered">This is for registered user</a> [/wpsm_is_user] [wpsm_is_guest] <a href="http://site.com/nonregistered">This is for non registered user</a> [/wpsm_is_guest]
If you are not sure how to write html code, you can add some content in regular visual editor in your product, then, in right corner switch to Text and you will get HTML of your content.
If you want to have different mobile logo and header style, go to Theme option in admin panel and check theme option – logo and Amp tab.
Also, it’s better to check some standard woocommerce settings. By default, woocommerce will create shop page, account page and some other system pages. You can find them in woocommerce – settings – Advanced settings. Make sure that you have Shop page and My account page there. Check also your currency in general settings. Copy link of your My account page, you will need it in next step.
We have login/register popup in our theme. But, we recommend to use regular woocommerce registration. First of all, go to Woocommerce – settings – Account and Privacy and change settings for registration if you need (or leave them as default). Then, go to Pages – All pages and find your My account page
Edit this page and make it as Full width
Copy link to page and use it in Theme option – user option – Add custom register link
In this case, users can register from woocommerce page in our login popup instead of popup registration. This way is better to prevent different incompatibilities with woocommerce plugins.
Also, after user is logged in his account, he can see “Manage my order” tab in user dropdown which will go to his account tab. If you think that it’s useless for your site, you can hide this link
Change Link of Directory Archive
You can change permalink of your main directory page. By default, woocommerce set it as “shop”. You can create new page, name it “Directory” or as you like, set any link of page. Then, go to Woocommerce – settings – products and choose this page.
Search filter configuration
Search filters is one of important part for any directory site. It allows users to find what they need on your site. To make search filters, you must configure attributes on your site as described in beginning of this tutorial.
We added one of the best advanced filter plugin in our theme, which is easy to setup and use. You can read about filter plugin and it’s configuration in our docs. Mostly, configuration is pretty simple, just go to Woocommerce – Settings – Advanced filters and add some filters to your site.
One of most popular questions about filters is how to make filter’s category. The answer is simple – you don’t need to do any categories. Just assign attributes which you need for each your product. Woocommerce can detect attributes for products on category page and disable all attributes which are not in use for category. For Advanced filter plugin, you must enable option “Adoptive filtering” for this purpose. Read about adoptive filters.
Well, Rehub is not theme for something like “Places site”. We want to give you some unique functions which are not available in other themes, so, we concentrated more on reviews, products, services and not on Destination directories. But, it’s always good to have option for some functions, so, we added also Location functions via plugin Geo My WordPress.
When it can be useful? For example, if you want to assign locations to your products and let visitors to find “products near you”. Also, you can add map for your reviewed product or service, hours of work.
We provided docs about locators. In few words how it works for products. You must install plugin Geo My WordPress and enable Post locator addon and Single Location addon in Geo My WordPress – Extensions. Then, go to settings of plugin and enable Products in Post locators.
Once you do this, you will have Form inside your products where you can fill location.
Now, if you want to show location inside your products, you can assign widget Geo My WP Single Location to Woocommerce Product Sidebar area in Appearance – widgets.
Leave all settings in widget as default, the only thing which I prefer to delete – it’s product title in this line
User Frontend Submit
If you want to have site where users can submit their listings, you can use our bundled RH FRONTEND PRO plugin. You can get plugin from Rehub – Plugins section.
After installation, create form and choose to use Product in form
If you created attributes early, all of them will be automatically detected in form. Then, you can enable/disable each field in form. Some explanations:
- Excerpt field is equal to Short description field in admin panel of products
- Product options field is important. You can enable there submission of product gallery. Also, by default, woocommerce will make all products as inner (so, will be with cart). In this field you can enable External type of products which will disable cart
All other settings can be default. Also, please, read our docs about some setup for plugin in User Submit docs
Also, you can enable saving main image of product from external url
And, of course, you can have Paid listings
How to add video field?
All our products support video reviews. If you want to have the same option for users – create Custom field in form with key rh_product_video and make it as textarea field type
Theme supports youtube and vimeo for this type of video field.
How to add custom secondary buttons on Product page?
With help of our Custom Product areas you can add custom button on product page. I will give you simple example. Imagine, that you want to have button “See demo” as on many App review sites.
First of all, you must store url to demo somewhere in product. If you don’t use any special extensions for creating custom meta panels like ACF, you can easily use Custom field function of wordpress. Check right corner of admin panel and enable there Custom fields.
Now, you have custom field panel where you can add custom data. So, add custom field, for example, demo_link and add link
Next part is to add button which will show this data.
If you want to add this button in ALL products – go to Theme option – shop settings – After Button Area
Add there next code
<a href="[wpsm_custom_meta field=demo_link]" target="_blank" class="blockstyle font110 fontbold pb10 pt10 rehub-main-font rehub-main-smooth rehub-sec-color-bg text-center upper-text-trans">See demo</a>
<a href= is HTML for links.
class=”” has different classes from our theme to proper format link, so it will look like button of product. It has also special class rehub-sec-color-bg. This class will add special color of button which you can set in Theme option – Appearance – secondary color. If you want to style buton as primary color of theme, replace this class to rehub-main-color-bg.
Also, link has special getter shortcode wpsm_custom_meta. This shortcode allows to get any custom value from product. Read more about shortcode
So, after generating code, you will have next
If you want to reduce margins between buttons, use code
You can place this in theme options – general options – custom css
How to add contact form as button or how to make classified site on woocommerce
Instead of placing secondary button, you can place contact (inquiry form). This will turn your shop into classified site. So, users can post some products on your site via frontend form and buyers can contact with owners via form instead of adding product to cart on site.
Usually, it’s the same as contact button or report button. You can see how to add contact forms in link above. If you need just something like report button, follow next docs