Placing an "add to cart" button on my workshop page

To Whom it May Concern,

I do not know how familiar you are with woocommerce, but they have a set of shortcodes that allows one to place an "add to cart" button anywhere on a given website. The shortcode I have put on my site is as follows:

array(
'id' => '2283',
'style' => 'border:4px solid #ccc; padding: 12px;',
'sku' => 'molokai'
)

[add_to_cart id="2283"]

What I would like to be able to do is customize the color of the button and its size. Any help you can offer on this front would be greatly appreciated.

  • Vaughan

    Hi @Nicholas,

    i'm not that familiar with woocommerce, but if you could post the page URL where the button is, I can certainly try and give you the CSS to customize it.

    I'm not sure what this is though, do you also put that in the page too?

    array(
    'id' => '2283',
    'style' => 'border:4px solid #ccc; padding: 12px;',
    'sku' => 'molokai'
    )

    If so, then you could add the chages to the style

    'style' => 'border:4px solid #ccc; padding: 12px; color: #cccccc; background: #cecece; height: 20px; width: 50px;'

    Just change the colours and values to suit. But i'm unsure how that array actually works, either way though, it should be possible with CSS if you post the page URL.

    Hope this helps

  • Nicholas

    Vaughan,

    My apologies for being so unspecific. The URL where the issue exists is http://wilton2.wpengine.com/workshops/.

    I actually took out the first section of code (shown below):

    array(
    'id' => '2283',
    'style' => 'border:4px solid #ccc; padding: 12px;',
    'sku' => 'molokai'
    )

    I misunderstood its application. The code I have inserted now looks like this:

    <div style="float: center;"><span style="color: #ffffff;">
    [add_to_cart id="2283" style="padding:5px;border:5px solid #eb9e79;width:150px;" sku="molokai"]</span>
    </div>

    I have also attached a screenshot along with this ticket of what that code actually looks like when inserted in. What I would like to know is the following:

    1)The portion of the code that states: "color:#FFFFFF;" is actually some text that I have been trying to get ride of. As I am not very experienced, I just changed the text color to match that of the background. However, the text is still there and as such it pushes against a border that I have put around this "add to cart" button. How do I actually get rid of this text, such that it does not alter the padding of the border surrounding the "add to cart" button?

    2) How do I actually change the color of the "add to cart" button? What would that chunk of CSS look like?

    Please forgive me in advance for my garbled questions - trying to ask how to change code without a thorough understanding of it is like trying to ask for directions in a language one speaks rather poorly. However, I did attatch a screen shot of this "add to cart" button as I have it now, and it is my hope that looking at that should clear up some of the confusion.

    Thank you once again for your assistance.

  • Vaughan

    Hi nicholas,

    No apologies necessary :slight_smile:

    It looks like you've changed the code again. or i'm looking at the wrong button.

    Either way tho, this CSS code should change the button background for you.

    .button.add_to_cart_button.product_type_simple {
      background: none repeat scroll 0 0 #cccccc !important;
      color: #000000 !important;
    }

    But looking at the other CSS, it's a fingers crossed moment because I see the use of !important in the rest of the CSS. Hopefully the above should override it tho.

    Hope this helps

  • Nicholas

    Vaughn,

    Almost worked, but not quite. Thank you for the help nevertheless.

    Here's the code I have for the button.

    <div style="float: center;"><span style="color: #ffffff;">[add_to_cart id="2283" style="padding:5px;border:5px solid #eb9e79;width:150px;" sku="molokai"]</span></div>

    If you can offer any help on this it would be appreciated, but if not, its all good too. I definitely am thankful for the help regardless.

  • Vinod Dalvi

    Hi nicholas,

    How do I actually get rid of this text, such that it does not alter the padding of the border surrounding the "add to cart" button?

    Do you want to remove the button text "Add to cart" and just display blue background of button?

    Is it ok if after removing button text we change the button size to match its original size?

    2) How do I actually change the color of the "add to cart" button? What would that chunk of CSS look like?

    Do you want to change background color of the "add to cart" button?

    Also i don't see the code on your site provided by Vaughan in his previous reply, have you removed the code?

    Regards,
    Vinod Dalvi

  • Nicholas

    Vinod,

    My apologies for taking some time to get back to you.

    What I would like to know how to do is just change the background color of the button, without affecting the actual "add to cart" text displayed on the button.

    And yes, I did change the code a little bit since we last communicated - once again, my apologies for any confusion that created. I am attaching a screen shot of what the button code looks like right now - the actual code portion is highlighted in blue.

    Any advice you can offer on this front is greatly appreciated.

  • Jack Kitterhing

    Hi there @Nicholas,

    Hope you're well today and thanks for your question.

    if you want to change the WooCommerce background color on the buttons globally use

    .woocommerce a.button.alt, .woocommerce-page a.button.alt, .woocommerce button.button.alt, .woocommerce-page button.button.alt, .woocommerce input.button.alt, .woocommerce-page input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce-page #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce a.button, .woocommerce-page a.button, .woocommerce button.button, .woocommerce-page button.button, .woocommerce input.button, .woocommerce-page input.button, .woocommerce #respond input#submit, .woocommerce-page #respond input#submit, .woocommerce #content input.button, .woocommerce-page #content input.button, .woocommerce-message, .woocommerce-error, .woocommerce-info {
        background-color: #000000 !important;
    }

    If just that add to cart button use

    .button.add_to_cart_button.product_type_simple {
      background-color: #000000 !important;

    Thanks!

    Kind Regards
    Jack.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.