Skip to main content

Comments

17 comments

Date Votes
  • Permanently deleted user

    Dear Marcus,

    Thank you for getting in touch with us.

    If you need to customize the way of displaying the "Add to Cart" element, you should have a template edited from scratch with the Brizy template and the condition for this template should be a single product. If your template is not edited with Brizy, the only option is to add custom CSS.

    Please let us know if you have any further questions.

    Best regards,

    Nelea.

    0
  • Marcus Vicente

    I tried what you said and thought it might work but the button for its class sends to the same page for customization...

    https://deer.network/?page_id=100962&preview_id=100962&preview_nonce=11e7251216&preview=true

     

    What Im going to have to do is customize the button within the checkout.

    What custom CSS can I add to change the button?

     

    Thank you

    0
  • Denis B
    • Edited

    Hi Marcus,

    Link you provided is available only for logged in user. Is this page published? If os, please, provide URL to this page.

    Best regards,
    Denis.

    0
  • Marcus Vicente

    Sorry, try this one

    https://deer.network/brizy-100962/

     

    Thank you

    1
  • Denis B
    • Edited

    Hi Marcus,

    Sorry for late reply, support is limited on weekends.

    Usually, we do not help with custom CSS code. As an exception, I will show an example.

    If you want to change background color on hover for "View or Buy" button and make it look same as two other buttons on this page, add for this button new CSS class (f.e. my-custom-btn). After that add CSS code to change button background color on hover:

    @media (min-width: 991px) {
       .my-custom-btn {
          border: 2px solid rgba(20, 40, 80, 0);
          background-color: rgba(20, 40, 80, 1);
       }
    }
     
    Best regards,
    Denis.
    0
  • Marcus Vicente

    Hi Denis,

    So I should add that code (with customs) to change the "add to cart" button seen below?

    I would like to get all buttons to be consistent, if the add to cart can be regular black but congruent with previous button styles that would be ok too.

    https://deer.network/shop/healer-package-samsung/

    I added it to the additional CSS and it didn't work.

    Thank You

    0
  • Denis B

    Hi Marcus,

    Can I ask you to point me what button style do you want to have for "Add to Cart" button, please?

    Kind regards.

    0
  • Marcus Vicente

    Hi Denis,

    https://deer.network/suit-up/

    https://deer.network/step-in/

    https://deer.network/step-up/

    https://deer.network/step-out/

    https://deer.network/shine-on/

    You can see the different colors on each section(proceed) though don't need to have it align to the colors if its easier to make it Black button with White letters and then White with black letters on highlight.

    Thank You

     

    1
  • Marcus Vicente

    Heller?

    0
  • Denis B

    Hi Marcus,

    Sorry for such delay.

    If this buttons will have same class, it will be easy to set one style to all these buttons. You want one style for all "Add to cart" buttons through all the pages?

    Kind regards,
    Denis.

    0
  • Marcus Vicente

    Denis,

    Yes that would work great- they don’t need to be different colors.

    Black button with white letters
    Highlight* white button with black letters
    White outset shadow to black inset shadow

    Thank you thank you

    1
  • Marcus Vicente

    Its the last thing I need customized to have that "Professional" look.

     

    Thank you

    0
  • Denis B

    Hi Marcus,

    I'm very sorry for late reply.

    Do you refer to this button: View screenshot ? If so, you need to assign to this button custom class, otherwise, it wouldn't be possible to apply CSS code to work on all pages.

    Looking forward to your reply.

    Best regards,
    Denis.

    0
  • Marcus Vicente

    The button I wish to change is the "Proceed" below

    https://deer.network/shop/be-love-package/

     

    Id like to custom the button to look like this https://jmp.sh/FGrZrhD to this https://jmp.sh/8R5G1cO 

    Is that possible?

    Thank You

    0
  • Denis B

    Hi Marcus,

    Please, try CSS code below. You can update it depending on your needs.

    .woocommerce div.product form.cart .button.single_add_to_cart_button{
       font-family: "Muli", sans-serif;
       font-size: 11px;
       letter-spacing: 3px;
       color: #fff;
       border: 3px solid #000;
       background: #000;
       box-shadow: 1px 2px 4px 0px rgb(0 0 0);
       padding: 11px 26px 11px 26px;
       border-radius: 2px;
    }

    .woocommerce div.product form.cart .button.single_add_to_cart_button:hover{
       color: #000;
       background: #fff;
       box-shadow: inset -1px -2px 4px 0px rgb(0 0 0);
       border: 3px solid #fff;
       padding: 11px 26px 11px 26px;
    }

    Kind regards,
    Denis.

    0
  • Marcus Vicente

    Denis,

    ".woocommerce div.product form.cart .button.single_add_to_cart_button "

    The selectors in the CSS code above do not appear to be the correct order, so hence why the code is not having an effect.

    You are best to reach out to your developers in regards to the code and have them review the selector so it is correctly adjusting the look and feel of the button.

    All the help you give is appreciated so!

    Marcus

    0
  • Denis B

    Hi Marcus,

    As mentioned earlier we do not help with custom CSS code and provided you example of code.

    Code I provided was tested in Inspect tool in browser and it worked. In case, if source code of the page was changed, you can update classes and their order.

    If you will have any other questions, please, let us know.

    Best regards,
    Denis.

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

Ask a Question