edit add to cart button placement

Hello @usdatacorporation

Please use the following css code to align text & cart icon on same line

ul.site-header-cart li.avl-cart {
    display: flex;
    align-items:center;
}
.after-top-header-wrapp .icons-wrapp {
    width: 20%;
}
.after-top-header-wrapp .icons-wrapp .cart-wrapper .text {
    padding-left: 20px;
}

Please let me know if you have any other queries.

thank you but I think you misunderstood my query. I need the quantity drop-down and add to cart button on the product page to not overlap.

https://beaconlists.com/shop/lists-of-chros/

• This reply was modified 4 years, 2 months ago by usdatacorporation.

Hello @usdatacorporation

Please use the following CSS code to fix that

.woocommerce div.product form.cart div.quantity {
    margin-right: 82px;
}

That worked great, thank you!! The only other issue I have is that there’s white spacing between my header and my slider on my homepage – https://beaconlists.com/
Can you please help with this too?

Hello @usdatacorporation

Please use the following CSS to remove the space

@media screen and (min-width: 60em){
.home .site-main {
    padding: 0;
}
}
.home .entry-content{
	margin: 0
}

Thank you so much!!!!!

One last question, how do I remove the “+” & “-” buttons on a product quantity?
https://beaconlists.com/shop/lists-of-cmos/

Hello @usdatacorporation

Please use the following CSS to remove that

.woocommerce div.product form.cart div.quantity a {
    display: none;
}

Thx!!!!!!!!!!!!!!!!!!!!!!!

Absolutely last question, how do I remove the “+” & “-” buttons on the quantity selector a while on the view cart page?
Also looks like the quantity selector needs to be widened to fit the number “10,000”

I also want to remove the view cart button at the bottom of the page on mobile / tablet

@wpoperations

Hello @usdatacorporation

Please use the following CSS code to make the changes as you have requested.

.woocommerce .quantity a.plus,
.woocommerce .quantity a.minus{
	display: none;
}
td.product-quantity input.qty,
td.product-quantity select.qty {
    width: 135px !important;
    max-width: 120px !important;
}
@media (max-width: 768px){
.after-top-header-wrapp .icons-wrapp {
	display: none;
}
}

Can you provide code to make the product image smaller?

@wpoperations Can you provide code to make the product image smaller?