Home › Forums › Themes Support › Claue › Adding Filter to my product categories pages
- This topic has 69 replies, 2 voices, and was last updated 4 years, 7 months ago by Harry.
-
AuthorPosts
-
-
June 24, 2019 at 11:02 pm #32005gnikolaev11Support Expired
Hi,
I am trying to add the filter option to my product pages but it does not appear.
I will attach screenshot for what I mean. I have enabled the filter everywhere but it still doesnt appear.
The site is http://www.gedorra.comThe screenshot is from my site’s main shop page and I want it to be the same way for every product page I have.
Please tell me how to do that. Thanks -
June 25, 2019 at 6:03 am #32009HarrySupport Expired
Hi Gnikolaev,
Please go to Appearance > Widgets > WooCommerce Filter Sidebar and add YITH Ajax Filter widget to this sidebar area.
If issue still there, please send us your site url and login credentials and check in “Set as private reply”. Our team will check and help you solve problem.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 25, 2019 at 8:45 pm #32014gnikolaev11Support ExpiredThis reply has been marked as private.
-
June 25, 2019 at 9:46 pm #32015HarrySupport Expired
Hi,
Sorry because miss understood. The filter only show on shop page and category page. It doesn’t show on single product page because it only one product it can’t query to filter other product.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 25, 2019 at 9:47 pm #32016gnikolaev11Support Expired
Where did I tell you I want it on a product page? I said “Product categories pages” Meaning when you click on the “Dresses” category I want to see the filter so i can filter my products.
-
June 25, 2019 at 9:51 pm #32017HarrySupport Expired
Can you send me the link of dress category.
The filter sidebar will show if category has more than 2 variable products. If the category has only one product the filter will not show.
And the filter also doesn’t show on custom page.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 25, 2019 at 9:55 pm #32018gnikolaev11Support Expired
Listen, you are the support, I want filter on my product pages like its in the theme demo you stated.
https://gedorra.com/nai-prodavani/
Here is a link, there are many variable products there and filter doesnt appear. -
June 25, 2019 at 9:58 pm #32019HarrySupport Expired
Hi,
As i told you the filter doesn’t support custom page it only show on category page like this https://gedorra.com/product-category/drehi/rokli/
https://gedorra.com/product-category/drehi/aksesoari/These pages generated by WooCommerce in Dashboard > Products > Categories not pages in Pages built by WPBakery PageBuilder.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 25, 2019 at 10:05 pm #32020gnikolaev11Support Expired
Yes I got that but I can’t find that categories in the menu when I want to build my navigation do you know why? You see I have categories created but non of them appears when I want to add them to the main menu of the site.
-
June 25, 2019 at 10:08 pm #32021HarrySupport Expired
Please follow this video to add product category to menu https://www.youtube.com/watch?v=cdkCSls-9s4&list=UUMDvyPJs20jwKoFIO4XUF6w&index=19
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 25, 2019 at 10:31 pm #32024gnikolaev11Support Expired
Thanks for the help mate! I have some other requests and questions, should I ask here for them or? If yes, I will go one by one. First is how can I increase the icons in the header size (social icons,search icon etc) and how can I decrease the space between phone number and logo. I will attach screenshot. Thanks
Attachments:
You must be logged in to view attached files. -
June 25, 2019 at 10:39 pm #32027HarrySupport Expired
Hi,
Please add below code to Claue > Theme Option > General Layout > Custom CSS
.jas-social i { font-size: 20px; } .jas-action i { font-size: 28px; } .header__top { padding: 5px 15px 0; } .header-text h6 {margin-bottom: 0;}
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 25, 2019 at 10:58 pm #32028gnikolaev11Support Expired
I set the padding to “0” for the top bar but still there is some space? Also please look at the screenshot. The phone number appears but the text before doesnt.
Attachments:
You must be logged in to view attached files. -
June 25, 2019 at 11:02 pm #32030HarrySupport Expired
Hi,
Please remove h6 wrap promo text or add below code
.header-text h6 {margin-bottom: 0; color: #ffe9de;} .header__mid .jas-row {padding-top: 0;}
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 25, 2019 at 11:03 pm #32031gnikolaev11Support Expired
I set the h6 as the letters were to small, if there is other way to increase their size please tell me 🙂
-
June 25, 2019 at 11:05 pm #32032HarrySupport Expired
To increase font size please use below code
.header-text {font-size: 16px;}
Regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 25, 2019 at 11:10 pm #32033gnikolaev11Support Expired
Thanks you are great!
Moving on to the next thing. When I open any product, variations are previously selected. Please tell me how to fix that. I have attached a screenshot.Attachments:
You must be logged in to view attached files. -
June 25, 2019 at 11:45 pm #32035HarrySupport Expired
Please edit product and change default value like this http://prntscr.com/o6jdkf
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 26, 2019 at 3:34 am #32036gnikolaev11Support Expired
Thanks. Next thing I want to ask about is the checkout page. Is there a way to customize it as I want to change a couple of things there. I want to change the way things are positioned and also I will attach a screenshot with the 2 blue fields that appear. Can we remove the blue and for the coupon code field to only leave the grey field and remove the blue one and put it on the bottom of the page.
Attachments:
You must be logged in to view attached files. -
June 26, 2019 at 9:10 am #32038HarrySupport Expired
Hi,
I’m sorry. For this case it can’t because it need click to text to show grey field. By default the grey field hidden.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 26, 2019 at 4:15 pm #32039gnikolaev11Support Expired
Why? Isnt that page built by you? So there should be a way to fix that. Isnt there a way to build a whole new checkout page as this one is no good for me. Everything is messed up and because of these blue fields it becomes extremely long.
-
June 26, 2019 at 6:35 pm #32040HarrySupport Expired
Hi,
These fields generate by plugin WooCommerce not our theme.
You can remove 2 fields by add below code to claue-child > functions.php
add_action( 'wp_head', 'customize_checkout_page' ); function customize_checkout_page(){ remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 ); remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 ); }
but can’t move grey form to bottom.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 26, 2019 at 6:36 pm #32041gnikolaev11Support Expired
Okay but cant I create a whole new checkout page with some plugin and mark it as the checkout page in woocommerce settings?
-
June 26, 2019 at 9:22 pm #32042HarrySupport Expired
It doesn’t have plugin to you create new page and assign as checkout page. It only have plugin to customize fields of address.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 26, 2019 at 9:26 pm #32043gnikolaev11Support Expired
Well I cannot understand. That checkout page is created by you. Thats not a default woocommerce page so why arent we able to change the checkout layout when I dont like it ? it doesnt suit my suit in any way possible. 1 checkbox is big, 1 is small is super random.
-
June 26, 2019 at 11:03 pm #32047HarrySupport Expired
Hi,
You mean the sample content. The sample content create by us but the page layout use only code [woocommerce_checkout] and it generate checkout page. It is required and default of WooCommerce.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 27, 2019 at 9:03 pm #32066gnikolaev11Support Expired
Okay. Moving on to the next things.
1.Why when I hover over products it says “Options” but not “Add to cart” ( screenshot attached)
2.Why sizes in my filter are L,M,S instead of S,M,L when I have set the order to be S,M,L (screenshot attached)
3.Why one product’s photo flips when hovering and other don’t its random. I want all images to flip to second one when hovering ( screenshot attached)
4.On mobile the “Add to cart” button goes out of the button area and looks bad (screenshot attached)
5.Also on mobile, the newsletter in the footer button looks strange as it is not alligned with the box.( screenshot attached)
6.On mobile when you open a category , all of the categories appear under the main menu. When sliding these categories they dont stop with the last categories but keep on sliding for infinity which is not good as there is just a white field left.(screenshot attached).
Attachments:
You must be logged in to view attached files. -
June 27, 2019 at 11:31 pm #32076HarrySupport Expired
Hi,
1. Because your product have more variations so user need select variation before add to cart. If your product is simple product it will show add to cart button.
2. Please go to Product > Attributes > Size > Config Term and drag to re-order http://prntscr.com/o7izvw
3. Please upload the image you want so on hover in 1st in product gallery
4,5,6. Please add below code to Claue > Theme Option > General Layout > Custom CSS
.signup-newsletter-form input.input-text { width: calc(100% - 130px); } @media only screen and (max-width: 1024px) { .product-image .product-btn .button { display: block; } .yith-wcwl-add-to-wishlist ~ .product-btn { top: 40% !important; left: 50%; transform: translate3d(-50%, -50%, 0); } .btn-quickview::after { left: 9px; top: -7px; } } @media only screen and (max-width: 736px) { .shop-top-sidebar .woocommerce { min-width: 550px; }}
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 28, 2019 at 1:14 am #32089gnikolaev11Support Expired
1.I have arranged the sizes just like that but still appear in reverse order ( You can see screenshot attached)
2.Add to cart button problem still remains after I pasted the code. ( You can see it bellow too)
3.There is some problem on mobile, the “Options” button appears over the image withouth hovering and just stays there and the “quick view” button cannot be even seen. I want it to be like on the pc version. To appear when hovering. Idk why that happens.( See screenshot)
ThanksAttachments:
You must be logged in to view attached files. -
June 28, 2019 at 7:01 pm #32105HarrySupport Expired
Hi,
1. Please go to Yith plugin > Ajax Filter and follow this screenshot http://prntscr.com/o7vrfu
2. Please change prev code to
.signup-newsletter-form input.input-text { width: calc(100% - 130px); } @media only screen and (max-width: 1024px) { .product-image .product-btn .button { display: block; } .yith-wcwl-add-to-wishlist ~ .product-btn { top: 40% !important; left: 50%; transform: translate3d(-50%, -50%, 0); } .btn-quickview::after { left: -27px; top: 7px; } } @media only screen and (max-width: 736px) { .shop-top-sidebar .woocommerce { min-width: 550px; }} @media only screen and (max-width: 480px) { form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button { width: calc(100% - 165px); font-size: 12px; padding: 0 15px; }}
3. I’m sorry on mobile it support hover not good for all device some device it work some device it not work, so we show button not on hover.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 29, 2019 at 5:26 am #32117gnikolaev11Support Expired
So what should I do about number 3 I mean the “Quick Look” option cannot even be seen and the product photos cannot be seen from that “Options” button.
-
June 29, 2019 at 5:49 am #32118gnikolaev11Support Expired
It wasnt like that before man I mean before only the wishlist and eye icons appeared and the buttons didnt. How isnt there a way for the buttons to appear on hover I mean thats one of the functions I liked the most and choosed the theme for in the first place and now I cannot use it?
-
June 29, 2019 at 10:47 am #32120HarrySupport Expired
Hi,
Please change prev code to
.signup-newsletter-form input.input-text { width: calc(100% - 130px); } @media only screen and (max-width: 1024px) { .product-image .product-btn .button { display: block; } .yith-wcwl-add-to-wishlist ~ .product-btn { top: 50% !important; left: 50%; transform: translate3d(-50%, -50%, 0); } .btn-quickview::after { display: none; } .btn-quickview { text-indent: 0; background: #fff; border: none; padding: 0; font-size: 13px; } } @media only screen and (max-width: 736px) { .shop-top-sidebar .woocommerce { min-width: 550px; }} @media only screen and (max-width: 480px) { form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button { width: calc(100% - 165px); font-size: 12px; padding: 0 15px; }}
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 29, 2019 at 6:51 pm #32128gnikolaev11Support Expired
Thats not good at all mate I mean you cant even see the product from the buttons. If you cannot make it to happen on hover I prefer only having the wishlist heart and eye icon as now you cant see the product at all.
-
June 29, 2019 at 10:25 pm #32132HarrySupport Expired
If you want revert like original please change prev code to
.signup-newsletter-form input.input-text { width: calc(100% - 130px); } @media only screen and (max-width: 736px) { .shop-top-sidebar .woocommerce { min-width: 550px; }} @media only screen and (max-width: 480px) { form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button { width: calc(100% - 165px); font-size: 12px; padding: 0 15px; }}
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
June 29, 2019 at 10:30 pm #32133gnikolaev11Support Expired
Okay thanks. I want to ask can we put a button under the product’s price, like add to cart button which i can then translate in my language so there can be a call to action button. Also please tell me how can I change the background color of the menu on mobile and the background of the cart page which appears on the side, right after you add a product to the cart. Now the color is white but I want it to be #ffe9de
-
June 30, 2019 at 11:38 am #32142HarrySupport Expired
Hi,
1. Please follow this topic to move button under price http://support.janstudio.net/forums/topic/down-the-add-to-cart-and-quick-view-products/
2. You can change the text by go to Loco > plugins > woocommerce
3. Please add below code to claue > theme option > general layout > custom CSS
.jas-push-menu { background: #ffe9de; }
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
July 5, 2019 at 11:39 pm #32287gnikolaev11Support Expired
Thanks! Is there something we can do about the loading after checkout is done? Now there is just a white window that appears and you have to wait but it seems confusing as it stays with no indication that anything happens.
Also the instagram images appear with bad quality on mobile, can we do something about that too? Thanks -
July 6, 2019 at 3:46 am #32295HarrySupport Expired
Hi,
1. please try this plugin https://wordpress.org/plugins/yith-custom-thank-you-page-for-woocommerce/
2. Please edit file instagram.php in plugins > claue-addons > includes > shortcodes and change code of line 53
SlidesToShow: 2
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
July 8, 2019 at 8:02 pm #32358gnikolaev11Support Expired
The images buttons appear once again on mobile and it looks bad. You can see in the screenshot.
Attachments:
You must be logged in to view attached files. -
July 8, 2019 at 9:44 pm #32360HarrySupport Expired
I still see the code in Theme Option > General Layout > Custom CSS
Please remove the code below
.product-image .product-btn .button { display: block; }
Regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
August 21, 2019 at 10:39 pm #33267gnikolaev11Support Expired
The problem still persists. You can see screenshot. Also in the screenshot I want to know how can I remove the categories heading picture before the products.Ive circled it too.
Attachments:
You must be logged in to view attached files. -
August 22, 2019 at 9:24 am #33271HarrySupport Expired
Hi,
1. please edit the code you add
.btn-quickview {
text-indent: inherit;
}to
@media only screen and (max-width: 1024px) { .btn-quickview { text-indent: -999em; } .product-image .product-btn .button { display: block; left: 50%; transform: translateX(-50%); }}
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
August 27, 2019 at 1:13 am #33322gnikolaev11Support Expired
Please look at the problem seriously I edit it for the 5th time and it still is broken.You can enter the site from mobile and see
-
August 27, 2019 at 1:27 am #33323gnikolaev11Support Expired
Also I want to try how a transparent header will look and I enable that but nothing happens.
-
August 27, 2019 at 10:09 am #33325HarrySupport Expired
Hi,
1.My screen on my phone it work well
2. Please add below code to make header transparent work.
@media only screen and (min-width: 1025px) { .home #jas-content { margin-top: -173px;}}
Kind regards
Attachments:
You must be logged in to view attached files.Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
September 5, 2019 at 7:58 pm #33450gnikolaev11Support Expired
1, That code didnt make the header transparent.
2.See screenshot to see the mobile version. The options button still appears.Attachments:
You must be logged in to view attached files. -
September 5, 2019 at 8:27 pm #33452gnikolaev11Support Expired
I just want the hover on products to be like it was in the beggining like its on the original theme Claue
-
September 5, 2019 at 11:18 pm #33458HarrySupport Expired
Hi,
1. It issue because you have redundant code you did before, i removed and it now work
2. I make it work on your site.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
September 5, 2019 at 11:22 pm #33461gnikolaev11Support Expired
Okay thanks, A few more things.
1.Can we remove the white line that appears in the header now?
2.Can we make the header transparent for mobile too?
3.When hovering on a product, the options button still appears and it seems to be left aligned.Please remove it or tell me how to. -
September 5, 2019 at 11:49 pm #33465HarrySupport Expired
1,2. Please add below code to Custom CSS
.home .header__bot .jas-navigation {
border-top: none;
}@media only screen and (max-width: 1024px) {
.home #jas-content { margin-top: -101px;}
}3. I fixed on your site.
Regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
September 6, 2019 at 5:22 am #33469gnikolaev11Support Expired
Mobile is still not transparent and the top bar is now missing.
Please see screenshot for the missing top barAttachments:
You must be logged in to view attached files. -
September 6, 2019 at 5:26 am #33471gnikolaev11Support Expired
Please look at all of the custom css codes and see if there is any unnecessary as we did a lot of edits and some may have left.Thanks
-
September 6, 2019 at 5:29 am #33472gnikolaev11Support Expired
As far as I can see you just made the banner cover the header with the -173 margin-top and that way when the page loads I firstly see the pink header and then it becomes transparent and it cannot be like that.
-
September 6, 2019 at 8:46 am #33473HarrySupport Expired
Hi,
I see you did not add code for mobile. I changed the code t see top bar on desktop and mobile.
The site need time to load
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
September 6, 2019 at 8:38 pm #33481gnikolaev11Support Expired
Okay,
Please see screenshot that I have attached. How exactly can I do that. WHat is the section that I have to add from the editor to make it like that and also the timer. ThanksAttachments:
You must be logged in to view attached files. -
September 6, 2019 at 10:02 pm #33483gnikolaev11Support Expired
Also please see attached video and see what happens when I refresh the home page.
Attachments:
You must be logged in to view attached files. -
September 6, 2019 at 11:00 pm #33485HarrySupport Expired
Hi,
1. Please add row with 3 columns with 2 “promotion banner” and “product” element and choose sale product https://prnt.sc/p2qmkj for product element please check in “Enable countdown for sale product” https://prnt.sc/p2qntv and set schedule sale for product https://prnt.sc/p2qomz
2. I’m sorry please try optimize image at https://tinypng.com/ the image have big capacity and always need more time to load than text and other content. Please go to Claue > Theme Option > General Layout > Enable Preload.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
September 6, 2019 at 11:09 pm #33486gnikolaev11Support Expired
2.That didnt work, I optimized it and it still happens.It seems like the previous pink header appears and then the transparent appears.
-
September 7, 2019 at 8:25 am #33493HarrySupport Expired
I’m sorry the image always need more time to load than other content so can’t get rid of it.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
September 7, 2019 at 9:15 pm #33505gnikolaev11Support Expired
So why wasnt it like that before and it is like that now? I optimized the images and its the same and I dont think the problem is the image but the transparent header. When reloading you can see the previous pink header not the image appearing.
-
September 8, 2019 at 9:55 pm #33509HarrySupport Expired
If use don’t use header transparent the header still place in its position, when you enable header transparent, the content will show under header so you see the effect.
Regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
September 8, 2019 at 9:57 pm #33510gnikolaev11Support Expired
Is that your solution? Its your theme and you should fix that to be honest. Your solution is “just dont use header transparent” well I want to use it but dont want to see the old header under it. Thats something easy to do for sure I have never seen that happen with other themes.
-
September 9, 2019 at 6:01 pm #33515HarrySupport Expired
Please try add new more code
.home #jas-header {height: 0; position: relative;}
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
September 10, 2019 at 5:25 am #33518gnikolaev11Support Expired
That did not change anything unfortunately.
-
September 12, 2019 at 8:25 pm #33548gnikolaev11Support Expired
????
-
September 18, 2019 at 12:08 am #33604gnikolaev11Support Expired
Will you please answer? I have paid to have support and get no answer..
-
September 18, 2019 at 7:56 pm #33622HarrySupport Expired
Hi,
Sorry for late reply.
We search solution and now we make header load slower than other element on your site. Please check and let me know.
Kind regards
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio -
September 19, 2019 at 10:29 pm #33666gnikolaev11Support Expired
You made it even worse…Why would I need the header to load slower then the other things? Do you even see how it looks when you do it? Please reverse as it was before you did that change.
-
September 19, 2019 at 11:32 pm #33667HarrySupport Expired
Sorry. I reverted to default.
Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio
-
-
AuthorPosts
You must be logged in to reply to this topic.