Quantity button besides "add to cart" button?

stinem123 · ‎09-21-2024

Hi, can someone help me change this buy button section, so there is only one "Add to cart" button and not a "Buy now" button? The button I want to keep is the first one (that is outlined) - but I want it to be solid, not outlined. Also I really want it to look like this picture below (to the right) where you can click and choose quantity next to the "Add to cart" button.

I know it requires some liquid coding to get both features, because it is separate blocks, so I really hope someone wants to help me out. (I have attached photos below - the blue part is what i want to get replaced)

Link for my website.: https://www.melchiorjewelry.com/products/astrea-ring?_pos=3&_psq=ast&_ss=e&_v=1.0

This is link for the website, with the features i want.: https://www.miechristiansenjewelry.com/products/adella-perlearmband

Thank you so much, hope someone can help me out here!

.

BSSCommerce-B2B · ‎09-21-2024

@stinem123 , did you fix that ?

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Dascalargo · ‎09-21-2024

Perhaps you’re doing something with your code right now, but when I go to your site I see neither a quantity selector nor a Buy Now button. I’ve looked at a number of products and it’s the same on every page I saw.

stinem123 · ‎09-21-2024

Hi @BSSCommerce-B2B and @Dascalargo , yes I found out how to fix the buy buttons myself, but I still really want the quality selecter besides the button (like this picture) if that is posibble? Can someone help with coding for that part? Thanks!

BSSCommerce-B2B · ‎09-21-2024

@stinem123 , Add this code before </body> in theme.liquid file

<style>
.product__controls-group-quantity .product__item {
    display: flex;
    gap: 10px;
    height: 48px;
}
.product__controls-group-quantity .product__item .quantity-input {
    overflow: unset
}
</style>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
    const productWrapper = document.querySelector('.product__details')
    var quantityInput = productWrapper.querySelector('.quantity-input');
    var submitButton = productWrapper.querySelector('button[name="add"]');
    if (quantityInput && submitButton) {
    quantityInput.parentNode.insertBefore(submitButton, quantityInput.nextSibling);
});
</script>

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

stinem123 · ‎09-21-2024

Hi @BSSCommerce-B2B, I added the code - but it did not do anything. I applied it in theme.liquid file, just before </body>

BSSCommerce-B2B · ‎09-21-2024

@stinem123, before </body> not <body>

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

stinem123 · ‎09-21-2024

@BSSCommerce-B2B, I dont have a </body> tag in mytheme.liquid file only a <body> tag (this is where I place all other liquid codes in theme.liquid file, and it always works perfectly fine?

Quantity button besides "add to cart" button?

Quantity button besides "add to cart" button?

Community Blog Articles