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
Managing specifications
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
Product Layouts
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.
Configuring Login/Register
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.
Adding Locations
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
.post p.cart{margin-bottom:10px}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.
Check how to turn your woocommerce to classified site
Claim listing
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
Thanks for the updated guidance.
Are you updating one of the demos to show a woocommerce directory site? I am looking at using WooCommerce for product reviews and place listings, so it would be good to see how to separate the global attribute filters, etc.
yes, it must be on this week
What would you suggest to implement a ‘Claim Listing’ feature?
It’s the same as we wrote in end of article. I added small update now
Another question on Claim Listing…
1) A person fills in the form to claim a listing.
2) I verify the person is an owner, create them an account, and assign them as the author for that product listing.
However, how do I assign that person so that the RH Front End post list will include that product listing?
Thanks,
Gav
if you use shortcode [wpfepp_post_table form=”3″ show_all=0] form will show posts only which are submitted from form. Delete show_all=0 and it will show all posts of user. You can assign user as author of post in Posts – all posts
OK, two more questions 🙂
1) Can I create different forms for different types of product listings? For example, a form for Restaurants and another for Hotels? When I remove show_all=0 it displays all listings for both types.
2) When migrating over my existing listings, is there a custom field I need to set to associate them with a front end form?
Thanks.
I will try to explain. User can be author of post. So, when user post something from form (no matter which form or plugin), he will be author of post.
When you delete show=0 – it will show all posts of user.
Each form also adds some specific data to post. In this way, plugin will know that post was created with specific form and it will be used if user edit it. There is specific key for this, but why do you need to assign them?
I already have lots of listings that I want to convert to product listings and use RH Front End forms. So I’d like to associate those existing posts to those forms without having to re-enter the listing data.
You can simply add product without cart by Empty the “Regular Price” field 😉
I came to this article because many pages on Rehub theme documentation related to filtering function (MDTF plugin) link to it, stating that the Theme documentation is “outdated”.
Since I don’t use Woocomerce on my site, can’t I still use the outdated guides on Rehub theme documentation? Or is there any ajor disadvantage of using the old tutorials on Rehub?
Thank you
Yes, you can use. All old functions will work as early
There is still one thing I don’t understand. On the Rehub 9.0 critical update notification, you say that comparison button for posts were removed. The recommendation is to use woocomerce. But I can’t find anywhere on theme documentation (and I have already read everything related to woocomerce) the way I could build something comparable to “choose products for comparison” – and I am not meaning filtering function (I use top charts constructor page template to show comparison results).
Hi Guilherme,
I have all my reviews as Woocommerce products. You can see one here: https://www.getoutwiththekids.co.uk/reviews/coleman-mackenzie-6-tent/
In the sidebar you can see ‘add to compare’. Click that and the comparison comes up.
‘Add to compare’ appears as icons and buttons in a number of places, such as where your reviews are listed, so people can easily add them to the compare page.
At the top of the screen is the comparison set icon. If you click on that you can see all the products in your comparison set.
It works really well.
All you have to do is enable the dynamic comparison in the theme options and create a page with a shortcode to hold the comparison results.
http://rehubdocs.wpsoul.com/docs/rehub-theme/shop-options-woo-edd/dynamic-quick-comparison/
Hope that helps.
Hi Gav,
Thank you for your reply. Now it is clear to me that I have to convert all my posts to Woocommerce products in order to allow “add to compare” button on Rehub version 9.0 (it will be a lot of work, since I was using MDTF to generate custom meta fields).
I see in your site that you used top charts constructor template to show the comparison chart (the same template I use on my site running Rehub 8.6).
However, the link for Rehub documentation (regarding dynamic comparison) on your message states that this page template for showing the comparison result (chart constructor) should not be used (text within the red box in your link). How did you make that work for your site?
Thank you in advance for this additional (and final) clarification. It would be of immense help for me.
Regards
Guilherme
That page with the comparison is just a normal page with a short code so it’s not using the page template.
When I converted my posts to products I used a plugin to convert the post type. It’s still a lot of work but this made it easier as not only the content was kept but the redirects from the old url too.
How to add Author Bio section in the blog?
Theme option – global enable/disable
Hi, I am unable to add the Author Bio section in the blog? please help. even i have no idea whether my theme is support this option or not.
in Rehub – theme option – global enable\disable
Hi sir,
I am unable to find out the global enable/disable options for author bio widget.
Hi there, I am unable to add the author bio section in the blog, can you help me to do
You can write to our support if you have our theme
Hi I want a user rated affiliate products listing website with rehub. Is it possible.
Example: Best Hosting Companies or Best Ip Battery Powered IP Cameras
It’s possible. Check our latest demo https://reviewit.wpsoul.net/
Thanks but I cant see upvote function.
vote functions is available on some post layouts. It’s disabled on reviewit because it has user ratings instead
This error comes to you when I write a comment on this page. get your information
Notice: Trying to get property of non-object in /home/lookmetr/domains/wpsoul.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 717
Warning: Cannot modify header information – headers already sent by (output started at /home/lookmetr/domains/wpsoul.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php:717) in /home/lookmetr/domains/wpsoul.com/public_html/wp-includes/comment.php on line 575
Hi, I need to show on the homepage 2 classified directories: one with Popular Categories of the shop, second one with Industries (featured attribute for each product showing the targeted industry). Is there such a template included with the theme? Thank you!
Please, write to support of theme if you have question about it