Displaying the product category in the search results

[shubham05Participant]

Hello,

I wanted to know:

1. How do I display the product category against each search results (I have seen the guide not able to figure it out)
2. How do I add product attributes like colors and sizes in the front end filters?

Please give me a detailed answer guide, I need help.

Regards

[shubham05Participant]

In addition,

3. When I change the font size of the input field, it is not reflected.
4. How do I make all results appear as a grid on the page? Can it be done on a shop page with pre-existing grid?

[Ernest MarcinkoKeymaster]

Hi!

1. If you are reffering to product categories as results, then you can do that by adding them under the General Options -> Sources 2 panel.
2. You can do that via the taxonomy term filters – usually product attributes are taxonomies. Look for taxonomies with a pa_ prefix, like so: https://i.imgur.com/fqANZJk.png
3. I am seeing the correct font size (10px) according to the back-end. You have a minify/page cache active, the stylesheets are cached heavily. Make sure to always clear them, or turn it off until the configuration is finished, as the changes won’t reflect immediately.
4. You can either use the results shortcode, to place the results where you want them on the same page.
The results page grid may work as well, try enabling the live loader feature – it will then try to auto detect the results page and refresh the grid if possible.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[shubham05Participant]

Hi,

How do I uncache the page?

Also, by categories I mean, https://wp-dreams.com/knowledge-base/showing-the-category-titles-in-the-result-title/
This is not working.

I want the results like this:

Product name: Product category
.
Please help me, please refer to the screenshot..

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi,

You can very likely clear the page cache via the plugin options, that you are using for caching. Then refreshing the browser via the CTRL + R buttons a few times also helps.

Okay, I see what you want now. That is almos perfect, but it needs to be prefixed, this will work there:

If you want it in the title field:
{titlefield}: {__tax_product_cat}

If you want it in the description/content field:
{descriptionfield} {__tax_product_cat}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[shubham05Participant]

Hi,

Many thanks it’s working!
Can you send me the list of all such tags? like {__tax_product_cat} related to woocommerce?

Also, How do I display just the sales price?

Thanks!

[Ernest MarcinkoKeymaster]

Hi,

Well, the taxonomy names related to woocommerce are different for each installation. You can use this trick to check their names:
1. Go under the Advanced Options -> Exclude include results panel: https://i.imgur.com/hIsm1Z9.png
2. Scroll down for the Exclude by Taxonomies option, and if you click the “Choose taxonomy” select, all the taxonomies are listed: https://i.imgur.com/x1HT9tI.png
For example, if you want to use the product_tag from as seen on the screenshot, you enter {__tax_product_tag}

I think the sale price is stored within the _sale_price custom field, so this should give you that: {_sale_price}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[shubham05Participant]

{_sale_price} does not work. Please help!

[Ernest MarcinkoKeymaster]

That is really strange.

Okay, so since you added log-in details, I help you out a bit with a customization. Instead of the sale price, I have added the following to the advanced description field:

<div class='product price'>
{_price}
</div>

..and also, this custom CSS to style the prices a bit:

.product.price {
    color: #333;
    font-weight: bold;
}

.product.price del {
    color: inherit;
    opacity: .5;
    display: inline-block;
    text-decoration: line-through;
    font-weight: normal;
}

Now it should be displayed something like this: https://i.imgur.com/dk07oX3.png

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[shubham05Participant]

Highly appreciated, but there is an issue that on the mobile… the strikeout is not seen. Any solution to that? In case no solution… How can I only display the sale price and NOT the regular price as without the strike it is confusing…

http://prntscr.com/qrya02

Also, can I make this search bar off-canvas?

[Ernest MarcinkoKeymaster]

Hi,

Sure, that is not a problem, I have changed the custom CSS to this:

.product.price {
    color: #333;
    font-weight: bold;
}

.product.price del {
    color: inherit;
    opacity: .5;
    display: inline-block;
    text-decoration: line-through !important;
    font-weight: normal;
}

That should force the strike-through text.

What do you mean by “off-canvas”?

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[shubham05Participant]

Thank you!

By off-canvas I mean this . On the click of the search button, a lightbox powered search opens up which is very good looking and powerful.

Please visit http://shubhamgupta.16mb.com/ to try on your end. Can I do this with AJAX Search Pro?

[Ernest MarcinkoKeymaster]

Hi,

That is not possible with this plugin. It mgiht be doable via a custom lightbox or popup solution though. Some page builders have that feature, in case you are using one.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts