Okay
  Public Ticket #2861646
Add to cart button style
Closed

Comments

  • Jennifer started the conversation

    I am trying to change the color of the ¨Add to cart¨ button on the single product page with css, but I cant seem to get it right.

    I have seen that some buttons have an effect when hover and I was wondering how could I get that same effect in my shop and also how to change the color of it.

    https://hn.arrowpress.net/lusion/product-category/fashion/clothing/

    button.single_add_to_cart_button.button.alt {
    background-color: red;
    color: green;
    }

    Thats the code I´ve been trying but without any effect.

  •   Jennifer replied privately
  •  591
    WordPress replied

    Hello,

    You can change color and add custom style CSS in Appearance -> Customize -> Advanced -> Custom CSS

    .woocommerce div.entry-summary form.cart button[type="submit"] {
        color: #fff;
        background: #2c2c2c;
    }
    If you want to be the same effect page I need Custom CSS when you need to pay.


  • Jennifer replied

    Couldnt make it work with that code.

    This one did:

    .single_add_to_cart_button:hover {

        background-color: #d45300!important;

    }

    Thanks anyways,

    Regards,

  •  591
    WordPress replied

    Hello,

    You can try again with custom CSS

    .woocommerce div.entry-summary form.cart button.button[type="submit"] {
        color: #fff; // Change color
        background: #2c2c2c; // Change color
    }


  •  2
    jenndigital89 replied

    Great! thank you!

  •  2
    jenndigital89 replied

    Hello,

    Can I ask for another thing?

    I see the Variation Swatches plugin has activated the "Show swatches on archive/shop page" option, but the variations are not showing on my shop page.

    How can I make it work? 

    Secondly, 

    Im having issues with my menu. I cant get the alignment right.

  •  591
    WordPress replied

    Hello,

    Variation Swatches plugin: Lusion theme use WooSwatches - Woocommerce Color or Image Variation Swatches plugin

    Menu: You want align-right you need to choose icon right

    5913166374.png


  •  2
    jenndigital89 replied

    Hello and thank you for the reply.

    I have activated WooSwatches - Woocommerce Color or Image Variation Swatches plugin, but still, cant make the variations show on the catalog/shop page.

    Regarding the menu, I want it to be properly center align.

    I bought 2 licenses of the theme, and we had the same menu problem on the first site alexahsrl.com. I remember you guys fixed it, but didn't say how.

    I attached a picture of the menu in alexahsrl.com with a more properly aligned menu, and on the site maysix.com.ar. As you can see, the spaces between the items are very uneven. 

    How can I make it properly centered like the first site? 

    Thank you,

    regards,

  •  2
    jenndigital89 replied

    Here is the attachment

  •  591
    WordPress replied

    Hello,

    Can you provide an account admin so I can check that problem for you?


  •   Jennifer replied privately
  •  591
    WordPress replied

    Hello,

    You can check again. I have edited in Elementor




  • Jennifer replied

    Hello,

    Great! Thank you! Can you tell me how you did it?I need to do that on the light version of the menu on the shop page.

    Also, the variations are not showing on the catallog/shop page. How can I make them appear?

    Thank you,

    regards.

  •  591
    WordPress replied

    Hello,

    1: Edit in Header

    1317975283.png

    2: You can link categories and link product variations. So I can check that problem


  • Jennifer replied

    Hello,

    1. Thank you! I was able to fix this issue of the header.

    2. Regarding the variation not displaying on the shop page, I don't quite understand what you are asking for. The products already has a category and variation.

    The weird thing is that on the menu of the header, the variations are appearing, but not on the shop page.
    I'm attaching the pictures.

    I tried reading the documentation of the plugin, but still, I cant understand why the variations are not showing.

    regards,

  •  591
    WordPress replied

    Hello,

    You can add custom style css

    .product-grid div.shopswatchinput {
        position: absolute;
        top: auto;
        opacity: 1;
        visibility: visible;
        padding-bottom: 0;
        width: 100%;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        transform: none;
        bottom: 0;
        overflow: hidden;
        display: block !important;
    }
    body:not(.logged-in) div.product-price {
        display: block;
    }



  • Jennifer replied

    Hello,
    And thank you for the reply.

    So I tried the css code and the variation are showing, but on top of the price.
    I tried changing the shop/archive style but in all 7, the variation is still on the price.

    I am attaching some images.

    regards,


  •  591
    WordPress replied

    Hello,

    You can choose the layout product you want and provide an account admin so I can check that problem for you.


  •   Jennifer replied privately
  • Jennifer replied

    By any chance, have you empty the pages bin?

  •  591
    WordPress replied

    Hello,

    I don't see any product like your previous photo. Can you provide full access to the account? The account you provide us does not have the right to set up an option.

    https://maysix.com.ar/shop/


    7571217169.png


    Image old


    4451967450.png



  • Jennifer replied

    This happened when we put the css code provided.
    We are very close to lauching the site, so we cant have it that way for too long.

    I put 2 products with that problem.
    As you can see, the colors appear on top of the price.


    We also found that one plugin is duplicating the products on the product page.
    The plugin is Arrowpress Core


    regards,

  •  591
    WordPress replied

    Hello,

    You can check again. color option working normally


    9753422161.png


  • Jennifer replied

    Hello,

    The colors are working, but there is a huge space between the product name and the price, and the photos are all cut.

    And were you able to see why  Arrowpress Core Plugin is duplicating the products?

    regards,

  •  591
    WordPress replied

    Hello,

    The problem was added by the plugin. You can try to deactivate the plugin you have installed and check that problem.

    5695090154.png


  • Jennifer replied

    Hello,

    Thanks. I was able to fix the problem.

    I still have products being duplicated caused by this plugin: Arrowpress Core Plugin.
    DO you know how to fix that?

  •  591
    WordPress replied

    Hello,

    You can remove the megamenu product. We will check that problem when Megamenu displays the product.

    8456881970.png

    1066312224.png


  • Jennifer replied

    I am trying to change the menu, but it wont let me.
    When I change the menu on the header, the changes are not being displayed on the site.

  •  591
    WordPress replied

    Hello,

    Go to  Edit Header with Elementor -> You can follow instructions

    1317975283.png

    2: You can link categories and link product variations. So I can check that problem



  • Jennifer replied

    Hello, 

    I have another problem.I dont know if I should open another ticket.
    The infinite scroll in not working on the shop page.

    Specially when viewed as guest
    Can you please check that out?

    regards,

  •   Jennifer replied privately
  •  591
    WordPress replied

    Hello,

    You can check again. I have an update the again code and it is working normally.


  • Jennifer replied

    Hello,

    I have checked and it works when I login into my admin account.
    But when navigating with new users, it is still not working.

    regards,

  •  591
    WordPress replied

    Hello,

    You need clear cache and check again


    7269010529.png


  •   Jennifer replied privately
  •  591
    WordPress replied

    Hello,

    I have created license key for domain testingtheme.maysix.com.ar 

    dGVzdGluZ3RoZW1lLm1heXNpeC5jb20uYXIyNzY1NzU1MA

    You can install theme and config setting you want.



  • Jennifer replied

    Thank you very much!

    I will let you know as soon as I am done with it.

    regards,

  • Jennifer replied

    Hello!
    Hope you are doing fine.

    So, I was able to create the site from scratch and is working perfectly.
    I have this one last issue that can´t seem to find a solution.

    Is the variation on the single product page
    We´ve assigned different images for every color, but when clicking the color, it doesn´t bring the image that it should.

    I bought 2 licenses and on both sites, I have the same issue. (alexahsrl.com)
    I tried with a different plugin, but still, it doesn´t work.

    Do you know how to solve this? 

    Thank you!
    Kind regards,

    Jenn

  •   Jennifer replied privately
  •  591
    WordPress replied

    Hello,

    With the single layout 1, We have Custom Code so when you choose different colors images will not change. You can use layout single default and Single 4.


  • Jennifer replied

    Hello and thanks for the reply.

    Sorry to bother so much, but is there any way we can make it work with Single 1?
    This is the last issue to resolve.

    I am looking for ways to use single 1 adding filter and actions, but can´t make it work.

    Also, can´t seem to find Single 4 layout.

    Thank you in advance,
    kind regards,

  •  591
    WordPress replied

    Hello,

    Currently we have no updates with single 1.
    Sorry! You can use Layout 3 and Default.


    6493107463.png