Transition effects – on a product page

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

  • Avatar: yaronb
    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.
    16 Answers
    Avatar: yaronb
    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

    Avatar: Rose Tyler
    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

    Avatar: yaronb
    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

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    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

    Avatar: yaronb
    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

    Avatar: yaronb
    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

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    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

    Avatar: yaronb
    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

    Avatar: yaronb
    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

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    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

    Avatar: yaronb
    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

    Avatar: Rose Tyler
    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

    Avatar: yaronb
    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

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 30, 2020 at 07:26

    Hi,

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

    Regards

    Avatar: yaronb
    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

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 30, 2020 at 20:16

    Hello,

    You are welcome.

    Regards

  • Viewing 17 results - 1 through 17 (of 17 total)

The issue related to '‘Transition effects – on a product page’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.