Reorganizing the Add to cart button

[prc93ltda]

Hello,

I need to reorganize the right side of my page, is it possible to:

1). Hide the <3 heart wishlist button

2). Place the -1+ to increase and decrease the quantity on top the of the Add To Cart” button

3). center everything

 

Please see images. Thank you

Attachments:

You must be logged in to view attached files.

[Harry]

You can add custom css

.woocommerce-variation-add-to-cart.variations_button {
display: flex;
flex-flow: column nowrap;
}

.woocommerce-variation-add-to-cart.variations_button > * { margin-right: 0; margin-bottom: 0;}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Thank you for the help Harry!

Please look at the picture, this was the result.

THe -1+ to increase and decrease the amount of products became really big, is not small like it was before and it looks bad like that.

Can you please tell me how to make the “add to cart” button big like the Buy with Apple Pay and make the -1+ back to the same small size it was before?

The <3 to add to wish list is still there on the page and I want to hide it.

 

Thank you Henry!

Attachments:

You must be logged in to view attached files.

[prc93ltda]

This is the way it looks on mobile

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

please use new attach file and change prev code to

.woocommerce-variation-add-to-cart.variations_button {
display: flex;
flex-flow: column nowrap;
}

.woocommerce-variation-add-to-cart.variations_button > *,
.single-product div.product form.cart .quantity { margin-right: 0; margin-bottom: 10px; text-align: center;}

Best regards

Attachments:

You must be logged in to view attached files.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Hi Harry, is that a new child theme I have to install?

Last time you gave me another child theme to install and it made the right side of the page with the ATC button and the variations sticky so I want to make sure this theme will still have that. Please let me know.

 

Thank you!

[Harry]

Hi,

This is core theme. You delete core theme and install new one.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Harry I installed the theme and added the code and look at the image that was the outcome nd that’s the opposite of what I want to happen.

I want the “add to cart” button to be the same size as the “buy with pay” button

and for the -1+ to increase or decrease the quantity of items to be small the regular size it was before but on top of the add to cart button. Please help me 🙂

Attachments:

You must be logged in to view attached files.

[Foster]

Hi,

This is your website displays on the mobile http://take.ms/BB6ko, I think it looks good. What exactly do you want to custom?

[prc93ltda]

Hi Foster,

On Smaller screens it looks bad and 90% of my traffic comes from mobile devices so I need the -1+ sign on to be under the “only 8 left in stock” in the pciture you send me, the add to cart as big as the “buy with Pau” button and to hide the wishlist heart as noone is using it and is taking space in the screen.

 

I added the code Harry gave me and look at the image for the aoutcome

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

You can add below css

@supports (-webkit-appearance: -apple-pay-button) {
@media only screen and (max-width: 767px) {
.single-product div.product .stripe-enabled form.cart .quantity {
width: 100%;
text-align: center;
}
.single-product div.product .stripe-enabled form.cart .apple-pay-button-wrapper {
width: 100%;
}
.single-product div.product .stripe-enabled form.cart .quantity~.button {
width: 100%;
}
.stripe-enabled .cart .yith-wcwl-add-to-wishlist {display: none;}
}}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Thank you Harry! I added the code and the website just goes blank completely and once I remove it the website works again

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

This because this code you add in theme option https://monosnap.com/file/ngmYlNbb56qtVLKP7FaijBIP2Ih5ry#

I remove this and clear cache on your site.

please check

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Hi Harry, I’m not sure if you pasted the code in the website but once I went there I just checked and your code was there and the —-//checlout//—– was deleted but the wesbite is still blank, I had to delete your code. can you please check again?

[prc93ltda]

The “Buy with Pay” button shows on mobile on Google Chrome browser and it’s not supposed to, that button only works on Safari browser so there are a lot of people clicking on it getting confused on mobile devices but the button is not doing anything because it’s not supposed to show up on Chrome.

The image is a screenshot from google chrome and the button was never there before and it’s not supposed to be there in Chrome browser

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Yesterday i added code and check your site, it still work well. Now i check you site it blank. Do you keep the code or remove?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Hi Harry, I had to remove it because it made the website blank and I was resizing the images and once I “regenerated thumbnails” the website crashed with a 500 error so I’m trying to figure out what’s going on with the database

[Harry]

Hi,

When i added the code to your site, i checked your site it still work well.
The Regenerate Thumbnail will get more usage of CPU when it complete your site will be normal.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Hi Harry,

It was a plugin that I installed that made the website crashed after I regenerated the thumbnails so I had to delete the plugin.

I added your code back on the website but there is a problem: the mobile version on Google Chrome shows the Pay with Apple button and is not supposed to.

Pay with Apple was designed to only work with Safari and to only show up on Safari since its an Apple app and for some reason is showing on Google Chrome and the button is not working because it’s supposed to be hidden on Chrome.

This problem does not happen on Chrome for desktop, only on Chrome for mobile.

Thank you.

[Harry]

Hi ,

You can update to latest version to fix issue with Apple Pay.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Foster]

Hi,

Which mobile device did you use? Is it apple’s device?

[prc93ltda]

Hi Harry, it works after I updated it thank you! One last thing that is still missing. How can I put the -1+ to increase and decrease the product quantity on top of the button? I don’t want it next to anything I need it in between the “In stock” message and the ATC Button. Please see image.

Thank you for the outstanding help! I specialize in website conversion optimization so there are things that have to look a certain way for people to buy

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

I gave you code before

@supports (-webkit-appearance: -apple-pay-button) {
@media only screen and (max-width: 767px) {
.single-product div.product .stripe-enabled form.cart .quantity {
width: 100% !important;
text-align: center;
margin-bottom: 15px !important;
}
.single-product div.product .stripe-enabled form.cart .apple-pay-button-wrapper {
width: 100% !important;
}
.single-product div.product .stripe-enabled form.cart .quantity~.button {
width: 100%;
}
.stripe-enabled .cart .yith-wcwl-add-to-wishlist {display: none;}
}}

I checked it work well

Please try again

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Yes, I’m sorry I just noticed that this only applies to the mobile version and I was only looking at the desktop version. How can I center the cart quantity and the button? They’re all the way to the left.

Thank you, Harry!

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

You can edit prev code to

.single-product div.product form.cart .quantity {
width: 100% !important;
text-align: center;
margin-bottom: 15px !important;
}
.single-product div.product form.cart .apple-pay-button-wrapper {
width: 100% !important;
}
.single-product div.product form.cart .quantity~.button {
width: 100%;
}
.cart .yith-wcwl-add-to-wishlist {display: none;}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Hi Harry, I added  the code but nothing changed. Please see image. The -1+ to increase or decrease the quantity is still all the way to the left and not centered

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

I checked your site.

My suggest code is

.single-product div.product form.cart .quantity {
width: 100% !important;
text-align: center;
margin-bottom: 15px !important;
}

but on your site

.single-product div.product form.cart .quantity {
width: 40% !important;
text-align: center;
margin-bottom: 15px !important;
}

please change 40% to 100%

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Yes I have to change it because it’s jus really big and it looks bad. I have never seen a website that has a -1+ item increase or decrease section so big.

 

Please see the image, it doesn’t make sense that that section is even bigger than the “Add to cart” button so that’s why I brought it down to a normal size of 40%

Attachments:

You must be logged in to view attached files.

[Foster]

Hi,
It was fixed, please clear browser cache and check once again.

Cheers,
Foster

[Harry]

Hi,

I help you fix issue with Add to cart button.

Please check

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Hi guys, I just checked the website and I saw that all the code that was in the custom CSS style box is gone. Did you guys move it somewhere?

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

We move code in claue-child > style.css

You can edit in appearance > editor

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Thank you so much!!!!

[Author]

Posts