Return to previous page

Transition effects – on a product page

This topic has 17 replies, 3 voices, and was last updated 5 years, 6 months ago ago by Olga Barlow

yaronb

Participant

May 23, 2020 at 10:32

Hey

1. On the “Shop” page, go to the “See product” button
There will be a color effect like here:
https://prnt.sc/sm93zy

On the product page itself, go to the “buy now” button
The button remains black. No effect.
https://prnt.sc/sm922g

Is it possible to do the button with the same effect?

2. Is it possible to arrange a suitable effect for course,
About product variations?
About this section: https://prnt.sc/sm94j0

3. Adding units to a product or reduction,
The “+” or “-” button,

Hovering on the option has a black effect.
Is it possible to create an effect that will be seen in the black format.
Or rather a suitable color.
This section: https://prnt.sc/sm95cq

And if you can create a transition effect on these icons
Like blog: https://prnt.sc/sm9ady

4. Is there a possibility to add “product sharing”
Custom and not as defined in the system.
To this page: https://prnt.sc/sm960x
In a management system: https://prnt.sc/sm99k2

And also on the blog part:
https://prnt.sc/sm9ady

Thank you very much

Please, contact administrator
for this information.

#238494 Copied Theme version: Lingerie WooCommerce version: 4

16 Answers

yaronb

Participant

May 23, 2020 at 10:39

Oh,

In addition

I forgot to ask in addition,
Because it’s a product page,
How to add “comparison” on a product page
For this area: https: //prnt.sc/sm9eur

Thank you very much and sorry

#238497 Copied
Rose Tyler

Support staff

May 23, 2020 at 12:08
Hi,

1) To be able to see the hover effect on the button you need to select a variation – http://prntscr.com/sm9vuu Colors you can change in Theme Options > Styling > Dark buttons
2) Like this http://prntscr.com/smacx3 ?

.adsw-attribute-option .meta-item-text.active { -webkit-box-shadow: 1px 1px 4px 0 #9a134e; box-shadow: 1px 1px 4px 0 #9a134e; border-color: #9a134e !important; }

3)

.quantity-wrapper span:hover { color: #7c7c7c; }

.single-product-socials a:hover { color: #9a134e; }

4) Theme Options > Social sharing > Select Socials You Want To Show
5) If it is enabled in settings of the plugin, try to clear all cache and check if it appears then.

Regards
#238504 Copied
yaronb

Participant

May 23, 2020 at 15:01

Hi Rose Tyler

You surprised me the truth, thank you very much.

About the answers:

1. I’m in the right place but the truth I got into trouble LOL
Example: https://prnt.sc/smcidm
(Can’t find how to get it back to normal) …

Too bad there is no default restore button,
And it’s a shame I didn’t back up before that):

Can you please help me set the default area of the template and also arrange the hover of the “Buy Now” button?
This button: https://prnt.sc/smctnh, too dark
Even before hovering.

2. True, such a framework.

But it only works when you press a button,
Not switching between the buttons …

You can do the transition (before you click)
That there will be such a color effect and then pressing will be the color of choice?

3. Excellent thanks

4. Yes I know, I just asked if there are any manual options to add friendships that do not appear there or replace existing ones?

5. Do you mean the “comparison” part?
If so I did a cache cleanup, and no …

This demo version appears: https://prnt.sc/smcq4p

Thank you very much

#238520 Copied

Olga Barlow

Participant

May 25, 2020 at 17:30

Hello,

1) The search button on blog is fixed.
To change the color of the add to cart button on the single product use the single product builder options http://prntscr.com/snizl7

2) Then use for both
.adsw-attribute-option .meta-item-text.active, .adsw-attribute-option .meta-item-text:hover
4) There is no option to add the custom social there. Only by additional customization.
5) Ad compare button to place you want to show it http://prntscr.com/snj3tx It won’t appear if you did not add it to product layout.

Regards

#238726 Copied

yaronb

Participant

May 26, 2020 at 05:20

Hi Olga

Thanks so much for responding ..

1. Blog, no problem.

2. I added the CSS code and I don’t see any change.
This code: https://prnt.sc/sntaks
As you can see here: https://prnt.sc/snt5jx

I think repeating my words, to avoid the misunderstandings,

For this part I meant that there was no transition effect on the
Buy Now button,

Demo Video: https://www.loom.com/share/1ed861c48059436faa4d2b557399b1a1

I would love to clarify the matter,

4. Very well. Thank you.

5. Regarding Compare, I follow your guide.
And I added successfully.

Thank you very much ,
Yaron

#238772 Copied

yaronb

Participant

May 26, 2020 at 05:51

Oh, sorry,

You can also request the CSS code from you
That hides “CATEGORIES” on a product page.
This section: https://prnt.sc/sntmtt

It’s similar to this code you gave, I guess
https://prnt.sc/sntmd0

Thank you

#238774 Copied
Olga Barlow

Participant

May 26, 2020 at 18:13
Hello,

2) I think it would be great if you could watch the video tutorials about basic CSS.
You have had to replace just selectors, not whole the code. Here is a full code below

.adsw-attribute-option .meta-item-text.active, .adsw-attribute-option .meta-item-text:hover { -webkit-box-shadow: 1px 1px 4px 0 #9a134e; box-shadow: 1px 1px 4px 0 #9a134e; border-color: #9a134e !important; }

6) Edit the single product using builder and disable the categories http://prntscr.com/so8i92

Regards
#238842 Copied
yaronb

Participant

May 27, 2020 at 13:25

Hi Olga

First I want to learn more about the language because it is definitely a language that contributes and is interesting. This video is in addition to practical studies.

But you have to find time all the time, and unfortunately everything is required in stages.
I believe I can achieve that at the end of the site.

For the other things,

1. I put the code CSS. But the site still shows no difference on a product page. I can take a picture of you on the screen, but I don’t think it will help in this case, because the picture won’t show all the code.

I would like to thank you if you can look into this issue

2. Categories: Done … I really like discovering your templates more
They are smart and have good additions.

Surely I will buy another template from you when done, just hope to find a suitable one for my topic (currently not enough = maybe a tip for designers LOL).

Thank you

#238962 Copied

yaronb

Participant

May 27, 2020 at 14:56

Hi Olga again,

I wanted to address the topic posted at the beginning of my post, this one.
I wrote about the button on a product page which is really dark.
Based on your explanation, I went into settings designed to change the button color.
This button: https://prnt.sc/sostim

I manage to change the background color “beyond” on the button,
But the first, dark color does not change color at all.

I thought it was caching but maybe I’m wrong and that’s not the place …

Here: https://prnt.sc/sosvdm

* Anyway, in the meantime, I have restored the original color to avoid creating new problems

I would love to clarify the issue again,

Thank you

#238975 Copied

Olga Barlow

Participant

May 27, 2020 at 17:46

Hello,

1) Check now.
3) If you want to change the color of the add to cart button on the single product when you use the single builder edit the builder element settings https://gyazo.com/4a04795159ec0523518b29d6c4de2c42

Regards

#239007 Copied

yaronb

Participant

May 27, 2020 at 19:18

Hi there

What fun to see, what was the problem?

About the “Buy Now” button,
I came in exactly where you said:
https://prnt.sc/sox9pj

But switching a button only works if you choose some variation,
If not the button will be silent. No Comment.
Selection allows button display: https://prnt.sc/soxhab

Example display without selection:
https://prnt.sc/soxhxj

On the front page of the store or category it works.

Can he make the transition work even without choice?

a thousand thanks

#239016 Copied
Rose Tyler

Support staff

May 29, 2020 at 07:58
Hi,

There are predefined styles for the button when a variation is unselected if you want to change it, use the next custom code:

.single-product-builder .single_add_to_cart_button.button.disabled:hover { background-color: #ad1457; } .single-product-builder .single_add_to_cart_button.button.disabled { opacity: 1; }

Regards
#239201 Copied
yaronb

Participant

May 29, 2020 at 17:15

Hi Rose Tyler

I added the code to the site’s CSS.
But there is still no response to the button.

Can you take a peek?

It’s important to tell me that I thought maybe a cache,
But I cleaned and there was no change.

Thank you

#239254 Copied

Rose Tyler

Support staff

May 30, 2020 at 07:26

Hi,

Check your custom CSS code and add } – http://prntscr.com/sqhudd

Regards

#239295 Copied

yaronb

Participant

May 30, 2020 at 18:09

Hi there

Funny how silly it is,
So simple sometimes,
Need to learn CSS (-:

Huge thanks ma’am

#239368 Copied

Olga Barlow

Participant

May 30, 2020 at 20:16

Hello,

You are welcome.

Regards

#239379 Copied
Viewing 17 results - 1 through 17 (of 17 total)