How to align Add to Cart with another button

Resolved newguy321123
(@newguy321123)

4 years, 4 months ago

I use YITH WooCommerce One-Click Checkout Premium for it’s One-Click Purchase function, but the way it sits below the default Single product Add to Cart button isn’t very clean.

Using Inspect Element I can align the default [Add to Cart] & [One-Click Purchase] buttons the way I want, but I need help on where to make the changes in the actual Woocommerce single product page file.

The code that works is…

<div class=”quantity”>
<label class=”screen-reader-text” for=”quantity_5dfb1b72235f6″>TEST Cart Quantity Product quantity</label>

<input type=”number” id=”quantity_5dfb1b72235f6″ class=”input-text qty text” step=”1″ min=”1″ max=”90″ name=”quantity” value=”1″ title=”Qty” size=”4″ inputmode=”numeric”>
</div>

<button type=”submit” name=”add-to-cart” value=”10728″ class=”single_add_to_cart_button button alt”>Add to cart</button>

<button type=”submit” class=”yith-wocc-button button” name=”add-to-cart” value=”10728″>
<span class=”button-label”>Buy Now</span>
</button>

<div class=”clear”></div>

Now where do I go to get it done? 🙂

Thank you.

Viewing 10 replies - 1 through 10 (of 10 total)

Plugin Support Tseten a11n
(@tibetanitech)

4 years, 4 months ago

Hi @newguy321123,

I understand you would like to align the “Add to Cart” and “One-Click Purchase” buttons on your single product page.

The code that you shared is in HTML. I believe it will be a good idea to check if you can make these changes via Custom CSS. Or if CSS isn’t possible, I recommend checking the following link to understand how templates work in WooCommerce and how you can overwrite it via child-themes.

https://docs.woocommerce.com/document/template-structure/

Thread Starter newguy321123
(@newguy321123)

4 years, 4 months ago

Thank you for the quick reply.

I use a child theme but need to learn more about the template structure.
Thanks for the link.

If I figure out the answer I’ll post it here.

Plugin Support Tseten a11n
(@tibetanitech)

4 years, 4 months ago

I’m glad to know you are willing to learn more about the WooCommerce template structure to customize your theme.

Just out of curiosity, can you share with me the link to your site, I can look it up and check if CSS can solve this alignment problem? If it is not possible then yeah, you will need to customize the child-theme.

If you need help with customization, we highly recommend contacting one of the services on our Customizations page (https://woocommerce.com/customizations/).

Thread Starter newguy321123
(@newguy321123)

4 years, 4 months ago

Replied privately.

Plugin Support Tseten a11n
(@tibetanitech)

4 years, 4 months ago

hmm I’m not sure. But I only see Replied privately.

Thread Starter newguy321123
(@newguy321123)

4 years, 4 months ago

Ha ha.
Sometimes I don’t pay attention. I just replied to the noreply@ email. 😉

The site is http://www.itsmadeinjapan.com
Plugin Support Tseten a11n
(@tibetanitech)

4 years, 4 months ago
😉 No problem!

This can be done via Custom CSS. Please add the following custom CSS code in admin Appearance > Customize > Additional CSS.
```
.product_infos .cart .clear {
    clear: none;
}
.yith-wocc-wrapper {
    margin-top: 0;
    float: left;
    margin-left: 5px;
}
```
Let me know if this doesn’t work for you.
Thread Starter newguy321123
(@newguy321123)

4 years, 4 months ago
Nope.
It just moves the YITH [Buy Now] button up about 5px.

maybe…I wasn’t clear enough. My goal is to have the Add to Cart button and Buy Now button side-by-side (on desktop and tablet view…mobile is of course on top of each other.)
- This reply was modified 4 years, 4 months ago by newguy321123.
Plugin Support Tseten a11n
(@tibetanitech)

4 years, 4 months ago

Can you please share with me a screenshot of the page? I recommend https://snipboard.io for easily sharing screenshots – please follow the instructions on the page, then paste the URL in your response. It works with Chrome, Firefox and Edge.

Here is a screenshot of what I see: https://d.pr/i/DhILjP

Thread Starter newguy321123
(@newguy321123)

4 years, 4 months ago

Ooops…on a mobile (Galaxy S7) not yet. https://snipboard.io/NBGAnR.jpg
Mobile view when testing in WP looks fine.

Looks like a problem with the margins. I’ll play around with it.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘How to align Add to Cart with another button’ is closed to new replies.

Tags