[CherylwoodmanParticipant]

Hi Themeco,

I want to move the Woocommerce ‘add to cart’ button to appear straight after the product title…

At the moment it appears after anything I add to the product description area.

Is there a way to do this?

Thanks so much,

Cheryl

[JoaoModerator]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks,

Joao

[CherylwoodmanParticipant]

Hi Joao,

My URL is http://www.honestyforyourskin.co.uk, and these are the product pages I am trying to modify (http://honestyforyourskin.co.uk/index.php/shop/)

Thanks,

Cheryl

[Paul RModerator]

Hi Cheryl,

You can add this under Custom > Edit Global CSS in the Customizer.

.woocommerce li.product .entry-wrap { 
    top: calc(100% - 10em);
}

Hope that helps.

[CherylwoodmanParticipant]

Hi Paul – I added the code as you’ve typed, but it didn’t change anything on my product pages…

This is exactly what I’ve typed .woocommerce li.product .entry-wrap {top: calc(100% – 10em);}

I can’t see any differences to your code, so I don’t think I’ve messed that part up…

can you help?

[ThaiModerator]

Hi There,

I couldn’t find the provided CSS on your website.

Could you please add them again?

.woocommerce li.product .entry-wrap { 
    top: calc(100% - 10em);
}

Thank you.

[DarshanaModerator]

Hi there,

It seems that you’re having an issue with your custom CSS. Try adding the above code into the top of of your custom css section.

To find CSS issues, copy all of your custom CSS into an online tool like CSS Lint (http://csslint.net/) and check for errors. CSS won’t parse correctly when you have errors.

Thanks!

[CherylwoodmanParticipant]

Hi Darshana,

I’ve added the code and checked through the tool you’ve shared, the tool says all is ok, but the ‘add to cart’ button hasn’t moved…

This is the link to the page

http://honestyforyourskin.co.uk/index.php/product/renew-antioxidant-night-oil/

How can I move the add to cart button to below the product price?

Thanks,

Cheryl

[Paul RModerator]

Hi Cheryl,

Please try this code instead.

Add this in Appearance > Customize > Custom > Edit Global Javascript

jQuery( function($) {    
   $('.single-product form.cart').insertAfter('.single-product p.price');
});

Hope that helps

[CherylwoodmanParticipant]

Hi Paul – omgosh that works! Thankyou so much,

Is there a way that I can have this inline with the quantity box that appears/remove the quantity box?

It looks a little messy having them stacked ( http://honestyforyourskin.co.uk/index.php/product/renew-antioxidant-night-oil/)

[JadeModerator]

Hi Cheryl,

Please try to add this in the CSS customizer:

.woocommerce .price, .woocommerce .quantity, .single_add_to_cart_button {
    float: left;
    margin: 0 10px 0;
}

#my-accordion {
    float: left;
    margin-top: 15px;
}

.single_add_to_cart_button {
    height: 45px;
}

.woocommerce div.product .summary .price>.amount {
    top: 8px;
    position: relative;
}

Hope this helps.

[CherylwoodmanParticipant]

Thanks Jade, that’s worked, but the elements now need spacing a little bit. I’ve included a screen dump & the link…

http://honestyforyourskin.co.uk/index.php/product/renew-antioxidant-night-oil/

how can I add space between the price, quantity and add to cart button?

and, can I adjust the height on the quantity box to match the price & add to cart button?

Thanks so much,

Cheryl

[Paul RModerator]

Hi Cheryl,

To achieve that, you can add this under Custom > CSS in the Customizer.

.single-product .summary.entry-summary p.price {    
    margin-bottom:0;
    margin-right:15px; 
    line-height:35px;  
}

.single-product .summary.entry-summary .quantity {
     margin-right:15px;
     margin-bottom:0;
}

.single-product .summary.entry-summary .quantity input[type="number"] {
    height: 35px;
}

Hope that helps.

[CherylwoodmanParticipant]

That works a dream – thanks Paul!

[LelyModerator]

You’re welcome!

Cheers!

[Author]

Posts