Quick Shop and Select Options Buttons Remove or Rename

[Sgmonster]

Hello:

I think the Quick Shop button and the Select Options button are confusing and annoying.

1. They cover up the entire hover image.  How can we fix this? Maybe the opacity needs to be changed.  Or we don’t need the buttons.  There should be an eyeball image for Quick Shop.
2.   Quick Shop should be renamed Quick View.   I don’t think Quick Shop is easily understood and confusing.
3.  ‘Select Options’ is also confusing.  It should be “Buy Now” don’t you think?

I believe these are very important changes that need to be made.  This is probably what it should look like: https://shoes.oceanwp.org/

thank you,

Tom

[Harry]

Hi Tom,

1. If you want hide button, please go to Claue > Theme Option > WooCommerce > Product Listing Setting to Turn Off button

2. If you want change text, please install Loco Translate plugin http://support.janstudio.net/forums/topic/theme-translation/ and change text in Loco > Themes > Claue > create new language English-US > find the string “Quick Shop”

If your product is simple product it show the text “Add to cart” and if your product is variable product it will show the text “Select Option”. And if you want change text please go to Loco > Plugin > WooCommerce > Create new language > English-US find string to change.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

Hello Harry:

How do we activate the Quick View for each product?

thank you very much, Tom.  469 235 4185

[Harry]

Hi Tom,

I’m sorry not have option to enable quickview for each product. It only support for enable quickview for all or not.

Btw, your support expired. Could you please renew your support at https://themeforest.net/downloads

Thanks and regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

Thanks.  for bikershades.com how do we activate the Quickview?  I believe we turned it off at one point in time.

I activated it here, but it the Quickview boxes still do not appear:  Claue > Theme Option > WooCommerce > Product Listing Setting

Here is all the CSS code we have inputted so far:

.result-count-order {
padding: 0 20px;
}
.filter-trigger:after {
content: ‘CLICK HERE TO FILTER’;
margin-left: 25px;
}
.product_meta {display: none;}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min—moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .regular-logo { display: block; } .retina-logo { display: none; } }

@media only screen and (max-width: 800px) { .jas-branding { display: none;}}
.additional_information_tab, #tab-additional_information {
display: none !important;
}

@media only screen and (max-width: 800px) {
.wp-caption {
width: 100% !important;
}
}
.quickview-button {bottom: -10px; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: all 0.1s;}
.product-image:hover .quickview-button {bottom: 0; opacity: 1; visibility: visible;}
.quickview-button a { background: #f2f2f2; transition: all 0.3s}
.product-btn .btn-quickview {
display: none;
}
.btn-quickview {
margin: 0;
padding: 0;
}
.quickview-button {
z-index: 99;
}
.page-head::before {
background: rgba(0, 0, 0, 0.4);
}
}
@media only screen and (min-width: 320px) {
.page-head {
padding: 20px 0;
}}

@media only screen and (min-width: 768px) {
.page-head {
padding: 50px 0;
}}

@media only screen and (min-width: 1280px) {
.page-head {
padding: 90px 0;
}}
@media only screen and (min-width: 1440px) {
.page-head {
padding: 140px 0;
}}
#shipping_method li input {
margin: 0 3px 0 0;
}
.page-head::before {
background: none;
}

 

[Harry]

Hi Tom,

Please remove the code to put back quickview button

.product-btn .btn-quickview {
display: none;
}

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

Thank you Harry.

The format on this sample site seems to be the latest way to have quick view and Add to cart.  https://shoes.oceanwp.org/
Do you think this will ever be changed to this format?   It is a lot cleaner look.

 

[Harry]

Hi,

I think Add To Cart button is clear for user but quickview not clear, the user don’t know what button mean.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

test

[Sgmonster]

Hello Harry:

Thanks.  Removing the “Select Options” is a good option, but doesn’t solve everything.

1.  The “Quick Shop” is too big and covers most of the hover product image.
2. There are two methods to display the “quick Shop” button so that it does not cover the hover image:
   1. Create the button at the bottom of the product image.  See: https://www.express.com/mens-clothing/shirts/cat410008   or https://www.sunglasswarehouse.com/mens-aviator-sunglasses.html
   2. Use an ‘eyeball’ icon.  This is quite common now: https://shoes.oceanwp.org/

      So, is it possible to change how you display the “Quick Shop” button.

3.  One thing that is not good about the quick shop button is the fact that videos do not show up in the Quick Shop window.

Also, is there  a way to remove the the ‘variations’ text on the bottom of the product image?  See attached image.

Thank you.  I look forward to your reply

Tom

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Sgmonter,

2. Please add below code to Claue > Theme Option > General Layout > Custom CSS to change quick shop button to eye icon

.quickview-button {top: 30px; left: 10px;}
.quickview-button a i {font-size: 24px; color: #878787;}
.quickview-button a:hover {background: none;}
.product-image .yith-wcwl-add-button a {
	opacity: 1;
	visibility: visible;
	color: #878787;
}
.product-btn .btn-quickview {
	display: none;
}
.btn-quickview  {
	background: none;
	margin: 0;
	padding: 0;
}

and download attach file, extract and put in claue-child > woocommerce

3. Please go to Claue > Theme Option > WooCommerce > Product Listing Settings > Enable Products Attribute On Product List and uncheck all variations.

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

[Sgmonster]

Hello: we followed the instructions, and unfortunately, the eye ball is not showing up. Is it possible to change the Quick Shop (which we will rename Quick View) button to the bottom of the product image? This is also a very clean way to display the button, and easier to click for customer. See example: https://www.express.com/mens-clothing/shirts/cat410008

[Harry]

Hi,

Did you activate child theme? Could you please send me login credentials and check in “Set as private reply” to check.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

This reply has been marked as private.

[Sgmonster]

So, are you able to put the Quick View at the bottom of the product image as a rectangle instead?  I noticed this on the Gecko, but its Quick Shop which is a bit different.

I also noticed these features on Gecko that I like.  Can these be added to Claue?
– timers
– Who bought recently pop in at bottom
– badges on checkout.
-% to free shipping
– # of visitors on site

thanks,

Tom

[Harry]

Hi Tom,

I see the version of theme on your site outdated. Please follow this topic to update theme http://support.janstudio.net/forums/topic/updating-the-theme/

1. Please download new attach file and put in claue-child > woocommerce

And add new code to Claue > Theme Option > General Layout > Custom CSS not use old code

.quickview-button {bottom: -10px; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: all 0.1s;}
.product-image:hover .quickview-button {bottom: 0; opacity: 1; visibility: visible;}
.quickview-button a { background: #f2f2f2; transition: all 0.3s}
.product-btn .btn-quickview {
	display: none;
}
.btn-quickview  {
	margin: 0;
	padding: 0;
}

2. The features you said in Shopify version not on WooCommerce.

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

[Sgmonster]

Hi, I followed the instruction,

activated claue child

Put the contents into woocommerce (am i doing this correctly ?)

and paste the code you gave me but it still does not apply properly.

The child theme is 1.00 and claue is 1.6.3 (current version?)

do I need to update the child theme also ?

[Harry]

Hi,

You don’t need to update child theme. I clear cache on your site and it now working https://prnt.sc/qoufri

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

Hi Harry,

I see the button but when you click on it, it would almost always going to the product page. I rarely get the small popup like quick shop supposed to be. I tried to purge the cache again and delete cache on my browser too. Could you take a look again ?

Thank you.

[Harry]

Hi,

please add more code

.quickview-button {
	z-index: 99;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

that worked very well. Thank you very much.

[Sgmonster]

<h4>Hello Harry:</h4>
<h4>I am trying to find a plug in that will add a Quick View window to our site.</h4>
<h4>Do you have a plug in that you can recommend that would work?</h4>
<h4>I tried several, but the Quick View button does not show up.</h4>
<h4>Thank you,</h4>
<h4>Tom Shiao</h4>

[Harry]

Hi Tom,

It now the QuickShop button on your site is QuickView and it still work well

I don’t know what Quick View you want to use.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts