Return to previous page

Transparent quick view screen & border of a section

This topic has 19 replies, 4 voices, and was last updated 4 years, 7 months ago ago by Olga Barlow

Advi Care

Participant

March 30, 2020 at 06:09

Hi,
1) Can you please help to check on the section Featured product on page https://advicareonline.com/. On the featured product section, when I select a quick view, the quick view screen seems to be transparent where I am unable to read the description on it. I tried to look at the setting for quick view but I am unable to find any setting for same.
2) I like to have a hover over effect of green border on “Hand hygiene techniques section same as that of section below featured product which comes with a demo site.
I tried to copy the settings but it is not working as expected.

Appreciate if you can tell me the exact steps for same.

Please, contact administrator
for this information.

#232134 Copied Theme version: Version 2.2.3 WooCommerce version: Version 4.0.0

18 Answers
Olga Barlow

Support staff

March 30, 2020 at 19:57
Hello,

1) We have added the following custom CSS to child theme style CSS
```
.quick-view-popup {
    background-color: #d9f1e0;
}
```
2) Add the white border for the row http://prntscr.com/rpnve3 + custom class for the green border on hover http://prntscr.com/rpnw8f

Regards
#232188 Copied
Advi Care

Participant

March 31, 2020 at 02:49

Thanks,
on first point I can still see the same issue on site. Can you please help to check on same.

#232210 Copied
John Holden

Support staff

March 31, 2020 at 06:28
Hi,

Try below code
```
.quick-view-popup {
    background-color: #d9f1e0 !important;
}
```
Regards,
Hung PD
#232219 Copied
Advi Care

Participant

March 31, 2020 at 07:05

Thanks,
In first reply you said you have updated the code already? Can you help me to add this updated code and check if its working. I am not familiar with coding please.
Thanks in advance!!

#232224 Copied

Olga Barlow

Support staff

March 31, 2020 at 11:03

Hello,

Check now.

Regards

#232236 Copied

Advi Care

Participant

April 3, 2020 at 15:56

Thanks,
I am facing another problem in the section. How can I have a product layout same as the special product section of the demo site – https://xstore.8theme.com/demos/cosmetics/
I downloaded this demo and tried to copy same for the site I am building using organic cosmetic demo. I like to have a product layout on main page same as Special Product section of the cosmetic demo site. Can you please help me in same.

Please contact administrator
for this information.

#232539 Copied

Olga Barlow

Support staff

April 3, 2020 at 16:46

Hello,

As I can see you have already chosen the list type for the product http://prntscr.com/rsefh5
We used the same at the Cosmetics demo.
Is there anything else I can help you with?

Regards

#232544 Copied

Advi Care

Participant

April 4, 2020 at 01:10

Yes, you have a proper gap in the list of products where I am unable to get the same. Also how do you add a “add to favorite” symbol on the product image on hover?

#232582 Copied

Advi Care

Participant

April 4, 2020 at 01:39

Also the quick view window is opening very small where it is not an ideal window size that I see on all demo sizes. The height of two rows of products should be same as that of image (on left) in the same row. Does this require a CSS code, if yes can you please help me with same.

#232583 Copied

Rose Tyler

Support staff

April 4, 2020 at 07:51

Hello,

1) Please describe the desired result in more detail with screenshots.
Lightshot Screenshot tool https://app.prntscr.com/en/index.html makes screenshots and generates links then you can provide links of screenshots here.
2) You need to install and activate Wishlist plugin (Appearance > Install plugins) https://www.8theme.com/documentation/xstore/plugins/wishlist/
3) Theme Options > WooCommerce (Shop) > Shop elements > Quick view

Regards

#232591 Copied

Advi Care

Participant

April 5, 2020 at 16:44

Please refer to screen print here https://prnt.sc/rthz4c
I liek to have the height of products same as the image on the left side of the products.

Also as in this screen print https://prnt.sc/rthzvs
The color of selected tab and non selected tab need to be different. By default the tab which is not selected is been highlighted which is bit confusing. How can I have the different color for the non selected and selected tab. Thanks in advance!

#232685 Copied

Olga Barlow

Support staff

April 6, 2020 at 11:36

Hello,

1) Dimensions of the one image are 2560 × 1920, dimensions of the other – 2560 × 1973. That’s why height is different. Either crop images to the same dimensions using any graphic editor before uploading them to your media or use the crop option for the grid images only at the Appearance > Customize > WooCommerce > Product Images, for example http://prntscr.com/rtzdz1

2) Use the Massive addons tabs element http://prntscr.com/rtzgkw if you want to get more options for the tab design customization https://massive.mpcthemes.net/tabs/ Default WPBakery tabs element does no have any additional options to manage this.

Regards

#232717 Copied

Advi Care

Participant

April 6, 2020 at 11:57

Thanks,
I guess my question was not about the product pictures but about the overall height of the section. As you can see I have two internal columns in this section. I want to have the same height for the content in the two internal columns. I will always have four products in the product section, hence the height of products want to be same as that of image in the same row. Hope that clarifies my requirment.

#232718 Copied

Olga Barlow

Support staff

April 6, 2020 at 17:18

Hello,

Unfortunately, there is no such option because height of the products variate depending on the device width and slider works depending on slider settings and won’t depend on the products section height.

Regards

#232756 Copied

Advi Care

Participant

April 7, 2020 at 12:32

How can I have custom carousel as https://prnt.sc/ruo5dt
I do not see this option in current builder. Thanks!

#232830 Copied

Olga Barlow

Support staff

April 7, 2020 at 12:35

Hello,

Do you want to place the custom carousel to tabs? This element is not allowed in tabs because of the HTML structure. If you want to add any advanced banner there you may use revolution slider.

Regards

#232832 Copied

Advi Care

Participant

April 7, 2020 at 13:03

Oh I see.
I tried to use the Banner with mast but I am unable to get an image in the site. Instead of image I am seeing the name of the image. Can you please help to check on same.

https://prnt.sc/ruougs

Thanks!

#232841 Copied

Olga Barlow

Support staff

April 7, 2020 at 19:14

Hello,

I don’t see problem with the Banner element http://prntscr.com/ruwso5
Maybe you forget to add the banner image size in the element settings.

Regards

#232870 Copied
Viewing 19 results - 1 through 19 (of 19 total)