Custom CSS add to cart button

edited May 2017 in Theme support
1.

Hey, we tried to style the add to cart button. We wanted it to fill out the area together with the stock amount and to go further down. We did this and it seems to work - but it doesn't work on mobile? Any idea why it doesn't work on phones too?

.woocommerce button.single_add_to_cart_button, .single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed, .single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed:hover, .woocommerce button.single_add_to_cart_button:hover {
    padding: 11px 20px;   
}

.woocommerce div.product form.cart .button { width: 75% }

2. Is there a way to change the Betheme options-> Header & Subheader->Extras->Action Button with CSS without changing all action buttons? We tried a.button .button_label but it changes all action buttons not just the menu one

Comments

  • 1. I do not get what are you truing to achieve, send a screenshot.
    2. Try it like this:
    ul.contact_details li i, ul.contact_details li a {
    color: red !important;
    }
  • 1. http://imgur.com/a/MCn85 / http://imgur.com/a/5hq8U. On the second picture there is a gap under the button it does not get the same size as the quantity. But it works on the code on phone.

    2. Doesn't do anything. The action button is the same color.
    ul.contact_details li i, ul.contact_details li a {
    color: red !important;
    }

    Changed the stuff in the action bar, but not the action button in the menu :)
  • 1. It works, your custom css is enabled. Delete browser cache.
    2. My bad, but there is no action button.
  • 1. I just tried clearing the cache and also opened from a private window. It doesn't work in either. When logged in (cache disabled) it also doesn't work. We are using Chrome to test it.
    2. No of course I understand, CSS is strange sometimes. We can do the code but all IDs we find includes all action buttons not just the one in the menu. So what we are basically wondering is if there is a custom ID available for the action button in the menu that does not affect other action buttons on your site. We moved it now, because we couldn't make it work - we were just wondering if you knew of any class for just the menu actionbutton.
  • 2. The action button has a class of .action_button, http://prntscr.com/fdpl22
    1. It works, http://prntscr.com/fdplyq, you just have to make it bigger on the phone since it is changing the size of the quantity input.
    @media (max-width:767px) { PUT THE MOBILE CSS HERE }
  • THanks a lot!!! Makes perfect sense
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.