[CherylwoodmanParticipant]

Hi Themeco,

I’ve found the code to add a woocommerce ‘add to cart’ button to any page;

[add_to_cart id=”99″]

I’ve also found this styling code;

array(
‘id’ => ’99’,
‘style’ => ‘border:4px solid #ccc; padding: 12px;’,
‘sku’ => ‘FOO’
)

It doesn’t seem to work, when I try to get rid of the border & even when I’ve deleted this code the border still seems to be visible…

take a look on this page;

http://honestyforyourskin.co.uk/honesty-skincare-shop/

how can I make this button & quantity box appear like on this page?

http://honestyforyourskin.co.uk/product/protect-nourishing-cleanse-balm/

Thanks,

Cheryl

[RahulModerator]

Hey There,

Thanks for writing in.

You can remove the border from the Add to Cart section.

Find the following code

element.style {
    border: 4px solid #ccc;
    padding: 12px;
}

Replace it with

element.style {
    padding: 12px;
}

This will remove the border from that section.

Let us know how it goes!

[CherylwoodmanParticipant]

Hi Rahul… at the moment I don’t have any custom code on this page… as far as I’m aware. Where should I find this code snippet?

Thanks,

Cheryl

[JoaoModerator]

I Cheryl,

As your second link is not working I am not entirely sure what you want to achieve,

Would you mind providing a screenshot to clarify so we can provide you a tailored solution?

Thanks

Joao

[CherylwoodmanParticipant]

Hi Joao,

That is strange, I just clicked on it and it worked fine… I’m also attaching a screenshot…

Cheryl

[RahulModerator]

Glad that worked for you.

If you still have anything to ask, let us know. We’d be happy to assist you with everything.

Thanks for using X.

[CherylwoodmanParticipant]

Hi Rahul – I think you misunderstand, the link I shared with you, to show you the page with the formatting I want to change works…

so this is what I want to do…

take a look on this page;

http://honestyforyourskin.co.uk/honesty-skincare-shop/

how can I make this button & quantity box appear like on this page?

http://honestyforyourskin.co.uk/product/protect-nourishing-cleanse-balm/

Cheryl

[ChristianModerator]

Hey Cheryl,

This first link returns a 404. Please check.

Thanks.

[CherylwoodmanParticipant]

Hi Christian,

Sorry – I changed the URL yesterday… this is the new one http://honestyforyourskin.co.uk/store/

Cheryl

[ChristianModerator]

Hey Cheryl,

Adding the quantity field would require filtering the WooCommerce add to cart shortcode. Since this doesn’t come with WooCommerce and X out of the box, this would require custom development. You might want to check this out https://docs.woocommerce.com/document/override-loop-template-and-show-quantities-next-to-add-to-cart-buttons/. Or, you might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

Thank you for understanding.

[CherylwoodmanParticipant]

Hi Christian,

ahh ok thankyou… for the meantime, how do I get rid of the border around this element? … and add a little padding in-between the price & Add to cart button?

Thanks,

Cheryl

[ChristianModerator]

Please add the code below in your Appearance > Customize > Custom > Global CSS

.woocommerce.add_to_cart_inline {
    border: 0 !important;
}

.woocommerce-Price-amount {
    margin-right: 20px
}

Hope that helps. 🙂

[CherylwoodmanParticipant]

Thanks Christian!

Is there a way to;

1. Remove the padding in front of the price (see picture), the space were the border used to be…
2. Stop this red highlight from visualising (in picture)
3. Adjust ‘view cart’ text to be spaced from the button.

p.s. I’ve added this code to the customizer in cornerstone which is specific for the page. I haven’t added it to the global page as the normal shop page doesn’t have these problems. It’s only on this new one I’ve built using the woocommerce short-codes. Is this ok? Will this remain in place if I updated the theme?

Thanks so much,

Cheryl

[JadeModerator]

Hi Cherlyn,

#1 Please fine this code:

.woocommerce.add_to_cart_inline {
    padding-left: 0 !important;
}

and update it to

.woocommerce.add_to_cart_inline {
    border: 0 !important;
    padding-left: 0 !important;
}

#2 Would you mind giving us more info about this item?

#3

a.added_to_cart.wc-forward {
    display: inline-block;
    position: relative;
    top: 2px;
}

It should not be affected during upgrade not unless you made some customization to the theme and didn’t used it in the child theme.

[CherylwoodmanParticipant]

Hi Jade,

Thankyou, #1 worked a treat!

#2, after I’ve pressed the add to cart button, and the curser is removed from the button area, it brings up the highlighted red box around the button… (I’m using Mozilla), you can try and see what I mean (www.honestyforyourskin.co.uk/store).

#3 I added the code, but the text remains the same as in the screenshot I attached before…

Cheryl

[Author]

Posts